ホームページ上で文字を美しく（見やすくする）方法について紹介。CSSのプロパティの設定で適切な値がどれくらいかなどを知っていれば文字の並びを綺麗で読みやすい状態にすることが出来ます。
font-sizeで適切な文字サイズにする
まずは文字のサイズが適切か確認します。ブラウザのデフォルトのサイズでは16pxであることが多いと思います。16pxでも問題ありませんが、自分はそれより1px小さい15pxにすることが多いです。小さすぎると読み辛くなるので最も小さくても12pxが限度だと思います。
body{
font-size:15px;
}また、読んでもらいたいターゲットに合わせて文字を大きくするのもありです。高齢者の方や小さいお子様など小さいサイズの文字を苦手とする方向けなら18pxぐらいでも問題ないと思います。但し、大きくすると間抜けな印象になりますので注意が必要です。
DEMO
この文章の文字サイズは12pxです。
この文章の文字サイズは15pxです。
この文章の文字サイズは18pxです。
line-heightで行間を整える
次に行間の調整です。行間は詰まっていれば窮屈に感じ、逆に離し過ぎると間抜けな印象になります。最適といっても人によると思いますが、自分は文章は文字に対して1.8倍、タイトルなどの見出しは文字に対して1.5倍で設定することが多いです。
body{
line-height:1.8;
}もちろん、デザインの方向性によっては広くあるいは狭くとることもあります。許容範囲としては文章は文字に対して1.5倍～2倍、タイトルなど文字が大きい場合は1.2倍～1.6倍ぐらいで考えています。
DEMO
line-height:1.2の場合
ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂いが、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。
蜘蛛の糸 芥川龍之介
line-height:1.8の場合
ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂いが、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう
蜘蛛の糸 芥川龍之介
letter-spacingで文字間を整える
文字間に関しては余程こだわる人でなければ特に設定はいらないと思います。逆にあまり開けすぎると読み辛くなるのでほどほどに。1px~5pxの間で設定すれば十分です。
body{
letter-spacing:2px;
}DEMO
letter-spacing:0pxのとき
ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂いが、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう
蜘蛛の糸 芥川龍之介
letter-spacing:2pxのとき
ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂いが、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう
蜘蛛の糸 芥川龍之介
letter-spacing:5pxのとき
ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂いが、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう
蜘蛛の糸 芥川龍之介
まとめ
上記をまとめて設定してみます。
body{
font-size:15px;
line-hegiht:1.8;
letter-spacing:3px;
}DEMO
ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂いが、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう
蜘蛛の糸 芥川龍之介
| フォントサイズ | 15px |
| 行間 | 文字に対して1.8倍 |
| 文字間 | 3px |
こちらを活用する際は好みによって微調整してみてください。