フォントの「セリフ体」とかを今さらちゃんと知ってみた話

「セリフ体」や「サンセリフ体」って、よく目にするけど「なんとなくわかったフリ」で流してきたんですよね。 デザインの話になると必ず出てくるけど、実際ちゃんと理解したことがないまま、ずっと曖昧なままでした。 同じようにスルーしてきた人、結構いるんじゃないでしょうか。

そこで今回、フォントの基本を歴史から丁寧に調べてみました。 セリフ体が生まれた背景や、サンセリフ体が広まった理由を知ると、文字の選び方に根拠が生まれ、これまでのモヤモヤが少しずつ晴れてきました。

実際にサンプルの文章でフォントを比較しながら見ていくことで、「読みやすさ」や「印象」がどう変わるかを具体的に発見できました。 フォントを選ぶときの基礎がしっかりしてきて、ようやくデザインの土台が整った感じです。

フォントの種類の比較一覧

ここでは、セリフ体(明朝系)以外にどのようなフォントの分類があり、 それぞれがどんな特徴を持ち、どういった場面で使われるかをまとめています。

フォントの種類 特徴・印象 用途・事例 代表的な無料Webフォント
サンセリフ体(ゴシック系) ・文字の端に飾りがない
・モダン、シンプル、クリーンで読みやすい
企業サイト、ブログ、ECサイト、UIデザインなど幅広い場面で利用 Noto Sans, Open Sans,
Montserrat, Lato, Poppins など
手書き風(Handwriting) ・人が手書きしたような線の揺らぎ
・温かみ、カジュアル感、親しみやすさ
カフェのメニュー、ポスター、
ブログタイトル、短い見出しなど
Dancing Script, Walter Turncoat,
Sawarabi Mincho(日本語)
筆記体(スクリプト系) ・流れるような筆記体
・華やか、ロマンチック、エレガント
ウェディング関連、イベント招待状、
特別な見出し、ブランドロゴ
Great Vibes, Alex Brush,
Lobster(やや装飾的)
ディスプレイ体(装飾系) ・個性的で目立つデザイン
・独自性・遊び心・派手な印象
イベントポスター、
ランディングページのタイトル、広告
Lobster, Pacifico,
Rampart One(日本語対応)
モノスペース(等幅) ・すべての文字が同じ幅
・技術的で整然とした印象
コード表示、技術文書、
テーブル表示、タイプライター風
Source Code Pro,
Inconsolata, JetBrains Mono

用途別に選ぶ時のポイント

用途・シーン おすすめフォント
長文を読みやすくしたい サンセリフ体 (Noto Sans など)、Merriweather(読みやすいセリフ体)
シンプル・信頼性が重要
(企業サイトなど)
Noto Sans JP、Open Sans
高級感・伝統的な雰囲気 Noto Serif、Merriweather(セリフ体)
楽しさ・カジュアル感 手書き風 / ディスプレイ系(Lobster、Pacifico など)
コード表示・技術系 モノスペース(Source Code Pro、Inconsolata など)

無料Webフォント導入方法(Google Fontsの例)

たとえば「Noto Sans JP」を使いたい場合、 Google Fonts で該当フォントを選び、 下記のようなコードを貼るだけでOKです。

??rel="stylesheet"
??href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap"
/>

その後、CSSで以下のようにフォントを指定します:

body {
??font-family: 'Noto Sans JP', sans-serif;
}

※ フォントをたくさん読み込みすぎるとパフォーマンスに影響します。
※ 必要なものだけを選んで導入し、ライセンスを確認して商用利用の可否など問題がないかチェックしましょう。

Webフォント表示サンプル

Noto Sans JP(サンセリフ・日本語)

これは「Noto Sans JP」を適用したダミー文章です。
サンセリフ(ゴシック)系で画面上の可読性が高く、
企業サイトやブログなど幅広く使われています。

font-family: 'Noto Sans JP', sans-serif;

Open Sans(サンセリフ・欧文向け)

This is dummy text using Open Sans.
It is known for its clean, modern appearance and high legibility on screens.
Perfect for blogs, corporate websites, or any content-heavy site.

font-family: 'Open Sans', sans-serif;

Montserrat(サンセリフ・幾何学系)

これは「Montserrat」を適用したテキストです。
幾何学的なデザインでモダンな印象を与えます。
タイトルや見出しに使うと、より洗練された雰囲気になります。

font-family: 'Montserrat', sans-serif;

Dancing Script(筆記体・手書き風)

こちらは「Dancing Script」を使ったダミー文章です。
文字が躍るように柔らかく連なって、
華やかな雰囲気を演出します。タイトルやロゴなど短いテキスト向きです。

font-family: 'Dancing Script', cursive;

Merriweather(セリフ体・欧文)

This paragraph is displayed with Merriweather.
A serif typeface designed to be readable on screens.
It provides a traditional yet modern look, perfect for articles or long-form text.

font-family: 'Merriweather', serif;

Source Code Pro(等幅)

これは「Source Code Pro」を適用しています。
すべての文字幅が等しい(モノスペース)フォントなので、
プログラミングのコード表示や整列したレイアウトに向いています。

font-family: 'Source Code Pro', monospace;

古代の文字とフォントの起源

文字の歴史は約5000年前に始まり、古代メソポタミアの楔形文字やエジプトのヒエログリフ(象形文字)がその起源とされています。これらは粘土板や石碑に刻まれた視覚的な記号で、人類最初期の文章表現でした。古代ローマではラテン文字の大文字(ローマン・キャピタル、ローマン・スクエアキャピタル)が石に彫られ、公的な碑文に用いられました。紀元113年頃に建てられたトラヤヌス帝の記念柱の碑文は美しいローマンキャピタルの例であり、現代でもこの碑文を元にした「Trajan(トレイジャン)」という書体がデザインされ、映画『タイタニック』や『ハムナプトラ(The Mummy)』のタイトルロゴなどに使われています。アルファベットは当初大文字のみでしたが、中世以降に小文字が追加されて現在の形となりました。

中世から近代にかけての書体の発展

中世ヨーロッパでは、本は修道士たちによる手書き写本で作られており、装飾的な筆致で文字が描かれていました。しかし15世紀半ば、ドイツのヨハネス・グーテンベルクが金属活字による活版印刷技術を発明し、書物の大量生産が可能になります。最初期の印刷物でグーテンベルクが採用した書体は、当時の手書き文字の風合いを残したブラックレター(黒体、ゴシック体)でした。ブラックレターは文字幅が狭く縦に密集する書体で、高価な紙面を節約する目的に適っていました。実際、グーテンベルク聖書の紙面を見ると文字がぎっしりと二段組で詰められ、文頭には彩色された装飾頭文字も施されています。

ブラックレター体は中世的な雰囲気を持ちますが、細かい筆記体に由来するため小さいサイズでは判読性に難があり、文字同士が潰れやすいという欠点がありました。そのため15世紀後半から16世紀にかけて、より明快で読みやすいセリフ体(ローマン体)が登場します。セリフ体とは文字の端に「ひげ飾り(セリフ)」を持つ書体で、古典古代の碑文に倣ってデザインされました。例えば1470年頃に生まれたCentaur(セントール)やJenson(ジェンソン)は初期ルネサンス期の代表的なセリフ体です。16世紀にはフランスの印刷工クロード・ガラモン(ギャラモン)が美しいセリフ書体Garamond(ガラモン)を制作し、ヨーロッパ中で広く用いられてフランス王室の御用書体にもなりました。その後18世紀~19世紀にかけて、セリフ体はさらに多様なスタイルへと発展します。

18世紀末から19世紀初頭には産業革命の影響で印刷物の需要が急増し、より大胆で視認性の高い書体が求められます。イタリアのBodoni(ボド二)やフランスのDidot(ディド)に代表されるモダン・セリフ体(ディド体)は、太い垂直線と極細の水平線という強いコントラストを特徴とし、印刷物に強いインパクトを与えました。このスタイルはファッション誌『VOGUE』のタイトルロゴなどにも採用されるなど、洗練された印象を与えます。また19世紀中頃には字画が太く四角いスラブセリフ(クラレンドンなど)も登場し、見出しやポスターに利用されました。

さらに19世紀、広告や看板のニーズからサンセリフ体(ゴシック体)の書体が新しく生み出されます。1816年、イギリスのウィリアム・キャズロン4世によって世界初のサンセリフ活字「2ライン・イングリッシュ・エジプシャン」が発表されました。当時は斬新さゆえに「グロテスク(新奇なもの)」とも呼ばれました。サンセリフ体は文字の先端に飾りを持たないシンプルな書体で、縦線と横線の太さがほぼ均一なため遠目にもはっきり読み取れます。登場当初こそ保守的な市場には受け入れられませんでしたが、簡潔でモダンな印象から次第に見出しや標識など様々な場面で活躍するようになりました。日本でも明治後期(20世紀初頭)に欧文のサンセリフ体にならったゴシック体が登場し、手書きの太文字として看板等に用いられ始めました。

20世紀のタイポグラフィ革命

20世紀に入ると「デザイナー」という職業が台頭し、印刷物のレイアウトやタイポグラフィも洗練されていきます。特に映画のポスターやタイトルデザインでは文字の占める割合が増え、書体デザインの重要性が飛躍的に高まりました。第一次世界大戦後のドイツでは、バウハウスに代表されるモダニズムデザイン運動の影響で、幾何学的な書体デザインが数多く生み出されます。1920年代後半にはヨーロッパでサンセリフ体が主流となり、1927年にはドイツでパウル・レンナーによるFutura(フutura)、ルドルフ・コッホによるKabel(カーベル)といった幾何学サンセリフ書体が発表されました。Futuraは直線と円弧を基調とした未来的デザインで、その名も「未来」を語源としています。

1950年代にはスイスで「スイス・スタイル」と呼ばれるタイポグラフィ潮流が興り、これに伴い1957年にHelvetica(ヘルベチカ)が誕生しました。ヘルベチカはクセのない均整なサンセリフ体で汎用性が非常に高く、世界で最も使用されている書体とも言われます。その普遍的で中立的なデザインから、多くの企業ロゴや公共サイン、出版物で採用され「定番」の地位を築きました。一方、セリフ体では1932年に英『タイムズ』紙のために開発されたTimes New Roman(タイムズ・ニューローマン)が有名で、可読性の高さから後にパソコンの基本フォントにも収録されるなど広く普及しました。

1980年代以降、コンピュータとデスクトップ出版(DTP)の普及によりタイポグラフィは新たな革命を迎えます。1984年、Adobe社がPostScript技術の一環としてType1フォント仕様を発表し、アウトライン(ベクトル)フォントによる拡大縮小自在なデジタル書体が実用化されました。1985年にApple社のLaserWriterプリンターがPostScriptを搭載すると、この技術は急速に広まりDTPの基盤となります。さらに1990年代初頭にはApple社がそれまでのAdobeへのライセンス料を回避する目的でTrueTypeフォント技術を開発し、Microsoft社と提携して各OSに搭載しました。TrueTypeは高度なヒンティング(画面上での可読性向上のための微調整)機能を持ち、AppleのMac OS(System7)で1991年に、MicrosoftのWindows 3.1で1992年に正式採用されます。こうしたデジタルフォント技術の進歩によってパソコン上で膨大な書体が扱えるようになり、書体デザインの幅も飛躍的に拡大しました。例えばデジタル環境だからこそ可能になった流麗なスクリプト体(筆記体風フォント)や、1つのフォント内で太さや幅を連続的に変化できるバリアブルフォント(可変フォント)なども登場しています。

現代のフォントとデザインの関係

インターネット時代の到来により、フォントは紙媒体だけでなくデジタル画面上での表示にも重要な役割を担うようになりました。従来、Webページで使われるフォントは閲覧端末にインストールされたものに依存していましたが、1990年代後半にCSS2で@font-face規則が導入され、サーバーからフォントデータをダウンロードして表示するWebフォントの仕組みが提案されました。当初はInternet Explorer 4でのみ動作するMicrosoft独自形式のEOT(Embedded OpenType)フォントに限定されていたため普及しませんでしたが、2000年代に入りFirefox・Safari・Chromeなど主要ブラウザがTrueTypeやOpenTypeなど一般的フォント形式での@font-faceに対応すると、一気に実用化が進みました。欧米を中心にWebフォント利用が拡大し、2009年にTypekit(後のAdobe Fonts)、2010年にGoogle Web Fonts(現Google Fonts)といったWebフォント提供サービスが登場すると、ウェブデザインにおける書体選択の幅は飛躍的に広がりました。現在では数百種類以上のフォントがブラウザ上で自由に利用でき、ブランドサイトやブログでも印象に合わせた字体を表現できます。

広告デザインや企業ロゴにおいてもフォントはブランドイメージを左右する重要な要素です。多くの有名企業のロゴは、一から文字を描き起こすのではなく、古くから存在する定番フォントをベースにして字形の太さや間隔を調整してデザインされています。長年使われてきた書体には人々にとっての馴染みがあり、信頼感や普遍性といったイメージを自然に伝える力があります。例えばHelveticaはシンプルで洗練された印象からトヨタ、パナソニックなど数多くの企業ロゴに採用されています。一方、ファッションブランドのロゴにはモダンでエレガントなDidot体が使われる傾向があります。このように業種やブランドの性格に合わせて適切なフォントを選ぶことで、文字そのものが持つ雰囲気で消費者にメッセージを伝えることができます。

映画のタイトルデザインでもフォント選びは作品のジャンルや雰囲気を視覚的に表現する鍵となっています。例えばコメディ映画では太めのサンセリフ体を使い、白地に赤など派手な色でタイトルを配置するのが定番です。実際、ArialやHelvetica、Gotham、Futuraといったフォントで大きくタイトルを描き、明るい赤色にすることで観客に軽快さやユーモアを直感的に伝えています。ホラー映画では逆に鋭い印象の細身セリフ体(ローマン体)が好まれ、中でも映画業界で重用されるのが古代ローマ碑文に由来するTrajanという書体です。Trajanなどのセリフ体を血のような赤や不気味な質感で描くことで、不穏さや恐怖感を瞬時に醸成します。SF映画では未来的なサンセリフ体に青白い発光エフェクトを組み合わせたタイトルがよく見られます。コンピュータで描いたような鋭角で精巧な文字にネオンや金属的な光沢を付与し、テクノロジー感を演出する手法です。アクション映画では直線的で角ばったサンセリフ体(例:EurostileやBank Gothic)が用いられ、文字に金属・石・炎など荒々しい質感を乗せて力強さを表現するのが一般的です。

漫画やアニメの分野でもフォントデザインの工夫が随所に見られます。日本の漫画では吹き出しの台詞に独特の書体が使われることが多く、昔からアンチック体(アンチゴチ)と呼ばれる書体が定番です。アンチック体とは漢字部分に角ゴシック体、平仮名・片仮名部分に崩し明朝風の仮名を組み合わせた書体で、この書体を使うだけで「雑誌に載っているプロの漫画らしさ」が一気に高まるとも言われます。強調したい叫び声の台詞には極太のゴシック体、心の声や小声の台詞には細い丸ゴシック体を使うといった具合に、シーンのニュアンスに応じてフォントを使い分ける工夫も一般的です。アニメ作品のタイトルロゴでも、作品世界を体現するようなオリジナル書体のデザインがなされます。可愛らしい作品には丸みを帯びたポップ体、ダークな作品には鋭角的な書体や毛筆風の書体など、タイトルのフォントを見るだけで内容の雰囲気を感じ取れることも多いでしょう。実際、プロの現場で使用されたフォント事例をまとめた資料も公開されており、近年放送のアニメや人気ゲームでどのようなフォントが使われているかが紹介されています。こうした例からも分かるように、現代のデザインにおいてフォントと表現内容は切り離せない関係となっており、文字の形そのものがデザインの一部として読者・視聴者の感情に訴えかけているのです。

戻る