欧文書体の種類とは?分類の全体像とベースライン・xハイトの基本を解説

欧文書体の基本と種類

まずは欧文書体とは何か、そしてどんな種類に分かれているのかという全体像をつかみましょう。

細かい書体名を覚えるより先に、大きな分類を押さえるのが近道です。

欧文書体とは何か

欧文書体とは、アルファベットや数字など、英語をはじめとする欧米の言語を表現するためにデザインされた書体のことです。

書体とは、「Helvetica」「Garamond」のように、文字の形に共通したデザインの特徴を持つ文字のグループを指します。

日本語のための和文書体とは、扱う文字の数も歴史も大きく違います(和文書体については和文書体の基本とはで解説しています)。

和文書体が漢字だけで数千字をデザインするのに対し、欧文書体の基本となるアルファベットは大文字・小文字を合わせて52字です。

文字数が少ない分、1文字ずつの形や文字と文字の並び方に細かいこだわりが込められており、時代ごとにさまざまなデザインの書体が生まれてきました。

欧文書体の主な分類

欧文書体は、文字の形の特徴から大きく次のように分類できます。

分類	形の特徴	代表的な書体の例	主な用途
セリフ体(ローマン体)	線の端に「セリフ」と呼ばれる小さな飾りがあり、線の太さに強弱がある	Garamond、Times New Roman、Georgia	書籍の本文、伝統や高級感を伝えたいロゴ
サンセリフ体	セリフがなく、線の太さがほぼ均一	Helvetica、Arial、Futura	画面の文字、見出し、サイン(案内表示)
スクリプト体	ペンや筆で書いた筆記体のように、文字がつながって流れる	Brush Script MT、Snell Roundhand	招待状、ロゴ、装飾的な見出し
ブラックレター	中世ヨーロッパの手書き文字がもとになった、太く角ばった書体	Old English Text	伝統を感じさせるロゴ、新聞の題字
等幅(モノスペース)	すべての文字が同じ幅になっている	Courier New	プログラムのコード、タイプライター風の表現
ディスプレイ書体・装飾書体	見出しやロゴで目を引くことを目的にした、個性の強い書体	(書体ごとにさまざま)	ポスターやバナーの見出し、ロゴ

このうち、まず押さえておきたいのがセリフ体とサンセリフ体の2つです。

本文や画面の文字に使われるのはほとんどがこの2つで、和文書体でいう明朝体とゴシック体に近い関係にあります(欧文書体の選び方(富士フイルムビジネスイノベーション))。

下の見本では、同じ単語をいくつかの分類の書体で並べています。

※見本の書体は、お使いの端末に入っているフォントで表示されます(端末によってはスクリプト体が別の書体で表示されることがあります)

左から、セリフ体は線の端の飾りと線の強弱でクラシックな印象、サンセリフ体は均一な線ですっきりとした印象、スクリプト体は手書きのような優雅な印象、等幅は1文字ずつ同じ幅で機械的な印象になっています。

同じ「Typography」という単語でも、分類が違うだけで雰囲気が大きく変わることが分かります。

セリフ体の中にもさらに分類がある

セリフ体は歴史が長く、時代ごとのデザインの違いによって、さらに細かく分類されることがあります。

代表的な分け方は次のとおりです。

分類	特徴	代表的な書体の例
オールドスタイル	線の太さの差がゆるやかで、セリフは丸みのある三角形。やわらかく温かみがある	Garamond、Caslon
トランジショナル	オールドスタイルとモダンの中間。線の強弱がはっきりし、端正な印象	Baskerville、Georgia
モダン	縦線が太く横線やセリフが極端に細い。線の強弱のコントラストが強く、華やか	Bodoni、Didot
スラブセリフ	セリフが板のように太く四角い。力強く素朴な印象	Rockwell、Clarendon

たとえばファッション誌のロゴでよく見かけるような、細い線と太い線のコントラストが強い書体は「モダン」に分類されます(セリフ体とサンセリフ体の違いは?(アドビ))。

最初からすべてを覚える必要はなく、「セリフ体の中にも、やわらかいものから華やかなもの、力強いものまである」と知っておけば十分です。

セリフ体とサンセリフ体それぞれの特徴や使い分けは、セリフ体・サンセリフ体とはでくわしく解説しています。

欧文書体の構造(ベースライン・xハイト・キャップハイト)

欧文書体を見比べたり、和文と組み合わせたりするときに欠かせないのが、文字の高さに関する基準線の考え方です。

ここでは、最低限知っておきたい用語を紹介します。

用語がいくつか出てきますが、最初はベースライン(文字が並ぶ線)とxハイト(小文字の高さ)の2つを覚えれば十分です。

欧文書体の文字は基準線に沿って並ぶ

欧文書体の文字は、いくつかの見えない基準線に沿ってデザインされています。

和文書体が正方形の枠に1文字ずつ収まるように作られているのに対し、欧文書体は文字によって高さや幅がばらばらで、大文字・小文字・上下に伸びる部分の高さを基準線でそろえているためです。

下の図は、文字の形を単純化して、主な基準線を色分けで示したものです。

※線の位置は説明のために単純化したもので、実際の比率は書体によって異なります

図の左から、大文字のHはベースラインからキャップラインまで、小文字のxはベースラインからxラインまでの高さに収まっています。

小文字のdはxラインより上(アセンダーラインまで)に、pはベースラインより下(ディセンダーラインまで)に伸びているのが分かります。

この基準線の位置関係から、次の3つの「高さ」が決まります。

用語	意味
xハイト(エックスハイト)	ベースラインからxラインまでの高さ。小文字xの高さで、小文字の大きさの目安になる
キャップハイト	ベースラインからキャップラインまでの高さ。大文字の高さ
アセンダー/ディセンダー	小文字がxラインより上に伸びる部分(アセンダー。b・d・h・k・lなどの上に突き出た縦線)と、ベースラインより下に伸びる部分(ディセンダー。g・j・p・q・yなどの下に垂れた部分)

基準線や文字の高さの呼び方は、富士フイルムビジネスイノベーションの欧文書体の選び方でも図入りで解説されています。

xハイトが見た目の大きさを左右する

同じ文字サイズを指定しても、書体によって文字が大きく見えたり小さく見えたりするのは、主にxハイトの違いによるものです。

英文の多くは小文字でできているため、小文字の高さであるxハイトが高い書体ほど、同じサイズでも文字が大きく、読みやすく感じられます。

逆にxハイトが低い書体は、同じサイズでも小さく見え、上品でクラシックな印象になりやすい傾向があります。

Web制作をする人向けの補足として、Webページの見た目を指定する言語であるCSSにも、これらの高さを基準にした単位があります。exはxハイト、capはキャップハイトを1とする単位として定義されています(MDN「<length>」)。

欧文書体を見比べるときは、書体名だけでなく「小文字がどのくらいの高さに作られているか」にも注目してみましょう。

実践のポイント

欧文書体を実際に使うときの注意点と、よくある疑問をまとめます。

和文と組み合わせるときの基本

日本語のデザインでは、和文の中に英単語やサービス名が混ざることがよくあります。

このとき和文書体と欧文書体を組み合わせる場合は、まず両方のウェイト(文字の太さ)をそろえることが基本です(欧文書体の選び方(富士フイルムビジネスイノベーション))。

ウェイトとは、Regular(標準)・Medium(中太)・Bold(太字)のような、同じ書体の中での線の太さのバリエーションのことです。

たとえば日本語が標準の太さなら英字も標準、日本語が太字なら英字も太字に合わせると、英字だけが浮いて見えるのを防げます。

また、和文書体と欧文書体を何も調整せずに並べると、英字だけ小さく見えたり、下に沈んで見えたりすることがあります。

これは、和文書体が正方形の枠(仮想ボディ)いっぱいに文字を収めるように作られているのに対し、欧文書体はベースラインという見えない床の上に文字を乗せるように作られているためです。

英文の多くを占める小文字はxハイトまでの高さしかなく、gやpのように床より下へはみ出す文字もあるため、漢字やかなの横に並ぶと英字のほうが小さく、下寄りに見えやすくなります。

気になる場合は、英字のサイズを少しだけ大きくして調整します。

ちょうどよい値は書体の組み合わせによって変わるため、数%〜1割程度ずつ大きくしながら、実際に和文と並べて見比べて決めましょう。

雰囲気をそろえるなら、明朝体にはセリフ体、ゴシック体にはサンセリフ体を合わせると調和しやすくなります(明朝体とゴシック体の特徴は明朝体とゴシック体の違いとはで解説しています)。

注意点・よくある間違い

• 和文フォントに入っている英字を、ロゴや大きな見出しの英字にもそのまま使ってしまうことがあります。
  和文フォントの英字は、日本語の文章の中に並べたときになじむことを優先して、控えめな形に作られていることが多くあります。
  そのため、ロゴや見出しのように英字を主役として大きく見せると、迫力が足りなかったり野暮ったく見えたりと、物足りない印象になる場合があります。
  英字を主役にする場面では、欧文書体を選ぶことも検討しましょう。
• スクリプト体やブラックレターを本文や小さい文字に使ってしまい、読みにくくなることがあります。
  個性の強い分類は、ロゴや見出しなど短い言葉に限定して使いましょう。
• 欧文書体の名前や細かい分類を覚えることに時間をかけすぎて、実際に使ってみる段階に進めないことがあります。
  まずはセリフ体とサンセリフ体を1つずつ選び、実際に組んでみるところから始めましょう。

よくある質問

• Q. 欧文書体の分類は、全部覚える必要がある?
  A. 最初はセリフ体とサンセリフ体の2つを押さえれば十分です。
  スクリプト体やブラックレターなどは、「こういう分類もある」と知っておき、必要になったときに調べれば問題ありません。
• Q. 欧米で「ゴシック」というと、日本のゴシック体と同じ意味?
  A. 違う意味で使われることがあるので注意が必要です。
  日本でゴシック体と呼ぶ書体は欧文ではサンセリフ体にあたり、欧米で「ゴシック」と言った場合は、中世風の太く角ばったブラックレターを指すことがあります(富士フイルムビジネスイノベーション)。
  海外のフォント素材サイトで「Gothic」と検索すると、日本のゴシック体のような文字ではなく、装飾的なブラックレターが並んで驚くことがあります。
  一方で、Century GothicやFranklin Gothicのように、名前に「Gothic」が付いていてもサンセリフ体の書体もあるので、日本のゴシック体に近い欧文書体を探すときは「sans-serif」で探すのが確実です。
• Q. 欧文書体は、本文と見出しで何種類まで使っていい?
  A. 1つのデザインでは、欧文書体も1〜2種類に絞るのが基本です。
  和文書体と同じく、種類を増やすほどまとまりがなくなるため、見出しと本文の差はウェイトや文字サイズでつけるようにしましょう。

まとめ

欧文書体は、大きくセリフ体・サンセリフ体・スクリプト体・ブラックレター・等幅・ディスプレイ書体などに分類でき、本文や画面の文字に使われるのは主にセリフ体とサンセリフ体です。

欧文書体の文字はベースラインなどの基準線に沿ってデザインされており、特にxハイトの違いが、同じサイズでも文字の見た目の大きさや印象を左右します。

まずは身の回りのロゴや商品パッケージの英字を見て、セリフ体とサンセリフ体のどちらが使われているか、小文字の高さはどうかを観察してみてください。