a-ki blog

見たこと、聞いたこと、考えたこと。

letter-spacingを隠し味程度に

このブログは基本font-sizeを100%にしています。もちろん文章が読みやすいようにという配慮からなんですけど、文字が大きいと詰め込んだ印象になって長文の場合かえって読みにくく感じることがあります。

これを解消するにはline-height(行間)を広めにとる(130%~150%くらい)と同時にletter-spacing(字間)をほんの少し広げてやると良いみたいです。

デフォルトではletter-spacing:0;です。

この文章はletter-spacig:0em;に設定されています。

この文章はletter-spacig:0.05em;に設定されています。

この文章はletter-spacig:0.1em;に設定されています。

この文章はletter-spacig:0.5em;に設定されています。

0.5emに設定すると明らかに広すぎますね。0.1または0.05emくらいで微妙に設定するのがいい塩梅です。

ただし枠の幅が狭い場合、0.1emでも字間が広すぎるみたいです。

僕の場合、タイトル0.1em、本文は0.05em、サイドバーは0emと使い分けています。

ちなみに1行あたりの文字数によっても文章の読みやすさは変わるようです。経験的には全角30~40字程度が適正で50字を超えると長すぎるように思いますがどうでしょう?

文章を読みやすくするためには、単純に文字の大きさだけでなく、字間、行間、文字数を考えながらレイアウトしなければいけないですね。難しいです。