CSSTYPE - web safe typography on screen for pixel perfectionists

サイトに使用するフォントのCSSを選ぶ際に役立つ「CSSTYPE」。
次のようなＵＩが用意されていて、フォントやサイズを選択すればすぐさまプレビューされ、確認を簡単に行うことが出来ます。
このサイトを知っておくことで、サイト構築時のフォントの表示調整にかなり役立ちそう。



確認できるのは、font, font-size, text-decoration, word-spacing, line-height, letter-spacing, text-align, color, background, width, padding, text-indent, button-text。

次の図は、実際のプレビュー画面。



letter-spacing とか line-height といった文字の間隔や em の相対サイズを確認する際、実際にエディタを編集してブラウザをリロードしながら調節したりしますが、このツールがあれば簡単に調節できて非常に便利ですね。

適用後のCSSを次のように表示することも可能で、コピペですぐ使えます。



サイトで表示している文字って案外重要なのでこだわりたい部分ではありますね。

関連エントリ

• CSSの便利ツール集