フォントは雄弁なデータ構造である

はじめに：その文字は、どんな「顔」をしていますか？

私たちが日常的にPCやスマートフォンで目にする文字。Webサイトの文章、SNSのタイムライン、プレゼンテーションのスライドなど、あらゆる場面で「フォント」が使われています。

しかし、「このフォント、好きだな」と感じることはあっても、そのフォントがどのような情報で成り立っているのかを意識する機会は少ないかもしれません。

ところで、「フォント」と似た言葉に「書体（しょたい）」や「Typeface（タイプフェイス）」があります。これらは同じものを指しているのでしょうか？厳密には、少し意味が異なります。

• Typeface（書体）: 「Helvetica」や「ヒラギノ角ゴ」といった、統一されたデザインの文字のスタイルのことを指します。いわば、文字の「デザインの概念」そのものです。
• フォント: そのTypefaceに、太さ（Weight）、サイズ（Size）、文字幅（Stretch） といった具体的な属性情報を組み合わせ、PCなどで実際に利用できるようにしたデータファイルのことを指します。

例えるなら、Typefaceが「歌」そのもので、フォントは「その歌を特定の歌手が歌って収録したCD」のような関係です。

とはいえ、現在ではこの2つの言葉はほぼ同じ意味で使われることが多くなっています。この記事でも、以降は「フォント」という言葉を主に使っていきます。

この記事では、そんな身近でありながら奥深い「フォント」の世界を、データ構造という観点から探求していきます。CSSで何気なく指定しているfont-weightの数値の意味から、フォントファイルそのものの中身まで、一つずつ紐解いていきましょう。

第1章: フォントを彩る「属性」たち

フォントは、単に文字の形を持っているだけではありません。同じデザインのフォントでも、様々な「属性」を組み合わせることで、多彩な表現が可能になります。Web開発でCSSを触ったことがある方なら、以下のようなプロパティに見覚えがあるでしょう。

• font-family: どのフォントファミリー（書体デザイン）を使うか
• font-size: 文字の大きさ
• font-style: 文字のスタイル（例: italic 斜体）
• font-weight: 文字の太さ
• font-stretch: 文字の幅

ここでは、特にフォントの印象を大きく左右する「太さ（Weight）」と「幅（Stretch）」について掘り下げてみましょう。

文字の太さ：font-weightはなぜ100刻みの数値なのか？

CSSで文字を太字にしたいとき、多くの場合はfont-weight: bold;と記述します。しかし、font-weight: 700;のように数値で指定することもできます。この100から900までの数値は、一体何を意味しているのでしょうか？

これは、活版印刷の時代から続く書体の太さの段階（ウェイト）を、Webで体系的に扱えるように標準化したものです。各数値は、以下のような伝統的なウェイト名に対応しています。

数値	一般的なウェイト名
100	Thin (Hairline) - 極細
200	Extra Light (Ultra Light) - かなり細い
300	Light - 細い
400	Normal (Regular) - 標準
500	Medium - やや太い
600	Semi Bold (Demi Bold) - 中太
700	Bold - 太字
800	Extra Bold (Ultra Bold) - かなり太い
900	Black (Heavy) - 極太

font-weight: normal;は400、font-weight: bold;は700に相当します。そして、質問にあった「Blackというweight」は、表の通り900に該当する実在するウェイトです。最も太い、力強い印象を与えたい場合に使われます。

重要な注意点として、これらのウェイトをすべて利用できるかどうかは、フォントファミリー自体が各ウェイトのデータを持っているかによります。例えば、あるフォントが「Regular(400)」と「Bold(700)」の2種類しかデータを持っていない場合、font-weight: 300;と指定しても、ブラウザは最も近いウェイトである「Regular(400)」で代用して表示します。101のような中間の数値も同様に、最も近いウェイトに丸められます。

（※近年登場した「バリアブルフォント」という新しい技術では、この中間の値でも滑らかに太さを表現できますが、これはまた別の機会にお話しします。）

文字の幅：font-stretchで表現の幅を広げる

font-stretchは、その名の通り、文字の幅（字幅）を選択するためのプロパティです。これもfont-weightと同様に、フォントファミリーが対応する字幅のデータを持っている必要があります。

値は、キーワードで指定するのが一般的です。

キーワード	説明
ultra-condensed	最も狭い
extra-condensed	かなり狭い
condensed	狭い
semi-condensed	やや狭い
normal	標準
semi-expanded	やや広い
expanded	広い
extra-expanded	かなり広い
ultra-expanded	最も広い

font-weightとfont-stretchを組み合わせることで、同じフォントファミリーでも「細くて幅の狭い文字」から「極太で幅の広い文字」まで、表現の幅を大きく広げることができるのです。

第2章: フォントファイルの中を覗いてみよう

私たちが普段「フォント」として認識している.ttfや.otfといったファイル。その中には、一体どのような情報が、どのような構造で保存されているのでしょうか。この章では、フォントファイルの代表的な形式である「TrueType」と「OpenType」の違いに触れながら、その内部構造を解き明かしていきます。

TrueTypeとOpenType：何が違うのか？

TrueTypeとOpenTypeは、どちらもフォントのアウトライン（輪郭）情報を保存するための代表的なフォーマットです。一言でいうと、OpenTypeはTrueTypeの進化版と考えることができます。

特徴	TrueType (TTF)	OpenType (OTF)
開発	AppleとMicrosoftが共同開発	MicrosoftとAdobeが共同開発
アウトライン	2次ベジェ曲線	2次ベジェ曲線 または 3次ベジェ曲線
収録文字数	比較的少ない	最大約65,000字。多言語対応に強い
高度な組版機能	限定的	合字、異体字、カーニングなど、豊富な機能を持つ
互換性	-	Windows/Mac間で高い互換性を持つ

TrueTypeは古くから使われている基本的な形式ですが、OpenTypeはより多くの文字を収録でき、より滑らかな曲線（3次ベジェ曲線）を扱え、そして「合字（ごうじ）」※のようなデザイン性を高めるための高度な組版機能が豊富に用意されています。現在ではOpenTypeが主流のフォーマットとなっています。

※ 合字（リガチャ）: fとiを並べたときに、iの点がfの上の部分とぶつからないように、2つの文字を連結させて一つの文字のようにデザインすること。

フォントファイルは「テーブル」の集合体

フォントファイルは、単に文字の形のデータが並んでいるわけではありません。実際には、様々な情報が「テーブル」と呼ばれるデータブロックに整理されて格納されています。そして、ファイルの先頭には、どのテーブルがどこにあるかを示す「テーブルディレクトリ」という案内図が置かれています。

フォントファイルは、さながら文字のための高機能なデータベースと言えるでしょう。以下に、その主要なテーブルの一部をご紹介します。

• cmap (Character to Glyph Mapping)
  • PCが認識する文字コード（例: UnicodeのU+0041）を、フォント内に保存されている特定の文字図形（グリフ）の「A」に対応付けるための、非常に重要なマッピングテーブルです。
• glyf (Glyph Data)
  • 文字のアウトライン（輪郭）データそのものが格納されています。TrueTypeでは2次ベジェ曲線で、OpenTypeでは2次または3次ベジェ曲線で定義されます。（曲線の違いは次の章で解説します）
• hmtx (Horizontal Metrics)
  • 各文字の幅や、文字の左端から実際の描画が始まるまでの空白（サイドベアリング）といった、文字を水平に美しく並べるための情報です。
• kern (Kerning)
  • 特定の文字の組み合わせ、例えば「A」と「V」を並べたときに、その間隔を自動的に詰めて見た目を調整するためのカーニングペア情報です。
• name (Naming)
  • フォント名（例: "Times New Roman"）、スタイル（例: "Bold"）、著作権情報などが、英語、日本語、フランス語といった多言語で記録されています。

このように、フォントファイルには、単なる文字の形だけでなく、それを美しく、正しく表示するための膨大な情報が、機能ごとにテーブルとして整理され、格納されているのです。

第3章: 文字の形はどうやって作られる？ アウトラインと相似形の謎

前の章で、フォントファイルには文字の輪郭を定義する「アウトラインデータ」が格納されていると説明しました。このアウトラインは、点とそれを結ぶ「ベジェ曲線」という数式によって描かれています。この章では、そのベジェ曲線と、フォントサイズによる見た目の変化について探っていきます。

TrueTypeが使う「2次」と、より滑らかな「3次」ベジェ曲線

フォントのアウトラインデータで使われるベジェ曲線には、主に「2次」と「3次」の2種類があります。この違いが、TrueTypeとOpenType（PostScriptベース）の品質の違いにも繋がっています。

違いは非常にシンプルで、曲線を作るためにいくつの「制御点」を使うかにあります。

• 2次ベジェ曲線 (TrueTypeで採用)

  • 始点と終点の間に、1つの制御点を持ちます。
  • イメージとしては、始点と終点から伸びる2本のゴム紐を、1つの点でぐいっと引っ張ってできる曲線です。比較的単純なカーブを描くのに適しています。

• 3次ベジェ曲線 (OpenType/PostScriptで採用)

  • 始点と終点の間に、2つの制御点を持ちます。
  • こちらは、2つの点でそれぞれゴム紐を引っ張るイメージです。これにより、S字カーブのような、途中で曲がる方向が変わるような複雑で滑らかな曲線も、1つの数式で表現できます。Adobe Illustratorなどのデザインツールで使われているのも、この3次ベジェ曲線です。

制御点が多い分、3次ベジェ曲線の方がデザイナーの意図をより忠実に、そして高品質に表現する能力が高いと言えます。

フォントサイズを変えると、文字は完全な「相似形」になるのか？

デジタルフォントは、文字の輪郭を数式で記録した「ベクター形式」です。そのため、写真（ビットマップ形式）のように拡大してギザギザになることはなく、理論上は、どれだけ拡大・縮小しても字形は崩れず、数学的には完全な相似形を保ちます。

しかし、現実には「必ずしもそうとは言えない」のが面白いところです。なぜなら、フォントには、あらゆるサイズで美しく、そして読みやすく表示されるための「工夫」が凝らされている場合があるからです。

例外1：ヒンティング (Hinting)

PCのディスプレイなど、比較的解像度が低い画面で小さな文字を表示すると、計算上は正しくても、ピクセルのマス目にうまく収まらず、線がかすれたり太さがバラバラに見えたりすることがあります。

これを防ぐのが「ヒンティング」という技術です。これは、フォントデータに含まれる「このサイズの時は、この線をピクセルの境界線に揃える」といった微調整の指示のこと。この指示によってアウトラインがわずかに変形し、厳密な相似形ではなくなりますが、結果として小さな文字でも格段に読みやすくなります。

例外2：オプティカルサイズ (Optical Sizing)

優れたフォントの中には、使用するサイズに応じて、あらかじめ複数のデザインが用意されているものがあります。これを「オプティカルサイズ」と呼びます。

• 見出し用 (Display): 大きなサイズで使われる前提で、線の強弱がはっきりした繊細なデザイン。
• 本文用 (Text): 小さなサイズでも文字が潰れないよう、少し太めでスッキリしたデザイン。

このようなフォントでは、サイズを変更すると、単純な拡大・縮小ではなく、そのサイズに最適化された別のデザインの文字に切り替わります。これもまた、意図的に相似形を崩すことで、あらゆる状況での美しさと可読性を追求した結果なのです。

フォントは基本的には相似形で拡大・縮小されますが、最高の品質を届けるために、状況に応じて自ら姿を微調整する、非常にインテリジェントなデータ構造を持っていると言えるでしょう。

第4章: フォントはどこにある？ OSとWebのフォント事情

これまでフォントのデータ構造について見てきましたが、そもそもこれらのフォントは、私たちのデバイスのどこに存在し、どのように利用されているのでしょうか。この章では、OSに内蔵されているフォントと、Webサイトで使われるフォントの仕組みについて解説します。

OSに標準で内蔵されているフォント (デバイスフォント)

私たちがPCやスマホを購入したとき、OSにはあらかじめいくつかのフォントがインストールされています。これらは「システムフォント」や「デバイスフォント」と呼ばれ、特別な設定をしなくてもOS全体で利用できます。モバイルアプリは、基本的にこれらのフォントを使って文字を表示します。

主要なOSの標準フォント（日本語環境）は以下の通りです。

• iOS / macOS

  • 和文: ヒラギノ角ゴシック (Hiragino Kaku Gothic Sans)
  • 欧文: San Francisco (SF)
  • Apple製品では、この「ヒラギノ」と「San Francisco」の組み合わせが、美しく読みやすいUIを実現しています。

• Android

  • 和文: Noto Sans CJK JP
  • 欧文: Roboto
  • Googleが開発した「Noto」は、あらゆる言語をカバーすることを目標としたフォントファミリーで、Androidでは標準の日本語フォントとして採用されています。

• Windows

  • 和文: 游ゴシック (Yu Gothic) / 游明朝 (Yu Mincho)、メイリオ (Meiryo) など
  • 欧文: Segoe UI
  • Windowsはバージョンによって標準フォントが異なりますが、近年は「游書体」ファミリーが中心となっています。

Webサイトが表示されるとき、フォントはどこから来るのか？

では、Webサイトをブラウザで見ているときはどうでしょうか。ここで登場するのが「Webフォント」という仕組みです。

1. かつての仕組み：デバイスフォントに依存

昔のWebサイトでは、閲覧しているユーザーのPCにインストールされているデバイスフォントを使って文字を表示するのが一般的でした。CSSで「ヒラギノ角ゴシック」を指定しても、その人のPCにヒラギノがなければ、別のゴシック体（例えばMS Pゴシックなど）で代替表示されてしまい、デザイナーの意図した通りの見た目にはなりませんでした。

2. 現在の主流：Webフォントでデザインを届ける

この問題を解決したのが「Webフォント」です。これは、フォントデータそのものをWebサーバーに置いておき、ユーザーがサイトにアクセスした際に、ブラウザがフォントをダウンロードして表示する仕組みです。

【Webフォントの仕組み】

1. Webサイト制作者が、CSSの@font-faceというルールを使って、サーバーに置いたフォントファイル（またはGoogle Fontsなどの外部サービス）の場所を指定します。
2. ユーザーがサイトを訪れると、ブラウザがCSSを解釈します。
3. @font-faceの記述を見つけたブラウザは、指定されたURLからフォントファイルをダウンロードします。
4. ダウンロードが完了したら、そのフォントを使ってテキストを美しく表示します。

この仕組みにより、Webサイトはユーザーの環境を問わず、制作者が意図した通りのタイポグラフィ（文字のデザイン）を届けることができるのです。

つまり、ブラウザ自体がフォントを内蔵しているわけではなく、Webサイト側の指定に応じて、ユーザーのデバイスフォントを使うか、サーバーからWebフォントをダウンロードして使うかを判断している、ということです。

おわりに：フォントは雄弁なデータ構造である

今回は、フォントのデータ構造というテーマを探求してきました。最後に、ここまでの内容を振り返りましょう。

• フォントとTypefaceの違いから始まり、フォントが単なる文字の形ではなく、様々な属性を持つデータであることを確認しました。(第1章)
• CSSのfont-weightが100から900の数値で定義されているのは、伝統的なウェイトを体系化したものであり、font-stretchと組み合わせることで豊かな表現が可能になることを見ました。(第2章)
• フォントファイルの中身は、文字コードと字形を結びつけるcmapや、文字の形そのものを定義するglyf、文字間隔を調整するkernなど、機能ごとに整理されたテーブルの集合体、さながら高機能なデータベースであることを学びました。(第3章)
• 文字の滑らかな輪郭が、2次または3次ベジェ曲線という数式で描かれていること、そしてフォントは単純な拡大縮小だけでなく、ヒンティングやオプティカルサイズによって、あらゆる状況で最高の見た目を提供する工夫がされていることを知りました。(第4章)
• そして、フォントはOSに内蔵されたデバイスフォントと、サーバーから読み込むWebフォントの2つの仕組みで私たちの目に届けられていることを理解しました。(第5章)

---

普段何気なく使っているフォントですが、その一つ一つのファイルには、デザイナーの美学と、それをコンピュータ上で正確かつ効率的に再現するための、エンジニアたちの知恵が凝縮されています。

フォントのデータ構造を理解することは、

• デザイナーであれば、自らの意図をより正確に表現するための武器となり、
• エンジニアであれば、Webサイトのパフォーマンス最適化（サブセット化など）や、よりネイティブらしいUI表現を実装するためのヒント

を与えてくれます。

今があなたが見ているこの文字も、フォントの裏側にある雄弁なデータ構造があります。その構造に少しだけ思いを馳せてみると、きっと、文字たちがいつもと少し違って見えてくるはずです！
20181111111