shortcut Webデザインとかガジェットについてつらつらと書き連ねています

フォントサイズの%とpxの換算表を作ってみた

コーディングコンテストの受賞者の方のコードを見て、自分がいかに文字サイズに無頓着だったかを思い知る今日この頃ですが、みなさんいかがお過ごしでしょうか?

ソースの綺麗さとか、アクセシビリティとかに関してはそれなりに知っているつもりでしたが、それにかまけてビジュアル面に対する考え方がずいぶん甘くなっていたようです。だって、文字可変してもレイアウトが破綻しないサイトでページのビジュアルを追い込めと言われてもねぇ…

まあ、そんな言い訳はさておいて、いくつかの文字サイズを基準としたときに、%指定で何pxになるかを調べてみました。
12px〜16pxを基準にして、大体使うであろうサイズを調べてみました。

• フォントサイズ換算表

実際作ってみて気づいたのですが、ブラウザによって%の解釈が微妙に異なりますね。firefoxでは12pxのはずがsafariで11pxとか。

ちなみに、YUIのfont cssでは、smallのフォントサイズである13pxを基準にしていますね。スクリプト方面が目立つのであまり話題になりませんが、reset.cssとかfont.cssはかなり使い勝手がいいですね。

関連するエントリー

None Found