【Googleフォント】見出しにおすすめ、数字も綺麗で見やすいフォント54選

見出しに使いやすくて、数字が綺麗で見やすい Googleフォント、54個。

選んだ基準

• 見出しに使いやすい
• 数字が綺麗で、見やすい
• 小文字と数字がちゃんと入っている
• ! ? & ¥ , . もちゃんと入っている

書体の説明は、Googleフォントの各書体ページにある公式の説明（About）をもとに記載。

筆記体

上品なカリグラフィ系と、レトロなロゴ系。

• Tangerine … 16〜17世紀のイタリック体の手書き（チャンセリー体）から着想を得たカリグラフィ書体。小文字の背が低いので、大きいサイズの見出しや短い文向けとされている
• Marck Script … Marck Fogel がフェルトペンで書いた文字がもと。文字同士がつながっていないので、字間を自由に変えられる
• Shalimar … 平ペンのカリグラフィの線から着想を得た、傾いていない筆記体
• Sail … 見出し・ディスプレイ・ポスター向けの、Didot 系の筆記体
• Pinyon Script … ラウンドハンドの筆記体。線の強弱が大きく、強く傾いているので、大きいサイズ向けとされている
• Great Vibes … 大文字はくだけた形、小文字はよりフォーマルな形の筆記体。合字や異体字が2000以上ある
• Italianno … カリグラフィの筆記体。招待状やパッケージ向けとされている
• Corinthia … 3つの太さがある筆記体。パッケージや招待状など向けとされている
• Allura … 広告・ディスプレイ・パッケージ向けに作られた筆記体
• Pacifico … 1950年代のアメリカのサーフ文化から着想を得たブラシの筆記体（2011年、Vernon Adams）
• Yellowtail … 平筆で書いたブラシの筆記体。1930年代の Gillies Gothic や Kaufmann がもとになっている
• Damion … 1936年に Max Kaufmann が描いた書体など、20世紀半ばのくだけた筆記体をもとにした見出し向けのWebフォント
• Cookie … ブラシのカリグラフィがもとの筆記体。本文くらいのサイズでも読めるとされている
• Kaushan Script … あえて形を整えすぎず、縦線の角度やベースラインを少しずつ揺らして作られた筆記体
• Niconne … 1925年の Stephenson Blake の書体 Madonna（さらにその元は Bernhard Cursive）を、Webフォントとして作り直したもの
• Satisfy … Sideshow（デザイナー Squid）のブラシの筆記体
• Oleo Script … 文字同士がつながっていない筆記体。太さは Regular と Bold
• Playball … スポーツの見た目から着想を得た筆記体。野球のバナーなど向けとされている

手書き

手書きは数が多すぎて、まだまだ好きなのが見つかりそう。

• Darumadrop One … 日本の手書き文字と「だるま落とし」から着想を得た、日本語の手書きフォント
• Caveat Brush … 短い書き込み用に作られた手書き書体 Caveat の、ブラシ版。単語の中の位置によって字形が少し変わる
• Sedgwick Ave … グラフィティの手書き文字をもとにした書体。こちらは本文サイズ向けで、大きいサイズ用に Sedgwick Ave Display がある
• Kalam … デーヴァナーガリーとラテン文字の手書き風書体（Indian Type Foundry、2014年）。画面で読む文字用に調整されている
• Homemade Apple … 手書きの筆記体
• Nothing You Could Do … 作者の友人（写真家）の手書き文字がもと

セリフ

本文にも見出しにも使える落ち着いたものと、スラブ（線の端が四角いセリフ）多め。

• Averia Libre … Google Fonts の725書体を平均して作った書体。字形も文字幅も、平均した結果そのまま
• Vollkorn … Friedrich Althausen の最初の書体（2005年）。日常的に使う本文用として作られた
• Lora … カリグラフィにルーツのある、本文用のセリフ。画面での表示に向けて調整されている
• Zilla Slab … Mozilla のロゴや見出しに使われている、Mozilla の基本書体。Typotheque の Tesla がもとのスラブセリフ
• Forum … 古典的な「ローマン」のプロポーションを持つセリフ。本文にも見出しにも使えるとされている
• Zen Old Mincho … クラシックなデザインの、日本語の明朝体。本文用だが、太さが多いので大きいサイズにも使える
• Alegreya … 文学（小説など）を組むために作られた本文用のセリフ。2011年の ATypI で「Fonts of the Decade」に選ばれた
• Bitter … 画面で読むために作られた、本文用のスラブセリフ（Sol Matas）
• Averia Gruesa Libre … Averia ファミリーの一つ。Averia Libre と同じく、たくさんの書体を平均して作られている
• Averia Serif Libre … Averia ファミリーのセリフ版。作者のパソコンに入っていた書体を平均して作られている
• Young Serif … Plantin Infant や ITC Italian Old Style から着想を得た、太いオールドスタイルのセリフ。小文字の b と f に丸いカーブがある
• Berkshire Swash … Astigmatic（AOETI）の書体

サンセリフ

くせのあるグロテスク（ヘルベチカやArialの系統）多め。

• Stylish … 韓国語とラテン文字のフォント（公式の説明はこれだけ）。※ ¥ は入っていない
• Karla … グロテスク系のサンセリフ。ExtraLight〜ExtraBold の可変フォント
• Space Grotesk … 等幅の Space Mono（Colophon Foundry、2016年）をもとにしたサンセリフ。等幅だったころの独特な細部を残している
• Alegreya Sans … カリグラフィの感じがあるヒューマニストのサンセリフ。セリフの Alegreya の兄弟
• Archivo Black … Omnibus-Type のグロテスク Archivo の、いちばん太いもの。印刷とWebの両方で使うために作られた
• Rubik … 角が少し丸いサンセリフ。Chrome Cube Lab の一つとして Hubert & Fischer が作った
• M PLUS 1 … Thin〜Black の9段階の太さがある、日本語のサンセリフ

極太

見出しを大きく置くとき用。超極太よりは軽いので、少し長めの見出しにも置きやすい。
極太と超極太は、H の縦棒の太さと字の高さの比率で分けてみた。

• Paytone One … Webの見出し用に作られたサンセリフ
• Changa One … 見出し用。アセンダ・ディセンダが短く、小文字が正方形に収まるように作られている
• Lilita One … 見出しや短い文向けの、やや縦長の太いディスプレイ書体
• Bagel Fat One … パンやお菓子から着想を得た、角の丸い極太。縦の線と横の線が交わるところの太さの差が大きい。韓国語も入っている
• Passion One … 大きいサイズの見出しを組むために作られたディスプレイ書体
• Chewy … Squid のディスプレイ書体

超極太

いちばん太い5つ。1語だけ大きく置くのにいい感じ。中でも Sigmar は飛び抜けて太い。

• Sigmar … 20世紀半ばのパルプ雑誌の広告に使われた書体をもとにした、見出し専用のWebフォント。前身の Sigmar One のスモールキャップを、小文字に置き換えた改良版（2023年）
• Titan One … 大きな筆で書いた手描き文字がもとの、とても太いディスプレイ書体。見出しや短い文向けとされている
• Rammetto One … 1926年の Stephenson Blake の大文字だけの書体 Basuto がもと。小文字を新しく作り足している
• Shrikhand … グジャラート文字とラテン文字に対応。名前はグジャラートのデザート（シュリカンド）から
• Alfa Slab One … 1921年に Robert Thorne が Thorowgood 活字鋳造所のために作った Six-lines Pica Egyptian が下敷きの、極太のスラブセリフ

番外

好きだし使いやすそうだけど、小文字と大文字が同じ形がなので番外。

• Permanent Marker
• Rock Salt
• Luckiest Guy

日本語・韓国語も入っている書体

欧文と数字の形で選んだけど、次の5つは日本語か韓国語も入っている。

• 日本語 … Darumadrop One／Zen Old Mincho／M PLUS 1
• 韓国語 … Stylish／Bagel Fat One

日本語の見出しと欧文の見出しを同じ書体で揃えられるので、これはこれで便利。
日本語フォントはファイルが大きいけど、Googleフォントは使っている文字の分だけ読み込む仕組みになっている。

使い方

Googleフォントで書体を選ぶと、読み込み用のコードが出てくる。
なんでもかんでも読み込むと重くなるので、使う太さだけ読み込むし、使用する文字が少ないなら使用する文字だけ読み込む。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Paytone+One&family=Vollkorn:wght@400;700&display=swap" rel="stylesheet">

h2 {
  font-family: 'Paytone One', sans-serif;
}
.price {
  font-family: 'Vollkorn', serif;
  font-variant-numeric: tabular-nums;
}

font-variant-numeric: tabular-nums; は数字の幅を揃える指定（書体が対応していれば反映される）。表や価格で桁を縦に揃えたいときに。

おまけ：数字だけの一覧

上記の54書体の数字だけの一覧。
※書体によって数字の背の高さが違うので、見比べやすいように同じくらいの高さに揃えた。