Sジブンノート

『レタースペーシング タイポグラフィにおける文字間調整の考え方』を読みました。

書店の本棚を眺めていると、「レタースペーシング タイポグラフィにおける文字間調整の考え方」というタイトルが目に留まりました。 興味を引かれ、手に取って購入しました。読み終えたので、その感想をまとめます。

どういう本か

文字間のスペースをどのように調整するか。本書は、その一点に焦点を当てた内容です。

文字と文字の間にあるスペースや、文字自体が持つスペースをどのように広げたり縮めたりするかによって、単語や文章のまとまりや読みやすさが変わります。 適切に調整すれば、スムーズに読めますが、不適切な調整は読みにくさや誤解を招くこともあります。その影響について、理論的に説明されています。

文字の位置や形、太さによって、スペースが生まれる領域は異なります。 例えば、『L』や『C』は内部に広いスペース(パーソナルスペース)を持ちますが、『H』は少なくなります。 また、『I』は正方形で囲むと中心に配置されますが、『L』は左寄りになります。 このように文字ごとのスペースの差が異なるため、単語や文章として並べるとバランスが崩れ、まとまりが悪くなることがあります。

欧文と和文、ひらがな・カタカナ・漢字では、スペースの傾向も異なります。 例えば、『囲』は内部のスペースが少ないのに対し、『O』や『I』は広めです。 さらに、漢数字の『一』のように、特にスペースが広い文字もあります。

また、欧文のベースラインと和文の中心線の違い、それらを組み合わせた際のバランスについても詳しく解説されています。 欧文では、文字が地面についているようなベースラインがありますが、和文は上下中央に配置されることが多く、例えば『lower』のベースラインと『いつも』の中心線を揃えようとするとズレが生じます。 そのため、適切な調整が必要になります。

文字ごとに多角的な視点で分析されており、新鮮な発見が多い一冊でした。

Webフロントエンド屋の私

ロゴや広告をデザインする人にとっては、テキストの配置を考えるうえで参考になる良い本だと思います。 一方で、私はWebアプリケーション開発をするプログラマなので、実際に活用できる場面は少なそうでした。

普段、私は Noto Sans Japanese を使う機会が多いですが、その文字のスペースがどれほどあるのかを気にしたことはありませんでした。 たまに「上下の揃い方が気になるな」と思うことはありましたが、深く考えたことはなかったです。

本書は1文字単位のチューニングが中心ですが、Web開発者として何か活かせる点がないか考えてみました。

例えば、ランディングページは多くのユーザーに訪れてもらい、サービスを利用してもらうために作られます。 そこにはサービスの画像を配置しつつ、キャッチコピーなどのテキストで表示することが一般的です。 こうした場面では、1文字1文字を丁寧に扱いたいと感じました。 レタースペーシングや行間、フォントのウェイトなど、一つひとつ確認しながら調整したくなります。 とはいえ、多くの場合はデザイナーが用意して頂いたデザインを参考にすることになりますが……。

読みやすさは感覚的なものと思われがちですが、本書を読んだことで、理論的に読みやすさを考える視点が増えた気がします

また、ブログのような読み物系のサービスでは、レタースペーシングよりも 書体やスペースの調整 を考えたくなりました。 1文字単位での微調整は現実的ではないですが、Web開発では以下のCSSプロパティを使って全体のバランスを調整できます。

  • word-spacing
  • letter-spacing
  • line-height
  • font-size
  • font-weight
  • white-space
  • text-indent

W3CのWCAG 2.1 では、テキストのスペーシングに関する基準が示されています。

  • 行間(line spacing)はフォントサイズの1.5倍以上
  • 段落後のスペースはフォントサイズの2倍以上
  • 文字間(letter spacing)はフォントサイズの0.12倍以上
  • 単語間(word spacing)はフォントサイズの0.16倍以上

これらは最低限の指標だと思うので、実際にスタイルを適用しながらレタースペーシングの調整を試してみたいと思います。

終わりに

途中で「自分はこの本の読者対象ではないかも」と感じ、一度読むのをやめました。 しかし、せっかく購入したので改めて読み直し、最後まで読んでみることにしました。 結果として、単語や文章の読みやすさについて深く理解するきっかけになりました。 普段何気なく見ている広告のテキストでも、レタースペーシングや文字の配置が大きく影響していることを実感しました。 最後まで読んでいただき、ありがとうございました。