テキストのデザインって難しいし奥が深い...。
テキストのデザインでは、字間や行間など様々なパラメータを最適化して読みやすい塩梅に調整するというのが一般的なはず。しかし、デザイン的にバランスが最適化された読みやすいはずのテキスト調整は本文のデザインとい う観点では必ずしも読みやすさに繋がるわけでなないかもしれないのです。
読まれる頻度が高いであろう、いくつかのメディアサービスの本文デザインを確認してみると...？
Yahoo!ニュース、スマートニュース、日経新聞などを含む多くのメディアサービスの本文を見てみると、ほとんどのサービスで本文デザインは以下のようになっています。
フォントサイズ: 16px
行間: 140 - 200%
字間: 0
段落間隔: 200%
カーニング: なし
ここで特に気になるのがカーニング処理が施されていないことです。つまり「ベタ組み」の状態で本文がデザインされているのです。
ここで、「日本語フォントは横幅が等倍なのでカーニングした方が読みやすいのでは？」という疑問が生まれます。
すべての文字幅が等倍であるという日本語フォントの特殊事情
「日本語フォントはカーニングした方が読みやすいのでは？」とはどういうことでしょうか？
欧米フォントは、プロポーショナルフォントと呼ばれ文字ごとに幅が異なります。例えば、「i」と「w」では横幅が異なり、文章としてフォントを並べたときに読みやすいような間隔に調整されています。（もちろんそれでも特定の文字の並びでは視覚的にアンバランスな字間が生まれるため、これはカーニングで調整されます）
一方で日本語フォントにこのような調整はなく、すべての文字が同じ横幅でデザインされています。なぜなら、縦書きと横書き両方に対応する必要があるからです。そのため、文章としてフォントを並べると各文字の間隔にそれぞれの文字内の余白が含まれることになります。つまり、日本語フォントの文字列には「縦書きと横書きに対応する」という技術的な事情で存在する「余分な余白」があるのです。
これを読みやすいように調整するのが「カーニング」ですが、私たちが日々デジタル環境で読む文字のほとんどにこのカーニング処理はされておらず、いわゆる「ベタ組み」の状態となっています。
日本語フォントを字詰めしなくても読めてしまう理由
私たちはこのような字詰めされていない文章を毎日大量に読んでいます。しかし、これに大きな違和感は感じていないはずです。なぜでしょうか？
一つ目には、書籍や新聞、デジタルサービスなどで文章本文に使用される書体は「ベタ組み」でも読みやすいように設計されているという点があります。
デジタルサービスを例に見てみると、ニュースサイトやメディアサイトをはじめとした文章を読ませるサービスでは基本的にデバイス標準フォントが使用されています。
デジタルデバイスの標準フォントとして採用されるフォントは、数多く存在する書体の中からAppleやGoogleが標準として使用するものを選定しているわけですが、おそらく「UI上などカーニングのない状態で使われることを想定して、ベタ組みでも読みやすい書体」を選定しているのだと思います。
実際にヒラギノの紹介文にも「仮名の字面を少し大きめに設定することで、ベタ組みにおける文字間の開き過ぎを軽減し、ベタ組みでも読みやすい版面を形成」と書かれており、日本語フォントの「余分な余白」が最小限になるようにデザインされていることがわかります。そのため、このような標準フォントでは本文をベタ組みでデザインしても読みにくさにはつながらないのです。
そして、日本語フォントの文章を字詰めしなくても読めてしまう２つ目の理由は「私たちがそのような文字列に慣れているから」ではないでしょうか？
ヒラギノなどでは読みやすいように字面を大きく設定されているとはいえ、等倍フォントであることに変わりはなく、ベタ組みだと文字の並び次第では余分な余白が強調された状態になります。全体的には漢字の周りは詰まっていて、ひらがなの周りは開いているような印象になるはずです。
もしかすると、私たちはこのような文字列の規則に長年触れることで、慣れてしまっているのかもしれません。
日本語フォントの本文を字詰めするともっと読みやすくなるのか？
では、このような日本語フォントに字詰めをするとさらに読みやすくなるのでしょうか...？
OpenTypeの日本語フォントにはフォントデザイナーが定めた適切な字間の情報（プロポーショナルメトリクス情報）が含まれており、この情報をもとに自動的に適切な字間に調整することができます。CSSでもこの機能を利用することができ、ヒラギノや源ノ角ゴシックなどのフォントでは、
font-feature-settings: "pwid"（または"palt"）でフォントが持つカーニング情報を使用した調整を反映することができます。
完全に字間を詰めた状態だと本文テキストとしては詰めすぎになるので、トラッキングを4%くらいに設定すると一般的な本文テキストと近い字間になります。
では、これを使うとどれくらい読みやすくなるのだろうか。実際に以下の画像で中央のスライダーを左右に動かして比較してみてください。
左がカーニングなし、右がカーニングあり。フォントはヒラギノ角ゴ
視覚的にはバランスが取れて綺麗になっているのですが、文章として読んでみると若干「慣れない感じ」がするかもしれません。もちろん個人差はあると思いますが、 漢字の周りが広く、ひらがなの周りが狭く感じるのではないでしょうか？
私たちに は長文を等倍フォントの間隔に合わせて読むという「慣れ」が存在し、「漢字の周りは詰まっていて、ひらがなの周りは開いている」という等倍フォント文字列の特徴を文章を読む際も視覚的なガイドとして利用しているのかもしれません。そのため、逆に全体のバランスが良くなるとかえって経験則的を使ったリーディングができなくなり、違和感を感じてしまうのだと思います。
より綺麗な本文デザインは存在するけど、読みやすくなるかどうかは難しいところ…
現状「多くのユーザーにとっての読みやすさ」という観点では、本文テキストはカーニングなし、かつトラッキングも0のベタ組みが最も安全な選択といえそうです。（記事タイトルにはカーニングを施しているnoteでも本文テキストは字詰めされていないようです）
カーニングを調整した美しいテキストが読みやすさに繋がるとは限らないというのは、デザイナーとしてはなんとも複雑な状況ですが、UX観点ではユーザーの経験則に合わせるのが正解なのかもしれません。
また、プロポーショナルメトリクス情報を使用したカーニングは本文のテキストではあまり有効ではなさそうであるものの、タイトルや短めのテキストを綺麗にしたり、読みやすくするためには効果的なので積極的に取り入れていきたいです。この場合は、4% - 6%あたりでトラッキングを調整しながら書体との相性や全体のバランスを見て決めると良さそうです。
