こんにちは。エンジニアの山岡です。
WEB屋さんなら誰しも文字の設定に悩んだ経験はおありかと思います。大きくすれば読みやすくなるけど野暮ったいし、逆に小さくするとスタイリッシュになるけど読みづらい。だったら！と、ちょうど真ん中くらいのサイズにするとなんとも微妙……と悩みの種です。
今回は、ノンデザイナーでもWEBサイトの文字を読みやすくスタイリングするCSSをご紹介したいと思います。
CONTENTS
はじめに
まず文字に関するCSSの主なプロパティを確認してみましょう。
- font-size（文字サイズ）
- font-style（標準/太字/斜体）
- font-weight（太さ）
- letter-spacing（文字間）
- line-height（行間）
- text-align（行の揃え位置）
- text-shadow（影）
など、高い自由度でテキストのスタイルを設定することができます。文字に関するプロパティはfont-sizeだけではありません。ですから、font-sizeだけで悩まない事が肝心。複数のプロパティを調節して、文字を読みやすくしていきましょう！
そこで、「簡単」がキーワードの今回は、
- font-size
- letter-spacing
- line-height
この３つだけを使うことにします。
CSSのプロパティについてもっと知りたい！ という方はHTMLクイックリファレンスさんが事細かにまとめて下さっていますのでチェックしてみてください!!
font-size（文字サイズ）
１つ目は、お馴染みのfont-sizeです。さて、おおまかで構いませんのでイメージしてみて下さい。
ターゲットとなる年齢層はどのあたりですか？
10代と50代とでは悲しきかな視力に差があります。そのため、対象の年齢によって最適なfont-size（文字サイズ）は異なります。若年層向けなら12pxでも良いかもしれませんし、70歳以上の高齢者向けなら18px必要かもしれません。幅広い年齢層が見るWEBサイトの場合、高い方の年齢に合わせるのがベターです。
標準の文字サイズは多くのブラウザで16pxを採用していますので、ここでは16pxとします。
p {
font-size: 16px;
}letter-spacing（文字間）
行間ってデフォルトのままだとちょっと詰まりすぎている気がしませんか？文字間はfont-size（文字サイズ）の5〜10%程度が読みやすいとされていますので、気持ち広めにしてあげます。font-size（文字サイズ）の5%で計算して、ここでは0.8pxとします。
p {
letter-spacing: .8px;
}line-height（行間）
行間が詰まっていると窮屈です。同じ行を２度読んでしまったり、読み手にストレスを感じさせてしまいます。行間はfont-size（文字サイズ）の1.2〜2倍程度が読みやすいとされていますので、間を取ってここでは1.6倍とします。
p {
line-height: 1.6;
}完成
完成したコード
p {
font-size: 16px;
letter-spacing: .8px;
line-height: 1.6;
}完成したDEMO
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
最後に
フォントによって、文字同士の間隔やサイズ感が違うのでこれもまた悩みのタネです。適度な間隔を開けるのって案外難しいですよね。丸投げよろしくイレギュラーなパターンは素直にデザイナーを頼るのが一番かもしれません。
実は最近のブラウザならデフォルトのままでも十分に文字は読みやすいのですが、ひとつの答えと言う事でまとめてみました。CSS指定一切なしで表示してみたら、完成したDEMOとほぼ同じ見た目をしていてビックリしました……!! ぜひぜひ実験してみてくださいね。
結論：デフォルトのままでも読みやすい（衝撃）
※単位はpxよりもrem指定の方がベターなのですが、今回は分かりやすくpxで指定しました。
