2言語対応のウェブサイトでバランスのとれたタイポグラフィックデザインを作成

多言語対応のウェブサイトやアプリにおいては、タイポグラフィーのバランスをとることがとても重要です。

例えば、日本語、中国語、英語の間を切り替えても、それぞれの表示はグリフに対して視覚的にバランスのとれた形で表示する必要があります。中国語と日本語の「漢字」は、表語文字体系であるため、通常同じフォントサイズでもアルファベットの文字より大きく表示されます。本記事では、英語/日本語に対応したサイトにおけるタイポグラフィーのバランスに関して気をつけるべき点を解説します。中国語に関してはまた別の機会で解説を行います。

一般的には、漢字のフォントサイズを2ピクセル下げることで対応されています。誰でもできる、簡単な方法だからです。デザイナーが英語でユーザーインターフェースを作成し、それを元に開発者と品質保証担当者が作業を行います。対応言語の中に、誰も知らない言語があったらどうでしょうか。別の言語におけるタイポグラフィーが十分上質なものであるか、どうすれば判断できるでしょうか。実際に、「2ピクセル減らす」という解決策は単純過ぎるものであり、全世界に適用できるものではありません。アプリケーションのコンテンツのローカライゼーションは、単に言語を翻訳すれば済むものではありません。しばしば言語間でタイプセッティングを統一してしまうと、レイアウトが崩れたり、見た目を損なったりする結果になってしまいます。

では、このギャップを埋めるには、どうすればいいでしょうか。

フォントサイズのスケールと可読性

弊社では、最近手がけたプロジェクトにおいて、カラー、レイアウト、そして機能などについて考える前に、まず英語と日本語のタイポグラフィーのバランスをとる作業を行いました。バランスは、通常開発終了後に調整するものですが、それを先に行ったのです。

上に示した通り、弊社は「San Francisco」（Apple様のOSで使用される最新のデフォルトシステムタイプフェース）と「ヒラギノ角ゴ」をキャップハイトで揃えました。ご覧の通り、ベースラインが漢字の下端と揃っています。ヘディングを精査すると、「ヘディング4/20ピクセル」の漢字は線形的にスケーリングされるわけではないという、興味深い発見がありました。

ミニマリスト的なアルファベットの文字と比べ、漢字のグリフは多くの場合複雑です。小さなサイズでレンダリングする際、線要素が混み合う事態が生じます。そのため、可読性が下がらないよう、「一般的」な細部は単純化されます。

また、英語のレギュラータイプのサイズは16ピクセルであるのに対して、日本語では15ピクセルとなっています。ラインハイト24ピクセルに統一することで、両言語で最高の可読性を実現できます。

トラッキングの違いと可読性

英語でも日本語でも可読性の向上に役立つもう1つの要素として、トラッキングが挙げられます。文字間のスペースを適切に減らすことで、特にヘディングのフォントの太さが本文と同じ場合でも、ヘディングを強調して本文と区別することができます。逆に、日本語においては一般的に、仮名同士の間か漢字と仮名の間で文字間のスペースを空けることで、可読性が上がります（もちろんこれは、どのフォントフェースを選ぶかにもよります）。この例では、弊社は本文テキストのレンダリング時に、ヒラギノ角ゴの文字間のスペースを0.6ポイント増やしています。

これでいい見た目になりました！しかし、英語においても日本語においても、どこかバランスが十分にはとれていないように見えます。そこで重要になってくるのが、「横幅」なのです！

デザインシステムにおける横幅

あらゆる言語において、1行の文字数をどの範囲にすると最も可読性が上がるかが決まっています。1行の幅を常に最大にさせてしまうと、5K画面で読む人には酷な状況になってしまう危険があります。

一般的に、英語の場合は、最も可読性が高いのは1行が45-75文字（弊社が使用しているフォントとレターでは148-1110ピクセル）の場合となります。日本語の場合は、15-40文字（234-624ピクセル）となります。弊社は、タイプセッティングにおいて、本文テキストのコンテナのデフォルトの横幅を512ピクセルにしました（この数字は、チームのエンジニアのお気に入りでもあります）。さらに弊社は、512ピクセルという横幅は、どのようなデザインシステムにも使えるということに気づきました。横幅が512ピクセルだと、デスクトップ端末でもタブレット端末でも、高い可読性を実現できるのです。

ご覧の通り、日本語のタイポグラフィーには特有の問題が存在します。全ての言語に通用する簡単なルールがあるわけではありません。だからこそ、それぞれの言語に関して個別に、タイポグラフィーのバランスをとる作業が必要なのです。タイポグラフィーを賢くデザインすることで、効率向上につながります。