日本語のページに英字や数字が混ざると、大きさがそろわない、位置がずれる、間隔が不自然になるという問題が起きます。これは選び方が悪いというより、和文と欧文で文字の設計そのものが違うために起こります。
和文は正方形の枠に収まる設計で、ひらがな、漢字、句読点が同じ幅を基本とします。一方の欧文は文字ごとに幅が違い、基準となる線の位置も異なります。この2つをそのまま並べると、視覚的な大きさが一致しません。
この記事では、そろわない理由、組み合わせの選び方、調整すべき箇所、そしてWebで実装するときの注意点を整理します。
この記事でわかること
・和文と欧文は文字の設計そのものが違う
・同じ指定でも視覚的な大きさが一致しない
・印象の方向をそろえて選ぶ
・調整すべきは大きさ、位置、間隔
・Webでは指定の順序で挙動が変わる
・確認は実際の文章で行う
和文と欧文は設計が違う
同じ大きさを指定しても違って見えるのは、文字が枠の中でどれだけの面積を占めるかが違うためです。
| 観点 | 和文 | 欧文 |
|---|---|---|
| 文字の幅 | 基本的に同じ幅 | 文字ごとに異なる |
| 枠に対する大きさ | 枠いっぱいに近い | 余白がある |
| 基準となる線 | 枠の中央付近 | 文字の下端 |
| 大文字と小文字 | 区別がない | 高さが異なる |
| 句読点の扱い | 1文字分の幅を取る | 狭い |
同じ指定にすると、欧文のほうが小さく見えることが多くなります。枠に対して占める面積が小さいためです。この差を放置すると、英字が混ざった行だけ弱く見えます。
同じ指定でも、欧文のほうが小さく見えることが多い。
枠に対して占める面積が違うため。
印象の方向をそろえて選ぶ
組み合わせで失敗しやすいのは、印象の方向が違うものを並べる場合です。
| 和文の性格 | 合いやすい欧文 | 避けたい組み合わせ |
|---|---|---|
| 直線的で装飾が少ない | 同じく装飾の少ないもの | 装飾の強いもの |
| 筆の運びが残るもの | 同じく抑揚のあるもの | 幾何学的なもの |
| 丸みのあるもの | 丸みのあるもの | 角が立つもの |
| 太さの変化が大きい | 同じく変化のあるもの | 太さが一定のもの |
判断の軸は、線の太さが一定かどうか、角が丸いか角ばっているか、装飾があるかどうかです。この3点がそろっていれば、細かい違いがあっても不自然にはなりません。
書体そのものの選び方はWebフォントの選び方｜与える印象の違いと業種別の選定基準を参照してください。
線の太さ、角の処理、装飾の有無をそろえる。
この3点が合っていれば、細部が違っても成立する。
調整すべきは大きさ、位置、間隔
組み合わせた後、3つの調整で見え方が大きく改善します。
- 欧文の大きさを少し上げ、和文と視覚的にそろえる
- 基準線の違いによる上下のずれを補正する
- 和欧が隣接する箇所に、わずかな間隔を入れる
- 数字が並ぶ箇所は、幅がそろう設定を検討する
- 見出しでは、字間を詰めて締まりを出す
特に効果が大きいのは、和欧が隣接する箇所の間隔です。日本語と英字が直接触れていると窮屈に見えます。わずかな空きを入れるだけで読みやすくなります。
文字サイズ全体の設計は読みやすい文字サイズの決め方｜サイズ・行間・1行の文字数を数値で揃えるを参照してください。
欧文の大きさを上げ、上下のずれを補正する。
和欧が隣接する箇所の間隔が、最も効果が大きい。
Webでは指定の順序で挙動が変わる
Webサイトで複数の書体を使う場合、指定した順に適用が試みられます。
| 指定の順序 | 起きること | 推奨 |
|---|---|---|
| 欧文を先、和文を後 | 英数字は欧文、日本語は和文 | この順序にする |
| 和文を先、欧文を後 | 英数字も和文が使われる | 意図と異なることがある |
| 和文のみ指定 | 英数字も和文の設計になる | 統一感は出るが弱く見える |
| 指定が多すぎる | 読み込みが増える | 必要な数に絞る |
欧文を先に書くことで、英数字だけを別の書体にできます。ただし書体の読み込みが増えると表示速度に影響します。使う書体の数と太さの種類は必要な範囲に絞ってください。
表示速度への影響はサイトの表示速度を改善する優先順位｜何から手をつけるかを参照してください。
欧文を先に指定すると、英数字だけを別の書体にできる。
書体と太さの種類が増えると、表示速度に影響する。
使う書体は少なくする
組み合わせを増やすほど、統一感が失われ、管理も難しくなります。
- 和文1種類、欧文1種類を基本とする
- 見出しと本文で分けるのは、必要な場合に限る
- 太さの違いで差をつければ、書体を増やさなくてよい
- 書体を増やすより、大きさと余白で階層を作る
階層は書体の種類ではなく、大きさと太さと余白で表現できます。種類を増やすのは最後の手段です。
階層のつけ方はデザインのジャンプ率とは｜差をつける幅で印象と伝わり方が変わるを参照してください。
和文1種類、欧文1種類を基本にする。
階層は大きさ、太さ、余白で表現できる。
確認は実際の文章で行う
見本の文字列だけで判断すると、実際のページで問題が見つかります。
| 確認する内容 | 見つかる問題 |
|---|---|
| 実際の見出しと本文 | 長さによる印象の違い |
| 英数字が混ざる文章 | 大きさと位置のずれ |
| 数字が並ぶ箇所（価格、日付） | 幅がそろわない |
| 長い英単語 | 折り返しの不自然さ |
| スマートフォンでの表示 | 小さいサイズでの可読性 |
特に価格や日付など数字が並ぶ箇所は、実際のデータで確認してください。桁がそろわないと、比較しにくい表示になります。
見本ではなく、実際の文章と数字で確認する。
価格や日付は、桁がそろうかを必ず見る。
他の要素との順序
デザインの各要素には依存関係があり、決める順序が結果を左右します。この要素が全体のどこに位置するかはWebデザインの構成要素はどの順で決めるかを参照してください。
よくある失敗
印象の方向が違う書体を組み合わせる
線の太さ、角の処理、装飾の有無をそろえてください。この3点が合っていれば成立します。
同じ指定のまま調整しない
欧文のほうが小さく見えます。大きさと上下の位置を補正してください。
和文を先に指定する
英数字も和文の設計が使われます。欧文を先に書いてください。
書体の種類を増やして階層をつける
統一感が失われます。大きさ、太さ、余白で表現してください。
見本の文字列だけで判断する
実際の文章と数字で確認してください。特に価格や日付の桁ぞろえは実データが必要です。
よくある質問
欧文をわざわざ分ける必要はありますか
和文の書体にも英数字は含まれているため、分けなくても表示はされます。ただし和文に含まれる英数字は、欧文専用の書体より完成度が低い場合があります。英数字が多く出る業種では、分ける価値があります。
どのくらい大きさを変えるべきですか
数値の基準より、実際に並べて視覚的にそろって見えるかで判断してください。書体の組み合わせによって必要な差は変わります。
見出しと本文で書体を変えるべきですか
必須ではありません。太さと大きさの差で十分な階層をつけられます。変える場合も、印象の方向はそろえてください。
Webフォントは必ず使うべきですか
環境に依存せず同じ見え方にできる利点があります。ただし読み込みの負荷が増えます。太さの種類を絞り、必要な範囲に限定してください。
印刷物とWebで同じ書体にすべきですか
そろえられると一貫性が出ます。ただしWebで使用できる形式や、利用条件が異なる場合があります。使用範囲を確認してから決めてください。規定の作り方はブランドガイドラインの作り方｜どこまで決めれば運用が回るかを参照してください。
まとめ
和文と欧文を混ぜたときに大きさや位置がそろわないのは、選び方の問題というより文字の設計そのものが違うためです。和文は正方形の枠に収まる設計で枠いっぱいに近い面積を占めますが、欧文は文字ごとに幅が違い、枠に対する余白も大きくなります。同じ大きさを指定しても、欧文のほうが小さく見えるのはこのためです。
組み合わせを選ぶ際の軸は、線の太さが一定かどうか、角が丸いか角ばっているか、装飾があるかどうかの3点です。この方向がそろっていれば、細かい違いがあっても不自然にはなりません。逆に方向が違うものを並べると、どれだけ調整しても違和感が残ります。
調整で最も効果が大きいのは、和文と欧文が隣接する箇所にわずかな間隔を入れることです。日本語と英字が直接触れていると窮屈に見えます。またWebでは指定した順に適用が試みられるため、欧文を先に書くことで英数字だけを別の書体にできます。ただし書体と太さの種類が増えると表示速度に影響するため、必要な範囲に絞ってください。
当社ではデザイン制作において、書体の選定と組み合わせをご相談いただけます。Web実装を含めた検討はホームページ制作とあわせてご相談ください。
