欧文フォントの組み合わせ（見出し＋本文）

欧文フォント組み合わせ：フォントのペアを選ぶと、英語の見出しと本文が並んだときの見え方をすぐに確かめられます。自分の英文でも試せます。どのペアも最初から端末に入っているシステムフォントだけなので、ダウンロードも外部サーバーへの通信もありません。ペアごとに選んだ理由、測ったx-ハイト、OSごとに実際に表示されるフォントを示します。

出典：Microsoft Learn – Font List Windows 11 (2022年4月21日時点、2026年9月27日閲覧)。更新日：2026年9月27日

フォントのペア

本文の文字サイズ

見出しは本文の1.8倍の大きさで表示します。

マイツールボックス入力内容はこのブラウザーにのみ保存されます。

プレビュー

The art of a good headline

Good typography goes unnoticed. It guides the eye calmly through the text, sets a clear hierarchy and lets the content speak – on a phone just as much as on a large monitor.

自分の見出し（英語・任意）自分の本文（英語・任意）

入力した文章はこのブラウザの画面の中だけで使われ、保存も送信もされず、アドレスにも入りません。

コピーできるCSS

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.2;
}
body {
  font-family: Verdana, Tahoma, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

すべてのフォントのペア

結果

フォントのペア: Georgia + Verdana
この組み合わせが合う理由: セリフ体とサンセリフ体の定番の対比です。見出しにGeorgia、本文にVerdanaを使います。どちらもMatthew Carterが画面用にデザインしたので、骨格とリズムがそろっています。Verdanaはx-ハイトがとても大きく横に広いので、本文は1pxほど小さめにします。
x-ハイト（実測）: Georgia: 0.481 em · Verdana: 0.545 em – 同じ文字サイズでも、本文が約13％大きく見えます
OSごとの表示フォント: OS 見出し本文
Windows 10/11 Georgia Verdana
macOS Georgia Verdana
iPhone/iPad Georgia Verdana
Android Noto Serif（代わりのフォント） Roboto（代わりのフォント）

OS	見出し	本文
Windows 10/11	Georgia	Verdana
macOS	Georgia	Verdana
iPhone/iPad	Georgia	Verdana
Android	Noto Serif（代わりのフォント）	Roboto（代わりのフォント）

計算方法

欧文フォントの組み合わせ方

2つのフォントがうまく合うのは、はっきり違うのに、骨格が似ているときです。一番失敗しにくいのは、セリフ体（明朝体に近い、線の端に飾りがある書体）とサンセリフ体（ゴシック体に近い書体）の対比で、片方を見出し、もう片方を本文に使います。似たセリフ体どうし、似たサンセリフ体どうしは、まちがえて混ざったように見えがちです。

使い方

リストからフォントのペアを選びます（例：Georgia + Verdana）。
本文の文字サイズ（12〜28px）を決め、必要ならプレビューに自分の英文を入れます。
理由、x-ハイト、OSごとの表示を確かめて、CSSをコピーします。

例：Georgia + Verdanaで本文18pxなら、見出しは1.8倍の1.8×18＝32.4pxです。x-ハイトはGeorgiaが0.481em、Verdanaが0.545emなので、同じ文字サイズでも本文が約13％大きく見えます。

大切なのがx-ハイト、つまり文字サイズに対する小文字の高さです。x-ハイトが大きいフォント（Verdana：0.545em）は、小さいフォント（Calibri：0.464em）より、同じサイズでもひと回り大きく見えます。ペアのx-ハイトが大きく違うときは、文字サイズで調整します。表示している値は、Windows 11のフォントファイルのOS/2テーブルから読み取ったものです。

和文フォントと一緒に使うには

ここで選べるのは欧文フォントだけで、日本語の文字は入っていません。日本語の文章に使うときは、CSSのfont-familyで欧文フォントを先に、和文フォントを後に書きます。ブラウザは1文字ずつ、先頭から順に入っているフォントを探すので、英数字は欧文フォント、ひらがなや漢字は和文フォントで表示されます。

例：font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;（Georgiaと游明朝・ヒラギノ明朝）、font-family: Verdana, "Yu Gothic", "Hiragino Sans", Meiryo, sans-serif;（Verdanaと游ゴシック・ヒラギノ角ゴ・メイリオ）。明朝体にはセリフ体、ゴシック体にはサンセリフ体を合わせると、線の雰囲気がそろいます。WordやPowerPointでは、フォント設定の「英数字用のフォント」と「日本語用のフォント」を別々に選ぶと、同じ考え方で組み合わせられます。

なぜシステムフォントだけ？

システムフォントは最初から端末に入っています。ページが速く表示され、読み込み中に文字がずれることもなく、外部のサーバーに通信しません。フォント配信サービスからWebフォントを読み込むと、訪問者全員のIPアドレスがその事業者に送られます。独自のWebフォントを使いたいときは、自分のサーバーに置く方法もあります。

フォントスタック：なぜ名前をいくつも書く？

すべての端末に入っているフォントはありません。そのためCSSでは、複数のフォントを順に並べます（フォントスタック）。ブラウザは入っている最初のフォントを使い、最後のserifやsans-serifのような総称がそれ以外をすべて受け止めます。表は、Windows、macOS、iPhone/iPad、Androidで実際にどのフォントが表示されるかを、MicrosoftとAppleのフォント一覧、Androidのフォント設定（2026年9月27日確認）をもとに示しています。AndroidにはGeorgiaもVerdanaもなく、Noto SerifかRobotoで表示されます。

読みやすい英文のコツ

画面の本文は16px以上、できれば17〜20pxにし、行間は1.5〜1.7くらいにします。
見出しは本文よりはっきり大きく（1.6〜2倍）、太くします。そうすれば1つのフォントだけでも十分です。
英文の1行は60〜80文字くらいに収めます。
文字色のコントラストも確かめます。白地の薄いグレーの文字はすぐに読みにくくなります。

筆記体などの飾り文字をSNS用にコピーしたいときは、筆記体・おしゃれフォント変換を使ってください。

よくある質問

相性のいい欧文フォントの組み合わせは？

セリフ体とサンセリフ体のペアが無難です。たとえばGeorgiaとVerdana、PalatinoとシステムUIフォント、CambriaとCalibriです。はっきりした対比と、近いx-ハイトが大切です。

日本語と英語のフォントはどう組み合わせますか？

CSSのfont-familyで欧文フォントを先、和文フォントを後に書きます（例：Georgia, "Yu Mincho", serif）。英数字は欧文、日本語は和文フォントで表示されます。明朝体にはセリフ体、ゴシック体にはサンセリフ体が合います。

1つのWebサイトにフォントは何種類まで？

多くても2つ、見出し用と本文用です。コード用の等幅フォントのように、別の役割があるときだけ3つ目を加えます。

GeorgiaとVerdanaはどの端末にも入っていますか？

Windows、macOS、iOSには入っています。Androidにはないので、Noto SerifやRobotoで表示されます。そのため、フォントスタックの最後にはserifやsans-serifのような総称を書きます。

x-ハイトとは何ですか？

文字サイズに対する小文字のxの高さです。x-ハイトが大きいと同じサイズでも読みやすくなりますが、行間を少し広めにとる必要があります。

入力したプレビューの文章は保存されますか？

いいえ。自分で入れた見出しと本文は、このブラウザの画面の中だけにあります。覚えておくのは、選んだペアと文字サイズだけです。

出典・根拠

更新日：2026年9月27日 · 編集方針