日本語と英語を両立させるUIをデザインするとき、多くのチームがつまずくのが文字のバランスです。
漢字・仮名は同じフォントサイズで並べたとき、アルファベットより視覚的に大きく見えます。この差をどう扱うかが問題です。
よくある対応は「漢字のフォントサイズを2px下げる」。シンプルで手軽ですが、根本的な解決にはなりません。英語UIを先に設計し、日本語対応を後から調整するアプローチの限界です。
私たちは別の方法をとっています。配色・レイアウト・機能よりも先に、言語のバランスを設計すること。その具体的な記録を3点にまとめます。
1. キャップハイトで揃える
日本語フォントと英語フォントの視覚的バランスをとる基準として、私たちはキャップハイト（大文字の高さ）を使います。
Apple OSの標準フォント「San Francisco」と「ヒラギノ角ゴ」をキャップハイトで合わせると、英語大文字の高さが漢字の下端（ベースライン）とほぼ揃います。
この方法で整理すると、見出しサイズ（Heading 4 / 20px）では漢字とアルファベットの見た目の差が縮まり、本文サイズでは差が開く——つまりサイズスケールは線形ではありません。フォントサイズを一律に調整できない理由がここにあります。
本文サイズについては、英語16px・日本語15pxとし、行送り（line-height）は24pxで統一しています。両言語の可読性を最大化する組み合わせです。
2. 字間（トラッキング）の調整
字間の扱いは、英語と日本語で方向が逆になります。
英語：見出しの字間を詰めることで、本文と同じフォントウェイトでも見出しらしさが出ます。
日本語：逆に本文の字間をわずかに広げると可読性が上がります。フォントフェースによりますが、ヒラギノ角ゴの本文には0.6ポイント追加するのが私たちの標準です。
字間を整えるだけで見た目は大きく改善します。ただしこれだけでは、まだバランスが崩れていると感じることがあります。その原因が行長です。
3. 行長（メジャー）の設計
言語ごとに、読みやすい1行の文字数の範囲が異なります。
- 英語：45〜75文字（使用フォント・文字サイズで約148〜1110px）
- 日本語：15〜40文字（約234〜624px）
全幅でテキストを流し続けると、大型モニターでの可読性が著しく低下します。
私たちは本文コンテナの幅を512pxに設定しています。日英両言語の可読範囲に収まり、デスクトップでもタブレットでも安定した読みやすさを提供します。デザインシステムの基準値としても使いやすい数字です。
設計段階で整えること
日英バイリンガルのサイト・アプリにおいて、タイポグラフィのバランスは「開発後に調整するもの」として扱われがちです。しかし文字のバランスはコンテンツの見え方・読まれ方に直結します。
フォントサイズスケール・字間・行長の3点を設計段階で決めておくことが、後工程の手戻りを減らし、言語をまたいで一貫した品質を保つ近道です。