iimon TECH BLOG

iimonエンジニアが得られた経験や知識を共有して世の中をイイモンにしていくためのブログです

エンジニア＆デザイナーのためのフォント入門

皆様ごきげんよう。タクシです。

最近、花粉症をこの世から消す方法と同じぐらい私はフォントについて調べています。

開いたWebサイトがどのフォントを使っているかをデベロッパーツールで確認するのが習慣です。1人でフォント当てクイズをしたりもします。（サイズとかウェイトとか当たるとなんか嬉しい）

当たり前ですがフォントってたくさんあるんです。漠然とフォントに想いを馳せていたら気になって寝不足気味になってきた気がするのでフォントの始まりから調べてみました。

フォントとは？

もともとフォントは「同じサイズ・同じスタイルの文字のセット」を指す言葉でした。活版印刷の時代には、たとえば「Garamond の 12pt・イタリック」がひとつの「フォント」で、「Garamond」という書体全体は「書体（タイプフェイス）」と呼ばれていました。（「Garamond」と打ってGoogleで検索してみてください笑）

ただ、デジタルの時代になってからはこの区別はあまりない気がします。今は「フォント ≒ 書体（タイプフェイス）」くらいの感覚で使われることが多いかもしれませんね。深堀りしても面白いのですが、この記事では、細かく区別せずに「フォント」でざっくり統一して話を進めていきます。

フォントの語源

そもそも「フォント/font」って不思議な響きの単語だな〜と思っていたのですが、鋳造・鋳鉄を意味するフランス語「fonte」が由来だと言われています。活版印刷のための鋳造プロセスそのものが文字の形式すなわちフォントを意味するようになったという感じでしょうか。

フォントの種類

フォントは大きく二つに分けられます。欧文フォントと和文フォントです。

欧文フォントでは「セリフ（Serif）体」と「サンセリフ（Sans-serif）体」が基本の分類です。セリフ体は文字の端にセリフと呼ばれる飾りがついたもので、Times New Roman が代表的な例として挙げられます。サンセリフ体はそのセリフがないスッキリしたデザインで、Helvetica や Arial がおなじみかと思います。sansはフランス語で「無い」という意味。ほかにも手書き風の「スクリプト体」や、文字幅が均一な「モノスペース体」などがあります。（モノスペース体はコードなどでよく使われるのでエンジニアの皆さんも馴染みがあると思います）

（学生時代提出する英文エッセイはTimes New Romanで書くようにという指定があったのを思い出しました。そのおかげで欧文フォントといえばTimes New Romanがすぐ思い浮かびます。）

和文フォントでは「明朝体」と「ゴシック体」が二大巨頭です。明朝体は「とめ・はね・はらい」が表現された伝統的な書体で、書籍の本文でよく見かけます。ゴシック体は線の太さが均一でシンプル、画面上での視認性が高いのでWebやアプリでは定番になっています。

ざっくり説明するとすれば、欧文のセリフ体 ↔ 和文の明朝体、欧文のサンセリフ体 ↔ 和文のゴシック体、という対応関係をイメージするとわかりやすいでしょうか。（厳密には違いますが、今回はあくまでざっくりと）。

ファイル形式の違い（TTF / OTF / WOFF / WOFF2）

Webサイトなどを作る際、指定のフォントを使用するためにファイルをダウンロードした経験がある方もいるでしょう。

フォントをダウンロードしたとき、.ttfやら.otfやら.woff2やら、拡張子がいろいろあって「結局どれを使えばいいの？」となったことはありませんか？ざっくり整理するとこのようになります。

TTF（TrueType Font） は Apple と Microsoft が共同開発した歴史ある形式です。広く普及していて、Office系ソフトとの相性が良いのが特徴です。

OTF（OpenType Font） は Adobe と Microsoft が開発した TTF の拡張版です。収録できる文字数が多く、Windows・Mac 間の互換性もあるので、デザイン実務（Illustrator / Figma など）ではこちらが主流になっています。

WOFF / WOFF2 は Web 専用のフォント形式です。中身は TTF や OTF を圧縮したもので、ファイルサイズが軽いためWebフォントとして配信するのに最適です。WOFF2 は WOFF よりさらに圧縮率が高く、主要ブラウザもすべて対応済みです。今から Web フォントを導入するなら WOFF2 一択で問題ありません。

実務的な使い分けとしては、デスクトップで使うなら OTF か TTF、Web で配信するなら WOFF2、と覚えておけばOKです。

日本語フォント事情

日本語フォントの世界は、欧文フォントとは事情がかなり異なります。一番大きな理由はそう、文字数の多さです。英語はアルファベット26文字＋記号で済みますが、日本語はひらがな・カタカナ・漢字を合わせると数千〜数万文字が必要になります。そのためフォントの制作コストが桁違いに高く、無料で高品質な日本語フォントはそれなりに限られてきます。

定番の日本語フォントをいくつか紹介します。

ヒラギノ角ゴ / ヒラギノ明朝 — macOS や iOS に標準搭載されていて、Apple ユーザーにはおなじみです。美しさと可読性のバランスが良く、紙でもスクリーンでも安定して使える優等生です。

ヒラギノ角ゴ Pro.　ｉｉｍｏｎホームページ。

游ゴシック / 游明朝 — Windows と macOS の両方に搭載されている貴重な存在です。上品でクセのないデザインで、クロスプラットフォームのWebサイトで font-family に指定されることも多いです。

Noto Sans JP / Noto Serif JP — Google と Adobe が共同開発したオープンソースフォントです。「No Tofu（豆腐なし＝文字化けなし）」がコンセプトで、ウェイトも豊富です。Google Fonts で無料配信されているので、Webフォントとしての導入ハードルが低いのが最大の強みです。

（Tofuというのは、フォントが対応できない場合に表示される四角形の記号のことです。）

https://fonts.google.com/knowledge/glossary/tofu

個人的にはどれもよく使っていて、見た目も気に入っています。あえて選ぶなら、Web では Noto Sans JP の安心感、デザインカンプでは游ゴシックの上品さ、macOS ネイティブアプリならヒラギノ、という感じで思っていましたが、最近はNoto Sans JPを選ぶことがほとんどになりました。

英語フォント事情

欧文フォントは日本語フォントと比べて文字数が圧倒的に少ないため、選択肢が膨大にあります。Google Fonts だけでも数千種類以上です。その中から定番どころをいくつか紹介します。

Helvetica — サンセリフ体の王様です。1957年にスイスで生まれて以来、企業ロゴからUIまであらゆる場面で使われ続けています。macOS には標準搭載されていますが Windows には入っていないので、Web では代わりに Arial が指定されることも多いです（Arial は Helvetica の代替として普及しました）。

Inter — UI デザインのために作られたオープンソースのサンセリフ体です。小さいサイズでの可読性に優れていて、Figma のデフォルトフォントとしても有名です。SF Pro は Apple が自社プラットフォーム向けに開発したフォントで、iOS / macOS アプリを作るなら避けて通れない存在です。

Roboto — Google が Android 向けに開発したサンセリフ体で、Material Design の標準フォントです。幾何学的でありながら自然なカーブも持っていて、スクリーン上での読みやすさが抜群です。Google Fonts で無料配信されています。

そして使い勝手などは無視して、個人的に好きなのは Micro 5 です。というかMicro 5のような遊び心あるフォントはなんだか子供心がくすぐられる気がします。

Google Fonts で配信されているピクセル系のディスプレイフォントで、もともとはニット（編み物）のチャート用にデザインされたというユニークな出自を持っています。本文向きではありませんが、アクセントやデコレーションとして使うとレトロでかわいい雰囲気が出せます。こういう"遊び"のフォントがあると、デザインの幅も広がりますよね〜

カーニングと CSS

カーニングとは、隣り合う文字同士の間隔を個別に調整することです。似た言葉でトラッキング（文章全体の文字間隔を一律に調整）がありますが、カーニングは一文字単位の調整という違いがあります。

欧文フォントはもともと文字ごとに幅が違う（プロポーショナルフォント）ので、フォント自体にカーニング情報が埋め込まれていることが多いです。一方、日本語フォントはすべての文字が正方形のマスに収まる等幅設計が基本です。そのため句読点やカッコのまわりに不自然なアキが生まれやすくなっています。

CSS でこれを解決するのが font-feature-settings プロパティです。OpenType フォントが持つ文字詰め情報（プロポーショナルメトリクス）を有効にできます。

/* 日本語の自動カーニング（一番よく使うパターン） */
body {
  font-feature-settings: "palt";
  letter-spacing: 0.02em; /* 詰まりすぎ防止 */
}

"palt" は漢字・かな・約物（句読点やカッコ）すべてを詰めてくれます。ただし詰まりすぎると本文が読みにくくなるので、letter-spacing で少し余白を戻すのがコツです。見出しなど大きい文字にはしっかり詰める、本文は控えめに、という使い分けがおすすめです。

注意点として、font-feature-settings: "palt" はすべてのフォントで効くわけではありません。ヒラギノ・游ゴシック・Noto Sans JP などの OpenType 対応フォントなら動作しますが、メイリオや MS P ゴシックでは効きません。

OS・ブラウザによるフォントの違い

Web でフォントを扱うとき、一番やっかいなのが「OS やブラウザによって見え方が違う」問題です。Mac と Windows では標準搭載フォントが違うため、font-family を1つだけ指定すると、片方の環境ではフォールバック（代替フォント）で表示されてしまいます。

ざっくりした OS ごとの標準フォント事情はこのようになっています：

  • macOS / iOS — ヒラギノ角ゴ・ヒラギノ明朝が搭載。きれいですが Windows には入っていません
  • Windows — メイリオ・游ゴシック・BIZ UD ゴシックなどが搭載。游ゴシックは MacとWindowsに入っています。（Windowsでは游ゴシックが薄くかすれる問題などがよくありましたね。。現在はだいぶ改善されている様子ですがまだ完全ではなさそう。）
  • Android — Noto Sans CJK JP がベース。明朝体系は基本的に入っていません

そのためシステムフォント（デバイスフォント）に頼る場合は、font-family にフォールバックを複数指定するのが基本になります。

font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;

こういった OS 差を気にしたくない場合は、Google Fonts の Noto Sans JP などの Web フォントを使うのが現実的な解決策です。サーバーからフォントデータを配信するので、どの環境でも同じ見た目を担保できます。パフォーマンスが気になる場合は font-display: swap や preload で最適化しましょう。

フォントって作れるの？

ここまで読んで「自分だけのフォントを作れるのかな」と気になりませんか？それはズバリ、できます！ただし、日本語フォントをゼロから作るのは相当な覚悟が必要です。英語は26文字×大文字小文字で済みますが、日本語はひらがな・カタカナ・漢字を合わせると数千〜1万文字以上になります。記号も含めるともっとですね。プロのフォントメーカー（モリサワなど）は、要件にもよるようですが、チーム体制で数ヶ月〜数年かけて1書体を仕上げているようです。

とはいえ、「まずは触ってみたい」という方には無料ツールがいくつかあります：

  • Calligraphr — 手書き文字をスキャン→アップロードするだけでフォント化できるWebサービスです。英数字やひらがなだけなら手軽に作れます
  • FontForge — 無料のオープンソースフォントエディタです。本格的にグリフ（字形）を設計したい方にはこちらがおすすめです。Windows / Mac / Linux 対応

私はペンタブで書いた文字をサイトに使ったことはありますが、こういったサービスやシステムで作ったことはまだないです。面白そう！ 英語フォントだけならサクッと形にできそうですし、ひらがな＋カタカナだけのオリジナル手書きフォント作成も楽しそうです。

まとめ

フォントはとても深いですね、、

色々調べれば調べるほど、プロのデザイナーやメーカーの方々はすごいなと思うばかりです。

複雑な漢字などの文字が綺麗にディスプレイに映って読めているのすらも多くの人の努力のもとに成り立っているのですよね〜、、すごい！

フォントはデザインの可能性を広げるものでもありますが、それ以前に情報を伝えるための基本的かつ重要な要素です。当たり前ですが、見た目の可愛さなどだけではなく、ユーザー環境に依存せずに読みやすいフォントを選び適切に設定することは良いユーザー体験を提供するためには必要不可欠ですね。

参考リソース

基礎知識・分類

ファイル形式

フォント配布・紹介

CSS・実装

フォント作成ツール