現行の文字サイズの指定に満足してますか?
ホームページ上で表示する文字サイズの指定方法にはいくつかありますね。 満足できる指定方法を使えていますか?
いろいろなサイズ指定方法がありますが、多くは、あまり「微調整」には向いていません。 試しにいくつか表示させてみましょう。
文字サイズ指定の例
確かに様々なサイズで表示できますが、大ざっぱですね。 例えば、「medium」より大きくて「large」より小さい文字サイズが欲しい場合、これらでは指定できません。
※smallやlargeといったキーワードでの指定は、文字サイズの解釈がブラウザによって異なることがあり、必ずしも望み通りの大きさにできるとは限りません。 また、HTMLのfont要素は、非推奨要素です。(デザインはスタイルシートで行うことが望ましいため。)
他にも、「1段階大きく」「1段階小さく」という指定で、smaller・largerという指定があります。
●スタイルシート font-sizeプロパティでの指定例:
smaller 指定なし larger
これは、現在表示されているサイズを基準にして、「1段階大きく(larger)」したり、「1段階小さく(smaller)」したりできる指定方法です。
便利な指定方法ですが、やはり微調整はできません。例えば、「0.5段階分小さくしたい」と思ってもそれは無理です。
絶対サイズ指定は望ましくない
スタイルシートを使ってポイント値を指定することで、1ポイント単位での文字サイズ調整が可能です。 しかし、ポイント値で指定してしまうと、ユーザの意志での文字サイズ調節ができなくなってしまいますから、 ユーザビリティ・アクセシビリティ上、利用は望ましくありません。
※一部のブラウザでは、単位に pt や px を使っても、ユーザによる文字サイズの変更を可能にしているものもあります。
●スタイルシート font-sizeプロパティでポイント値を指定した例:
12pt 13pt 14pt 15pt 16pt 17pt 18pt
ですから、相対サイズ指定で、細かく文字サイズを調節する方法が欲しいわけです。
相対的に文字サイズを微調整できる指定方法
上記の問題を解決した文字サイズの指定方法があります。
スタイルシートの font-size プロパティで利用できる値は、smallなどのキーワードや 12pt といった絶対指定だけではないのです。