禁色DIARY大好きな黄色と緑のヲタ話＆よたよたな日常

Webサイトで文字を表示する場合、pxやptでサイズを指定すると
ブラウザボタンでの文字サイズ変更ができません。
目次などは文字サイズを固定するほうが配列の崩れが抑えられて良い場合もありますが、
解説文や小説などは文字サイズを変更できるようにしておくほうがユーザーに親切です。

それだけでなく、px表示では9px～12pxで一行の幅が崩れるバグが出るブラウザがあります。
pt表示では文字が震えるように見えるバグが出るブラウザがあります。

そんなわけでfontは相対性サイズのemやパーセントで指定しておくのが
webサイトでは適切とされていますが、emは基本サイズを指定してそこから相対値を決定するなど
ちょっとわかりにくい部分があるので、最初はパーセントのほうが扱いやすいと思います。

パーセントを使う場合の注意点は75%以上で指定すること。
ブラウザによっては74%～60%はバグが生じて、意図したサイズで表示されません。
ゆえにパーセント表示では75%以上を使う、と覚えておくとよいと思います。
（59%以下の文字サイズは小さすぎて使うことは無いでしょう）

pxとパーセントは以下のように対応しています。
12px＝75%、14px＝88%、16px＝100%、18px＝113%、20px＝125%となります。
（デフォルトで16pxを100%としているブラウザが多いので、それを基準としています。
また奇数pxに対応させると拡大時に崩れることがあるので偶数pxに対応させるほうが無難です）

※Ｏさんへ私信。11px＝69%なのでバグ対象になってしまいます。
今のうちにスタイルシートを75%（12px相当）にしたほうがよろしいかと…。


ついでに行間についてもアドバイスしますと、文字サイズをパーセントで指定した場合は
行間もパーセントで指定するのが基本です。
行間は120%～180%が適当とされています。書体や文章の長さや背景色とのバランスなどで
どのパーセントが良いのかを見極めますが、180%以上広くすると間延びして読みづらくなることが多いです。
ただし、文字サイズが行間よりも大きい場合はパーセント指定をすると重なりますので、
その時は単位なしで倍数で書きます。（150%だったら1.5）

サイト制作のご参考になれば幸いです。