ウェブのためのタイポグラフィシステム

2023年12月2日 23:00

ウェブにおけるユーザーとのコミュニケーションは「言葉」からはじまり、「言葉」を中心に行われます。
はじめに言葉があるからこそ、言葉を伝えるための媒体である「文字」を構成するための「タイポグラフィ」はウェブにおいて非常に重要な存在です。

タイポグラフィにはスクリーン上に文字を表示するだけに留まらない役割があります。
私たちは発話でのコミュニケーションを行う際に、声色、声の抑揚、声の大きさ、話す速度、表情など、多くの要素を柔軟に変化させています。これらの要素を変化させることで私たちはメッセージや人となりのスムーズな伝達を実現しています。
スクリーン上でのコミュニケーションも文字の色、形、配置などを変化させながら適切なタイポグラフィを構築することで、口頭でのコミュニケーションと同様にメッセージやアイデンティティなどをなめらかに伝達できるようになります。

適切に設計されたタイポグラフィはウェブのアクセシビリティ向上や、魅力的なビジュアルの構築に効果をもたらし、ウェブを訪れたユーザーのエクスペリエンスをより良いものにします。

「Webデザインの95%はタイポグラフィです」Oliver Reichenstein

WEB DESIGN IS 95% TYPOGRAPHY より

Oliver Reichensteinの「Web Design is 95% Typography」はウェブやウェブデザインの在り方に触れた有名なブログ記事です。「ウェブデザインの95%はタイポグラフィである」という言葉を聞いて素直に納得できる方は多いのではないでしょうか。一方でその反面、タイポグラフィのデザインは膨大であるがゆえにとても難易度が高い作業と言うこともできます。
タイポグラフィのデザインは何故、困難かつ複雑な作業なのでしょうか。

本記事ではタイポグラフィの複雑性について考察し、「タイポグラフィデザインにおける課題を解決するためのソリューション」や、「シンプルかつ堅牢なタイポグラフィシステムを構築するためのポイント」について紹介します。

タイポグラフィ設計が複雑な理由

タイポグラフィの設計はその見た目のシンプルさに反して、非常に難しい作業です。
この原因を掘り下げると、そこには「タイポグラフィのプロパティの多様さ」と「ウェブタイポグラフィにおける行間管理の複雑さ」の存在があります。

1. タイポグラフィのプロパティの多様さ

タイポグラフィの設計が難しい物となっている背景には、タイポグラフィを管理するためのCSSプロパティが無数に存在していることが原因の一つとしてあります。
無数のプロパティの仕様を把握することはもちろん大変ではあるのですが、それ以上に実装フェーズでプロパティ群を管理してウェブへ反映させる作業こそがタイポグラフィ設計の複雑なポイントです。

タイポグラフィは、フォントの種類、サイズ、字間、行高、など、多くのプロパティが組み合わさることによって構成されています。
異なるフォント、サイズ、行高を適切に活用することで、ビジュアル表現に豊かさと多様性をもたらすことができますが、その一方で統一感を損なうリスクもあります。

タイポグラフィの一貫性はプロパティとその値の管理が破綻すると簡単に失われてしまいます。特に大規模なウェブサイトやウェブアプリケーションにはページが無数に存在することから、細心の注意と設計が必要です。

特に現代は多様なスクリーンサイズやブラウザ間で一貫性した表現を維持することが求められるため、デザイン時に適切なタイポグラフィを設計しても実装物との乖離が発生してしまう懸念は多いにあります。
また、初期実装のタイミングでは適切に一貫性の構築を実現できた場合でも、メンテナンスに伴って一貫性を維持できなくなり、結果としてタイポグラフィが破綻するという事象もウェブの運用時によく頻出する現象です。
そのため、タイポグラフィを扱う際には常に破綻の可能性を考慮しながらデザインや実装を行う必要があります。

2. ウェブタイポグラフィにおける行間管理の複雑さ

行間は文章の読みやすさや視覚上の快適さを構築するための特に重要な要素です。
行間は過度に広いとテキストが散らかって見え、狭すぎると圧迫感を与えてしまうことからも、ウェブ全体の視覚的なリズムや調和に大きく影響する要素です。
適切な行間はフォントのサイズやスタイルによって変わるため、常に最適なタイポグラフィをデザインすることはとても難易度が高い作業です。

印刷物のタイポグラフィの場合、行と行の間の余白は「行送り (レディング)」によって管理します。これは活版印刷において、「インテル」と呼ばれる行間を調整するための鉛 (Lead) を挟むことによって行間を表現していたことが由来なのですが、この考え方がデスクトップパブリッシングにも受け継がれています。

一方でウェブには印刷の工程が存在しないことから、行間を管理するためのDTPとは異なる仕組みとしてCSSのline-heightプロパティが用意されています。
line-heightは文字通り、行の高さを表すためのプロパティです。指定したline-heightからfont-sizeを引いた数値を2分割し、その数値を文字の上下に余白として挿入します。行間を文字の上下に挿入することから、この余白には「half-leading」という名前が付いています。
ウェブタイポグラフィではline-heightを指定してhalf-leadingを調節する必要があります。

ウェブのタイポグラフィデザインが難しいプロセスとなっている背景にはこの「line-height」の存在も大きく影響しています。
line-heightは絶対値を指定することもできますが、一般的にはフォントサイズに伴う相対値を指定します。

//CSS
//Relative(絶対値による指定)
p {
　　　　font-size: 16px;
　　　　line-height: 24px;
}

//Absolute(相対値による指定)
p {
　　　　font-size: 16px;
　　　　line-height: 1.5;
}

この相対的な指定方法によってタイポグラフィがどのようにレンダリングされるかを明確にイメージすることが難しくなってしまうことも行間のデザインを困難な物にしている原因の一つです。

タイポグラフィ設計の複雑性を解消する仕組み

1-1. バーティカルリズム

前章ではタイポグラフィにおける行の高さが過度に高いとテキストが散らかって見え、逆に行の高さが狭いと圧迫感を与えてしまうことをお伝えしました。
このことから、ユーザーがウェブ上の文字をスムーズに認識するためには行の高さに一定の秩序が必要であることが分かります。

文字を読みやすくするための方法の一つとして、タイポグラフィを下方向に向かって音楽の拍子のように一貫したテンポで構成するという考え方があります。この方法でタイポグラフィを設計することによってユーザーは文字をリズミカルに識字できるようになります。
このタイポグラフィの縦方向のリズムを「バーティカルリズム」と呼びます。

バーティカルリズムはタイポグラフィにおいて、文章の読みやすさやビジュアル表現としての美しさを高めるための重要な概念です。
バーティカルリズムの実態は「余白」です。行の高さや段落間の余白を均一に保つことで、ウェブ全体のテキストは視覚的に整然とレイアウトされるようになります。
バーティカルリズムを適用することでウェブはより一貫性が維持され、ユーザーへ調和の取れた印象を与えることができます。

1-2. バーティカルグリッド

そしてバーティカルリズムの概念を発展させ、バーティカルリズムを体系的な仕組みとしてウェブに取り入れるためのソリューションが「バーティカルグリッド」です。
バーティカルグリッドとはline-heightをグリッドに見立ててタイポグラフィや要素をレイアウトする手法であり、表現としての概念です。

従来のline-heightは相対的な値による指定であるため、奇数や小数を含む数になってしまう問題がありました。これらの数値が発生することが意図通りであれば何ら問題はないのですが、意図通りでない場合は複雑であるが故にタイポグラフィをデザインするコストやメンテナンスするコストは肥大化してしまうでしょう。

font-size: 21px, line-height: 1.5 の場合の行の大きさ
21px × 1.5 = 31.5px

タイポグラフィのデザインはバーティカルグリッドを導入することによって規則 (グリッド) に沿ってとてもシンプルに行うことができるようになります。
バーティカルグリッド適用するためには本文のline-heightをグリッドの基準とする必要があります。そして本文のみならず、見出しや余白など、全ての要素の高さはline-heightの倍数で指定することでグリッドにスナップするようにレイアウトします。
line-heightの具体的な管理方法はこの後の「タイポグラフィシステムの構築」にて紹介します。

このバーティカルグリッドはタイポグラフィだけでなく、画像、ボタン、フォームなど、ウェブにおける要素全体の垂直方向のレイアウトや余白を管理するための手法です。
バーティカルグリッドを活用することで各要素は規則に基づいて配置されるため、曖昧なレイアウトは排除され、ウェブ全体に視覚的な秩序と調和をもたらすことができます。

2. デザイントークン

デザイントークンはデザインシステムによく採用されるデザインのためのアプローチの一つですが、デザインシステムが存在しなくても成り立つ概念です。

デザイントークンとは、UIデザインにおけるスペーシング、カラー、タイポグラフィ、アニメーションなど、インタフェースを構築・維持するために必要な値にラベル (トークン) を付けて表した物です。
色であればカラーコードを、アニメーションのイージングであればベジェ曲線をトークン化するように、インタフェースを構成するあらゆるエレメントを管理することができます。

デザイントークンを採用することで、インタフェースはより一貫性の高い物となります。
例えばRGBで表現することができる配色は「16,777,216通り」ありますが、デザイントークンで実際に使用する特定の色のみを定義、管理することによって意図しないカラーが使われることを防ぎ、インタフェースに一貫性を持たせることが可能となります。

タイポグラフィの実装は前述のようにCSSプロパティの種類の豊富さや指定できる値の多様さから一貫性を保つことが難しい作業ですが、デザイントークンを活用することで意図しない表現の誤挿入を抑えることができます。
このことからも、デザイントークンにはタイポグラフィの複雑性を解消する役割としての効果があります。

また、デザイントークンには柔軟性を高める効果もあります。例えばプロダクト内の字間を全て変更する必要がある場合でも、特定のデザイントークンを更新するだけで一括で変更できるようになります。
デザイントークンが活用されているとインタフェースのアップデートも容易になるため、手作業によるエラーを減らし、効率的にデザインできる環境が実現します。

タイポグラフィシステムの構築

ここからが記事の本題なのですが、「バーティカルグリッド」と「デザイントークン」を活用して実際に私が構築したタイポグラフィシステムを紹介します。

「デザイントークン」はタイポグラフィシステムの基盤を構築するために、「バーティカルグリッド」はタイポグラフィシステムの秩序を保つために活用しています。

Tokens Studio上に構築されたタイポグラフィシステムのデザイントークン

1. プリミティブトークンの定義

プリミティブトークンはタイポグラフィシステムの基盤となる要素を扱うためのトークンレイヤーです。一貫性のあるプリミティブトークンを適切に定義することで、効果的なタイポグラフィシステムを構築することが可能になります。
プリミティブトークンは下記の5つの要素によって構成されています。

1. fonts

fontsはフォントファミリーを扱うためのトークンです。フォントファミリーは、タイポグラフィの基本となる要素であり、文章のスタイルとトーンを決定する上で重要な役割を果たします。

テキストフォントにはBIZ UDフォントを採用しており、等幅フォントと可変幅フォントの2種類のファミリーを用意しています。
アイコンフォントにはMaterial Symbols Roundedを採用しています。

プロポーショナルフォント (proportional)
- 文字の形に応じて文字幅を調整して読みやすい文字組となるように設計されたフォント
- 見出しや文章に適用させることに向いている
モノスペースフォント (monospace)
- 文字幅が一定の数値に固定されているフォント
- 幅が均一なので数字や文字同士を比較してもらう目的で提示する場合に効果的
アイコンフォント（icon）
- システムで使用するアイコンをまとめて管理するためのフォント

2. fontSizes

fontSizesはフォントサイズを扱うためのトークンです。フォントサイズは、テキストの読みやすさに直接影響を与える重要な要素です。
12pxを起点に、84pxまでの16段階を用意しています。

フォントサイズは以下の公式で求めることができます。
この公式はIBMのCarbon Design Systemのタイポグラフィ設計を参考にしています。

//計算式
a₀ = 12px
an = an-1 + {INT[(n-2)/4] + 1} * 2

//Python
def recurrence(x):
    if x == 1:
        return 12
    else:
        return recurrence(x - 1) + (int((x - 2) / 4) + 1) * 2

for i in range(1, 17):
    px = recurrence(i)
    rem = px / 16.00
    print("x{0}: {1}px ({2}rem)".format(i, px, rem))

等差数列を活用することによって一定のリズムを保ったフォントサイズの一覧を出力することができるようになります。
12pxを起点としていますが、計算式を用いることで10pxや16pxを最小サイズとすることもできます。また、ここでは16段階のフォントサイズを展開していますが、段階の数も任意の値を指定することができます。
いずれの値を変えても計算式は同じなので、常に一貫したフォントサイズを出力することができます。

3. fontWeights

fontWeightsはフォントウェイトを扱うためのトークンです。フォントウェイトはテキストの重要性や階層を示すために用います。
フォントウエイトはテキスト用とアイコン用の2種類を設けています。

4. lineHeights

lineHeights は行の高さ (行間) を扱うためのトークンです。行の高さは前述したように、テキストの読みやすさに影響を与える重要な要素です。

Absolute版: 相対値による指定
相対版ではnoneとsmall, medium, largeの3段階を用意しています。
Absolute版はバーティカルグリッドでレイアウトすることを前提にする場合はあまり使用されることはありませんが、アイコンフォントなどの一部ケースで使用するために定義しています。

Relative版: 絶対値による指定 (バーティカルグリッド用)
バーティカルグリッドを適用するためのバージョンです。
基準となるグリッド行の高さ、基準となる文字の行高、フォントサイズを元に算出をした値をline-heightに指定します。

//計算式
verticalGridSize: 4
baseLineHeight: none | small | medium | large
lineHeight: CEIL((fontSize * baseLineHeight) / verticalGridSize ) * verticalGridSize

Absolute版はline-heightに奇数や小数を含む値が指定される懸念がありますが、Relative版ではバーティカルグリッドが適用されるので必ずverticalGridSizeで指定した数値の倍数がline-eightに指定されます。

5. letterSpacings

letterSpacingsは文字間隔を扱うためのトークンです。テキストの明瞭さと読みやすさを向上させるために使用します。
通常状態のnormal及び、small, medium, largeの3段階を用意しています。

2. セマンティクストークンの定義

セマンティクストークンは実際にウェブを構築するために使用するタイポグラフィを定義するためのトークンレイヤーです。
プリミティブトークンで用意した5つの要素を継承して構築されており、特定の文脈や用途に応じたタイポグラフィを形作る役割があります。
セマンティクストークンを活用することによってウェブの品質を向上させることが可能になります。

現在は「text」「heading」と「icon」の3種類を登録して使い分けています。

1. text

textはテキストのタイポグラフィを扱うためのトークンです。
以下の表はtextトークンの定義を一部抜粋した物です。

現在はlineHeightsに一括してmediumを適用していますが、小さいフォントサイズのタイポグラフィにはlargeを、大きいフォントサイズのタイポグラフィにはsmallを適用することで読み心地を更に改善することも可能です。

2. heading

headingは見出しのタイポグラフィを扱うためのトークンです。
下記の表はheadingトークンの定義を一部抜粋した物です。

見出しで使用するタイポグラフィはフォントサイズがテキストで使用する物と同じ場合だとしても、字間をテキストよりも広く取りたいのでLetter SpacingをLargeに設定しています。
このように、タイポグラフィの目的に応じて指定するトークンを変更することで、デザインの一貫性や実装時の保守性を保ちながらもスタイルを変化させることができます。

3. icon

iconはアイコンのタイポグラフィを扱うためのトークンです。
以下の表はiconトークンの定義を一部抜粋した物です。

iconは単体で使うユースケースのみを想定しているため、lineHeights, letter Spacings共にnoneを指定しています。

このようにしてセマンティクストークンを定義し、ここで構築したタイポグラフィを実装時に活用しています。

この記事ではプリミティブトークンとセマンティクストークンまでの紹介となりますが、場合によっては「コンポーネントトークン」を用意することも可能性として存在します。
コンポーネントトークンのレイヤーではh1、h2、h3、p、ulなどのHTMLの具体的なタグに基づいたトークンや、デザイン対象のウェブサイトやウェブアプリケーションの要素に即したトークンを用意することが考えられます。
コンポーネントトークンも用意することができるとUIの一貫性が格段に向上するため、更に迷いなくデザインを行うことができるようになります。
タイポグラフィシステムをより発展させたい方は是非トライしてみては如何でしょうか。

おわりに

拡張の可能性

本記事ではタイポグラフィの複雑性について考察、タイポグラフィデザインにおける課題を解決するためのソリューションとしての「バーティカルグリッド」や「デザイントークン」の紹介、シンプルかつ堅牢なタイポグラフィシステムを構築するためのポイントの紹介を行いました。

一方で、この記事で挙げた観点はタイポグラフィデザインにおいて考慮する必要があることのほんの一部でしかありません。

例えばウェブ技術の領域では可変フォント (Variable fonts) が普及したり、text-wrap、initial-letterなどのCSSプロパティが新しくサポートされたりと、タイポグラフィシステムの構成や内容に直接影響するアップデートや変化が日々発生しています。
これらのアップデートに対応しながら効果的なタイポグラフィシステムを構築する手法については更に検討を重ねる必要があります。

デザインシステムとタイポグラフィシステムの接続についてもこの記事では取り扱っていません。タイポグラフィシステムはデザインシステムに組み込み、UIコンポーネントに適用することで、プロダクト全体の一貫性を高めることができます。
組み込みの際には、タイポグラフィシステムにブランド観点を取り入れる必要がありますが、この方法についても十分に考慮しなくてはいけません。

また、近年はウェブへアクセスするためのデバイスやブラウザの多様化や、ウェブを利用するユーザー層の多様化が著しい状態にあります。
特にユーザー層の変化によってアクセシビリティへのサポートは更に求められるようになることが推測できることから、今後はそのニーズへ応えるためにタイポグラフィシステムを個別最適化させるようなアップデートを加える必要が出てくると考えられます。
iOSのDynamic Typeはタイポグラフィの動的変化を実現している完成度が高い仕組みであるため、より良いタイポグラフィシステムを構築するための参考として強く機能します。ウェブ領域の内外に関わらず、様々な良い事例も参考にしながらアップデートに向けて準備を重ねられると良いでしょう。

これらのように、タイポグラフィシステムにはまだまだ考慮しなくてはならないことが無数に存在します。しかし、さらなる拡張を重ねることは重要ですが、全てのアップデートを1人で行う必要はありません。ウェブタイポグラフィはコンテンツライター、デザイナー、エンジニアなど、様々な職能のメンバーによって作り上げる物です。タイポグラフィシステムも多様な職能のメンバーが各々の専門領域の知識を持ち寄って構築できると理想的です。

言葉のためのタイポグラフィシステム

最後に、これまでタイポグラフィシステムの構築と拡張についてお話をしましたが、タイポグラフィシステムを構築する目的を忘れてはいけません。
タイポグラフィシステムの目的は構築への取り組みそのものではなく、その先のコンテンツ設計、すなわち言葉に向き合う時間を増やすことにあります。

タイポグラフィシステムには、魅力的な言葉を紡ぐサポートをする力、その言葉に形を与える力があります。
タイポグラフィシステムを構築して言葉について考え、言葉を伝えましょう。

ウェブにおけるコミュニケーションは「言葉」からはじまるのですから。

参考書籍・記事・スライド

「ウェブのためのタイポグラフィシステム」はGoodpatch Design Advent Calendar 2023 2日目の記事でした。