文字の間隔を詰めてみるとどのような効果があるでしょうか?今回は文字の詰めにスポットを当てた記事をまとめてみました。

.rule_001 { letter-spacing:0.3em; }
.rule_002 { letter-spacing:0.05em; }
.rule_003 { letter-spacing:0.0em; }
.rule_004 { letter-spacing:-0.05em; }
.rule_005 { letter-spacing:-0.3em; }

上から文字間隔が広い~狭い順に並べてみました。一番下は文字同士が重なり合ってしまい読みにくくなっていますが、文字の間隔を詰めると力強い印象を与えられます。

パワーのあるタイトル

.rule_006 { letter-spacing:0em; }
.rule_007 { letter-spacing:-0.045em; }
.rule_008 { letter-spacing:-0.075em; }

文字詰めはタイトルやコピーなど目立たせたい部分には特に有効になります。サンプルで文字は太めに設定し文字間隔を詰める事で、より力強さを強調してみました。ぱっとページが読み込まれた際に視線が集まりますね。

細いフォント

.rule_009 { letter-spacing:0em; }
.rule_010 { letter-spacing:-0.06em; }
.rule_011 { letter-spacing:-0.1em; }

細めフォントでも文字詰めは有効です。文字詰めをしていない状態よりもまとまりがでてきます。詰めを行っていない状態ではまとまりを欠きなんとなくぼんやりした感じが引き締まりますね。