先日から新しいWordpressテーマを利用していたのですが、デフォルトのフォントサイズがかなり小さく見づらい状態が続いていました。
今日、やっとCSSをいじってフォントサイズを修正。
サイズの他に、フォントの種類も指定したりしました。

フォントって、PCやブラウザによって見える状態が違うので、なかなか意図したようにならないですよね……。
なるべく一般的で、読みやすいものになるように心がけました。

参考にしたのは以下のサイトです。
フォント表示サンプル
このサイトから該当箇所を引用させてもらいます。

CSS でフォントを指定する場合、次のように記述します。

font-family: 'フォントの種類', 'フォントの種類', 総称名;

個別のフォント名 (font family) は一重引用符で括ります。総称名 (generic family) は括りません。複数のフォントを指定する場合、先に見つかったものが採用されます。全て見つからなかった場合は、ブラウザに設定されたデフォルトのフォントで代用されます。

次の例は、 p 要素のフォントを ‘Arial’, ‘Tahoma’, sans-serif に指定するものです。

p { font-family: 'Arial', 'Tahoma', sans-serif }

文章の読みやすさは、フォントの種類だけでなく、大きさと行間の方が強く影響します。次の例は、文字の大きさをブラウザの標準の1.1 倍、行の高さをフォントの高さの 1.3 倍に指定するものです。

p { font-size: 1.1em;
    line-height: 1.3;
    font-family: 'Arial', 'Tahoma', sans-serif }

フォント名に大文字と小文字は区別しません。’Arial’ と ‘arial’ は同じフォントです。

読みやすさには大きさと行間が影響するという部分、まさにそうですね。
行間についてはまだ未調整なので、後日またいじろうと思います。

No related posts.