ブログで文章を書いている時、フォントは綺麗なのに読みにくいと感じることはありませんか？それは、letter-spacingの設定で劇的に変わるかもしれません。

CSSのletter-spacing

詳しい仕様に関しては、MDNのサイトを参考にしましょう。

letter-spacing - CSS: カスケーディングスタイルシート | MDN

styled-componentsの実装例

export const Text = styled.p`
  padding: 0.25em 0.25em;
  box-sizing: border-box;
  letter-spacing: ${props => props.letterSpacing};
  background-color: #eaeaea;
`

styled-componentsを利用したコンポーネントで設定をしてみます。

pxやemの使い方

pxやemについては、MDNの解説を見てください。

CSS の値と単位 - ウェブ開発を学ぶ | MDN

サンプルテキスト

文章は、夏目漱石の「吾輩は猫である」からお借りしました。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

出典：吾輩は猫である - Wikipedia（https://ja.wikipedia.org/wiki/吾輩は猫である）

letter-spacingの様々な例

letter-spacing: normal;

<Text letterSpacing={"normal"}>
  吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
</Text>

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

読みづらさはないですが、読みやすさもあまり感じません。本当に、普通という感じです。

letter-spacing: 1px;

<Text letterSpacing={"1px"}>
  吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
</Text>

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

ほんの少しだけ、余白ができましたが、大きくは変わりません。

letter-spacing: 2px;

<Text letterSpacing={"2px"}>
  吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
</Text>

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

少し余白が明確になり、高級感が出てきました。

letter-spacing: 4px;

<Text letterSpacing={"4px"}>
  吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
</Text>

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

さらに読みやすく、ゆっくりと読める感じです。

letter-spacing: 8px;

<Text letterSpacing={"8px"}>
  吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
</Text>

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

余白が大きすぎるので、文章で使うには少しだらしなくなりました。

letter-spacing: 16px;

<Text letterSpacing={"16px"}>
  吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
</Text>

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

ソーシャルディスタンスとしては、完璧ですね

letter-spacing: -1px;

<Text letterSpacing={"-1px"}>
  吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
</Text>

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

少し窮屈ですね。

letter-spacing: -2px;

<Text letterSpacing={"-2px"}>
  吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
</Text>

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

1px違うだけでも、かなり窮屈に感じます。

letter-spacing: -4px;

<Text letterSpacing={"-4px"}>
  吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
</Text>

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

密です！密です！

letter-spacing: -8px;

<Text letterSpacing={"-8px"}>
  吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
</Text>

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

あぁぁ！朝の満員電車のようです！探偵物のタイトルのようです。

letter-spacing: -16px;

<Text letterSpacing={"-16px"}>
  吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
</Text>

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

もうまったく読めなくなり、カオスです。ホラーを感じるので、そのような表現をしたい時には役立つかもしれません。

letter-spacingは綺麗に見えるように設定しよう

綺麗なロゴやテキストの決め手はフォントだけではありません。それは、文字間の余白が大切です。また、フォントによって適切な値が変わるため、様々な値を試し、心地よく読める設定値を見つけ出すことが必要です。決して、読み手にストレスを与えてはいけません。

手作りのHPでは、そもそも設定をしていないサイトもあります。今一度、運営しているブログやサービスのletter-spacingを見つめ直してください。せっかく素晴らしい文章を書いても、読みづらかったらサイトの離脱が増えてしまいます。