「ウェブタイポグラフィ」を読んだ

「ウェブタイポグラフィ」を2025年03月10日に読んだ。

目次

• メモ
  • 書体とフォント p8
  • ウェブタイポグラフィが本当に重要な理由 p11
  • タイポグラフィの役割 p12
  • 優れたタイポグラフィは良い気分を誘発する p12
  • p21
  • ピクセルであって、ピクセルでない p26
  • 6世紀に及ぶ組版の歴史に倣う p29
  • line-heightの設定には単位のない値を使用する p43
  • ブラウザのデフォルトよりも行間を広げる p46
  • 書体に合わせて行間を変える p46
  • 段落の最終行はジャスティフィケーションしない p54
  • 長い段落は中央揃えにしない p63
  • 後ろに下がったり目を細めたりするだけでは不十分 p70
  • さまざまなスペース p72
  • アンパサンドは使いすぎない、凝りすぎない p78
  • 文字サイズはスケールを使って決める p92
  • 最も小さいサイズを先に決める p95
  • コンテンツにあわせて代替モジュラースケールを使用する p96
  • 文字サイズとスケールを画面ごとに調整する p98
  • 画面の高さを考慮する p100
  • p102
  • 見出しのレディングは狭くする p102
  • 衝突を避ける(意図的なものは除く) p103
  • 段落の区切りを適切に示す p108
  • 段落のインデントは1em以上にする p108
  • 段落間のスペースは1cm以下にする p109
  • すべてのブロック引用がプルクオートのように見える必要はない p111
  • 引用符のぶら下げ p111
  • リストは読まれるテキストとして扱う p113
  • アンダーラインでは強調しない p115
  • 偽のボールドとイタリックは使わない p115
  • ウェイト p118
  • リンクは明確かつ控えめにする p120
  • テキストは左揃え、数字は右揃え、見出しはデータに揃える p134
  • 小数点に揃える p135
  • テーブルにスタイルを適用しすぎない p141
  • 2-7 見出しとインパクト p158
  • 小さい画面でもテキストをディスプレイサイズに設定する p158
  • 視覚的にテキストを中央にするか約物をぶら下げる p168
  • 行間を調整してカラーを均等にする p170
  • 縦方向のスペースを一定間隔にする p179
  • 基本設定をリセットして一貫性を維持する p180
  • メディアの挿入でリズムが乱れてもかまわない p182
  • ベースライングリッドに盲目的に従わない p183
  • 2-9 配置と構成 p185
  • レイアウトをコンテンツからデザインする p185
  • モバイルファーストの哲学を採用する p186
  • メインのテキストブロックを斜め読みできるようにする p187
  • 関係を提示して注意を引きつける p191
  • グリッド p194
  • グリッドの種類 p194
  • 複合グリッドを使用して柔軟性を最大化 p195
  • 均等よりも不均等なグリッドシステムを選択する p196
  • カラムの幅をビューポートの高さに応じて制限する p197
  • 和文組版の考え方 p200
  • 書体の選び方 p200
  • 行の長さ p200
  • 文字サイズと行間 p200
  • 3-1 フォントが画面にレンダリングされる仕組み p202
  • 画面解像度の限界を受け入れる p202
  • フォントが画面にレンダリングされる仕組みを理解する p203
  • アンチエイリアスの登場 p203
  • ヒンティング p205
  • 自動ヒンティングによる支援 p206
  • プラットフォーム間のレンダリングの違いを受け入れる p206
  • 白抜き文字の場合に限りサブピクセルレンダリングを無効にする p208
  • フォントを各種プラットフォームでチェックする p209
  • 3-2 実際的および実用的考慮事項 p210
  • すぐにフォントを選択しない p210
  • 目的と要件を理解する p211
  • 必要な文字が揃っている書体を使用する p211
  • 必要なスタイルが書体に備わっていることを確認する p212
  • 必要な機能と特殊効果を備えたフォントを選択する p212
  • フォントのパフォーマンスを考慮する p213
  • レンダリング p213
  • ファイルサイズ p213
  • 予算を超えないよう、ただし無償のものには用心を p214
  • ライセンス p214
  • ブランド要件に対して現実的に対応する p215
  • 書体のジャンルは分類法よりも役立つ p225
  • 歴史を学ぶ p226
  • 15世紀：オールドスタイルセリフ p226
  • 18世紀前半：トランジショナルセリフ p227
  • 18世紀後半：ラショナルセリフ p227
  • 19世紀：リアリストサンセリフ p227
  • 19世紀：ラショナルスラブセリフ p227
  • 20世紀：ジオメトリックサンセリフとジオメトリックスラブセリフ p228
  • 20世紀：ヒューマニストサンセリフ p228
  • 20世紀後半：コンテンポラリーセリフ p228
  • 20世紀後半：リバイバルと合成 p228
  • 書体デザインは著作権で保護できない p229
  • テキストに沿った書体を選ぶ p247
  • ニュートラルな書体というものは存在しない p248
  • 歴史と文化がテキストと共鳴する書体を選ぶ p249
  • 調査する p250
  • 書体見本を作成して候補を絞る p250
  • さまざまな環境で書体を判断する p252
  • 自分の好みを信じる p252
  • 3-5 ディスプレイテキストの書体を選ぶ p253
  • かしこまらず、押しつけず、ありふれたものにせず p253
  • 書体を通じて感覚に働きかける p253
  • さまざまなディスプレイ書体を試す p256
  • 働き者 p256
  • 個性派 p257
  • 柔軟性よりも個性を重視する p258
  • ディスプレイテキストにディスプレイスタイルを使用する p258
  • テキスト書体の構造を補強するディスプレイ書体を選択する p260
  • オプティカルサイズ p260
  • ヒントを見つけ、いろいろ試す p262
  • 機能的テキストと本文を明確に区別する p263
  • 機能的テキストにはオープンで明瞭な字形を選ぶ p264
  • システムUIフォント p266
  • インターフェイス要素のフォントを指定する p267
  • ローカルフォントは気軽に指定しない p278
  • 3-9 ライブラリを構築する p294
  • 自分の趣味や好みを育む p294
  • インスピレーションは盗むものでコピーするものではない p295
  • 支払った分だけ得て、得たものに対して支払う p296
  • 活字マニアは治らないが致命的ではない p297
  • ジャスティフィケーション p298
  • トラッキング p298
  • カーニング p298
  • デザインを伝える p300
  • ほかはともかく、これだけは読んでほしい p303
  • コンピューターを信用しない p303

メモ

書体とフォント p8

通常の会話では、「書体」(typeface)と「フォント」(font)という用語は区別なく使用できます。
もしそれを注意されたとしても気にすることはありません。
ほとんどのケースで、「Gill Sansはフォントだ」と言ってもまったく問題ありませんし、理解してもらえます。

しかし、本書ではこの2つの用語は少し違う意味を持っています。
書体は、フォントファミリー(Gill Sansなど、同じデザインをベースにしたフォントを集めたもの)を意味するものとして使用しています。
フォントという用語は、Gill Sans Bold Condensedなど個々のスタイルを示すのにおもに使用しています。
ただ、「書体」を繰り返さない方が読みやすくなるだろうとの思いから、「フォント」が使用されている箇所もあります。
ウェブフォントは、ウェブページのテキストを表示するためにダウンロードされるフォントファイルを指します。

ウェブタイポグラフィが本当に重要な理由 p11

ウェブにおけるタイポグラフィは重要です。
なぜならタイポグラフィそのものが重要なのですから。
タイポグラフィは、書き手と読み手の間に介在するものです。
テキストに重要なメッセージがあるなら、タイポグラファの出番です。
読み手の注意を引きつけるという形でその努力は報われます。

ウェブのコンテンツの大部分を構成するのは言葉です。
読まれるべき言葉が連なっていて、その読む体験を良いものにしたいのなら――貧弱なものを満足のいくものに、そしてさらにすばらしいものにしたいのなら、重要になるのがディテールです。
タイポグラフィの存在意義はまさにそこです。
ディテールが積み重なり、単なる部分の総和を超えたものになるのです。

2006年、デザイナーのオリバー・ライヒェンシュタイン(Oliver Reichenstein)はウェブデザイナーたちに呼びかけました。
「ウェブデザインの95%はタイポグラフィだ」という彼の言葉は有名です。*1
ウェブ上にある情報の95%は文字で書かれているとした上で、すべてのウェブデザイナーは書かれた情報をまとまった形にする専門分野、つまりタイポグラフィの訓練をきちんと受けるべきだと主張したのです。

95%という数字が正しいかどうかわかりませんが、ウェブの大半の目的は読んでもらうことである点に異議を唱える人はいないでしょう。
カスタマーレビュー、チャリティキャンペーン、産業レポート、ソーシャルネットワークの最新情報、ブログの投稿、新聞、雑誌、書籍、Wiki、電子メールなど、どれも読めなければ意味がないものばかりです。
一方で、ウェブで読めるもののデザインの多くが、同じように退屈で魅力のない、読みづらいものであるのも事実です。
本書ではそうならないための方法と、ライヒェンシュタインが呼びかけているトレーニングのいくつかを紹介します。

*1
「Web Design is 95% Typography」(ウェブデザインの95%はタイポグラフィ)、オリバー・ライヒェンシュタイン、iA.net(2006年)
https://ia.net/topics/the-web-is-all-about-typography-period

タイポグラフィの役割 p12

高名な書体デザイナーのヘルマン・ツァップ(Hermann Zapf)は、デザイナーたちに向けて「タイポグラフィックデザインは個人的な自己表現の一種だと誤解されることがある」と述べています。*2
タイポグラフィは美術ではありません。
目的を持った工芸であり、デザインです。
読み手の体験を高めることが目的です。
一方、ミール・ルーダー(Emil Ruder)は1969年に次のように語りました。*3

タイポグラフィには文字によって情報を伝達するという明白な義務がある。
いかなる議論や考察も、タイポグラフィをこの義務から解放することはできない。
読むことができない印刷物は、目的を失った制作物である。

読むことのできないウェブサイトは、目的を失った制作物です。
タイポグラフィの最も重要な役割は、判別性と可読性を保証することですが、仕事はそれだけではありません。
読み手をテキストへと誘うのも大切です。
トーンとメッセージを尊重しながら強化し、構造やほかの要素との関係を明確にする必要もあります。
タイポグラフィは、没入して読んだり、情報を求めて流し読みしたり、その中間のような読み方をしたりするための、理想的な状態を作り出さねばなりません。

*2
「The Elements of Typographic Style」、ロバート・ブリングハースト(Robert Bringhurst)の裏表紙で引用されたツァップの言葉

*3
「Typography: A Manual of Design」、エミール・ルーダー(1967年)。
日本語版「タイポグラフィータイポグラフィ的造形の手引き」(ボーンデジタル刊)
https://www.borndigital.co.jp/book/15292.html

優れたタイポグラフィは良い気分を誘発する p12

タイポグラフィは、読み手に直接的かつ本能的な影響を与えます。
読者がテキストを理解したり吸収したりできるようにするといった実用面だけではありません。
極めて独特なやり方で読み手の感情と身体の状態に顕著な作用をもたらします。

2005年、「The Aesthetics of Reading」というタイトルのレポート*4がマサチューセッツ工科大学のロザリンド・W・ピカード博士(Dr Rosalind W.Picard)とマイクロソフトの社員で認知心理学者のケヴィン・ラーソン博士(Dr Kevin Larson)によって発表されました。
それによると、タイポグラフィの質は読む速度と理解度にはさほど重大な影響を与えないが、「高品質のタイポグラフィは読み手の関心を強く引きつけられる」ことが明らかになったそうです。

調査では、タイポグラフィの質は実際の読む速度には必ずしも影響しないものの、体感上の読む速度には重大な影響を及ぼすという結果が出ました。
タイポグラフィが優れていると、調査の参加者は文章を読むのにかかる時間をかなり低く見積もりました。
また「皺眉筋の活動の低下」も見られました。
つまり読み手は読むためにあまり目を細めなかったということです。
これらの結果を総合して、科学者たちは「優れたタイポグラフィは良い気分を誘発する」と結論づけました。

最近まで、優れたタイポグラフィのために時間とエネルギーを費やすときの拠りどころと言えば、自身の経験に基づくデザイン感覚と美的感覚だけであり、それは歴史の重みと、受け継がれてきたタイポグラフィの知恵の上に積み重ねられるものでした。
しかし現在はまったく新しい波がやって来ています。
優れたタイポグラフィと書体デザインの効果について、心理学者とタイポグラファが本格的な査読つきの実験的研究をおこなっています。
そしてほとんどの場合、巨匠たちの教えは正しかったことが明らかになっています。

*4
「The Aesthetics of Reading」PDF、ケヴィン・ラーソン、ロザリンド・W・ピカード(2005年)
https://affect.media.mit.edu/pdfs/05.larson-picard.pdf

p21

emはタイポグラフィにおいて長い歴史を持ち、一般には水平方向の長さを測るために用いられてきました。
emという名称はアルファベットのMにちなんだものですが(発音も同じです)、Mという文字そのものと直接的な関係はありません。
それよりも、活版印刷機で使用される金属製の活字の大文字Mの幅に由来しています。

ピクセルであって、ピクセルでない p26

ピクセルはかつてウェブデザインにおける最小の単位であり、分割できないものと考えられていました。
ピクセルはコンピューター画面が表示できる最も小さいドットだったからです。
現在では、これらは厳密には「ハードウェアピクセル」として知られています。

長きにわたり、画面解像度に変化はほとんどありませんでした。
画面に表示された1ピクセルは、ほぼ確実に幅1/96インチでした(96ppi)。
ピクセルとはハードウェアピクセルのことであり、LCD画面がより一般的になって、サブピクセルをテキストのスムージングや画像のレンダリングに使用できるようになっても、それで問題ありませんでした。

状況を一変させたのは、アップルの倍密度Retinaディスプレイによって普及した超高解像度のスマートフォン画面の登場です。
最初のiPhoneの画面は3½インチで、解像度は320×480でした。
そこで得られる163ppiは96ppiとさほど変わらず、ピクセルと言えばまだハードウェアピクセルでした。
言い換えると、16pxのテキストは、ほかの画面と同じように16物理ピクセルで表示されていました。

しかし後に誕生したiPhone4では、画面は同じ3½インチだったものの、解像度は640×960ピクセル密度は326ppiでした。
つまり16物理ピクセルを使って16pxのテキストを表示したら、以前のiPhoneに表示されるテキストの半分のサイズになってしまうのです。
これは明らかに読み手とデザイナーの両者にとって受け入れがたい状況だったため、CSS2でピクセルの定義が変えられました。
かつてのハードウェアピクセルは、今では「レファレンスピクセル」と呼ばれています。
公式の仕様における若干不可解な定義*1を紹介します。

レファレンスピクセルとは、ピクセル密度96dpiのデバイスにおいて読み手の腕の長さの距離から見た1ピクセルの視角である。
名目上の腕の長さが28インチなら、視角は約0.0213度になる。
したがって、この腕の長さだけ離れた視点からの1pxはおよそ0.26mm(1/96インチ)に相当する。

端的に言えば、CSSでのピクセルはもはや個々の物理的な画素(画面が作り出す最小のドット)ではなく、1インチの1/96に相当する距離の尺度です。
そのため古いディスプレイでは新しい仕様に従い(定義によると、ローテクの96ppi画面の各ピクセルは幅1/96インチになります)、高解像度画面ではCSSピクセルをそれと同じサイズにする必要があります。

そうすれば、Retinaディスプレイ搭載のiPhoneと低解像度ディスプレイの古いiPhoneで、16pxのテキストがまったく同じサイズで表示されます。
さらには、iPhone4が私たちに通知するの画面解像度は320×480ですが、ディスプレイに実際に組み込まれているピクセルは640×960です。
これは「論理解像度」と呼ばれ、新型のiPhoneやほかの超高解像度の画面にも同じことが当てはまります。

しかしレファレンスピクセルの定義に複雑な部分があるため、その解釈につじつまが合わないことが出てきます。
CSSピクセルは腕の長さの距離にある画面上では1/96インチになると定義されています。
つまり顔により近いところにある画面上のレファレンスピクセルは1/96インチよりも小さくなり、腕の長さよりも遠くにある画面上のピクセルは1/96インチよりも大きくなるということです。
これは理にかなっていますが、デバイスでのCSSピクセルの表示と公表されている論理解像度に主観が加わることになります。*2

倍密度画面に表示されるCSSピクセルは、メーカーとモデルによって異なります。
ほとんどのモバイルデバイスでは、レファレンスピクセルはほぼ必ず1/96インチより小さくなります。
携帯電話は腕の長さよりも近いところで持つので、これは仕様に合っていますが、表示されるピクセルのサイズの範囲は1/110インチから1/150インチに及びます。
タブレットとミニタブレットではその差がさらに大きくなります。
ハードウェアでなくソフトウェアでサイズが決まるとしても、正確に見当をつけることは難しく、1ピクセルが実際にどのくらいの大きさになるのか正確にはわからないでしょう。

*1
「Absolute Lengths」CSS Values and Units Module Level 3
https://www.w3.org/TR/css3-values/#absolute-lengths

*2
論理解像度の詳細は、PaintCodeの「The Ultimate Guide To iPhone Resolutions」を参照してください。
https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

6世紀に及ぶ組版の歴史に倣う p29

よく引き合いに出される1行の理想的な長さは66文字で、一般的には45文字から75文字の範囲(スペース込み)なら好ましいと考えられています。
この数字はあらかじめ定義されたガイドラインではありません。
およそ600年前に活版印刷機が発明されて以来続いている、熟練の印刷工と植字工の慣習を反映したものです。
実際、ジェフリー・ダウディング(Geoffrey Dowding)は1966年の著書『Finer Points in the Spacing and Arrangement of Type』で次のように述べています。

初期の印刷工は、何世紀にもわたって写字生が受け入れてきた慣習を受け継いだ。
現代の最高の印刷工がこれを順守しているのは、その忠実さが最も読みやすく職人的な作品を生み出すという、著しく実用的な理由からである。

過去数世紀に印刷された本、新聞、そのほかの読み物は、どれも1行が45文字から75文字になるように設定されていたようです。

しかし「1-1 読むということ」で説明したように、画面で読むのと紙で読むのは違います。
画面で読むことを扱った研究は少ないですが*1、行が長め(最大100文字)でも読むのに悪影響はなく、それどころか読む速度が向上することがあると報告されています。
そのため画面では行をもっと長くしたくなるかもしれません。
しかし同じ研究で、読み手は短めの行の方を好んだことも明らかになっています。
これは重要な発見です。
可読性においては、テキストを素早く簡単に読めるようにするのも大切ですが、読みたいと思わせることも同じくらい重要なのです。

6世紀に及ぶ歴史を遡り、羊皮紙に印刷していた活版印刷時代のように、段落を45文字から75文字の幅に設定しましょう。
ただしこの幅はあくまで参考であり、強制ではありません。
正当な理由があるなら、少しぐらい超えても害はありません。

*1
M.C.ダイソン(M.C.Dyson)「How physical text layout affects reading from screen」、「Behaviour and Information Technology」23/6(2004年)
https://scholar.google.com/scholar?q=%22How+physical+text+layout+affects+reading+from+screen%22

line-heightの設定には単位のない値を使用する p43

CSSでは、行間のスペーシングはline-heightプロパティによって作られます。
このプロパティは驚くほど柔軟で、前述したすべての方法で行間を指定できます。
読みやすさに配慮した行間設定の例を前に紹介しましたが、そこでは16pxのテキストと24pxのレディングでした。
line-heightを使うと、次のいずれかの方法でその行間を指定できます。

line-height: 24px; /* 絶対的な長さ */
line-height: 1.5em; /* 相対的な長さ */
line-height: 150%; /* パーセンテージ */
line-height: 1.5; /* 単位のない乗数 */

単位のない乗数と単位つきの値の振る舞いには、重要な違いがあります。
その違いは子要素がどのように行の高さを継承するかです(たとえば、親の<div>で設定したline-heightを見出しがどのように継承するかなど)。
継承ルールは完全に直感的とは言えないので、最初はわかりにくいかもしれません。
単位のない値を使った場合、乗数がそのまま継承されます。
px、em、%などの単位つきの値では、親での計算値が継承されます。
次のマークアップをご覧ください。
3つのシンプルな<div>があり、それぞれに見出しが含まれています。

<div id="unitless">
	<h1>1 Avoid unexpected results by using unitless line-height</h1>
</div>
<div id="units-pc">
	<h1>2 Avoid unexpected results by using unitless line-height</h1>
</div>
<div id="units-em">
	<h1>3 Avoid unexpected results by using unitless line-height</h1>
</div>

ここで次のCSSを適用します。
すべての見出しの文字サイズは親である<div>の3倍です。
そして<div>のline-heightを3通りの方法(単位なし、パーセント、em)で適用します。

div {
	font-size: 15px;
}

h1 {
	font-size: 45px;
}

#unitless {
	line-height: 1.1;
}

#unit-pc {
	line-height: 110%;
}

#unit-em {
	line-height: 1.1em;
}

単位なしと単位つきで行の高さの継承ルールが異なるため、見出しの行間に違いが出ています。

上の例では、単位のない値で行の高さを設定した場合、<div>内の見出しはレディングが49.5pxになっています。
これは単位のない乗数を継承したからです(45×1.1)。
%とemで行の高さを設定した場合、<div>の見出しはレディングが16.5pxになっています。
これは、親の<div>で算出されたline-heightを継承しているからです(15×1.1)。
予期せぬ結果にならないようにするには、単位のない値でline-heightの設定するのが安心です。

ブラウザのデフォルトよりも行間を広げる p46

スタイルシートのどこにもline-heightを指定しなかった場合、ブラウザはデフォルトのキーワードnormalに関連づけられた設定を使用します。
これはCSSで「1.0から1.2の間」と定義されており、あとの判断はブラウザに一任されます。
しかし通常、ウェブの組版でline-heightが1.2というのは小さすぎます。
画面上で快適に読むには、空間に十分な余裕があった方がよいからです。
まずはline-heightを1.4に設定するところからスタートしてください†。
ただし後ほど説明するように、フォントによって調整が必要です。

†
和文の場合については「和文組版の考え方①」(200ページ)を参照。

書体に合わせて行間を変える p46

快適な行間を設定したテキストの例からは、「カラー」の均一さも見て取ることができます。
カラーと言っても黒やグレー、赤、青などのことではありません。
数世紀にわたって使われてきた比喩的な意味でのカラーのことです。
つまりタイポグラファがカラーについて話すときは、本文のテクスチャ濃度(背景に対する字形の連なり全体の黒み)を指しています。
このカラーは、ページ上のある領域の印刷に要するインク量と考えてもかまいません。
インクが多く必要になるほど、タイポグラフィのカラーは濃くなります。

文字の実際のカラーを変更しても、タイポグラフィのカラーは調整できません。
タイポグラフィのカラーに影響するのは、書体のデザイン、文字間のスペーシング、単語間のスペーシング、行間のスペーシングという4つの要素です。
行間を変えればタイポグラフィのカラーも変化します(行間を狭くするほど、カラーが濃くなります)。
しかしカラーで大切なのは、精度や正確な寸法ではなく、目で見て決めることです。
どう認知されるかがすべてです。
段落の組版をおこなうときには、カラーが斑点や縞模様にならず均一になるようにしてください。
行間が白い縞模様のように見えては、読み手の集中を妨げてしまうでしょう。

カラーの均一化だけでなく、カラーに対して心地よい黒みの量にすることも目指していかねばなりません。
黒みが弱すぎても強すぎても、テキストを読むのが困難になります。
フォントのウェイトはカラーに大きく影響しますが、書体そのもののデザインも同じくらいカラーに影響します。
フォントのストロークが太かったり、太いストロークと細いストロークのコントラストが高かったりすると、カラーは濃くなります。
幅が広くて隙間のあるフォントや、xハイトが小さいフォントはカラーが薄くなります。

カラーの濃いフォント(太くて背の低いフォント)は、行間をやや広げて重さを減らし、全体的なカラーを明るくします。
カラーの薄いフォントには逆の処理をします。
ウェイトが軽くxハイトが小さいフォントの行間を狭めると、画面での存在感が増し、全体的に濃く見えます。

別の考え方をすると、フォントのアセンダーとディセンダーが行間を押し広げているとも言えます。
xハイトの低いフォントでは、アセンダーが相対的に長く、文字同士の上下の間隔を広げているため、行間を狭めて近づけると効果的です。
反対にxハイトの高いフォントを使ったテキストの行は、離す必要があります。

段落の最終行はジャスティフィケーションしない p54

ジャスティフィケーションした段落の最後の行は、必ず左揃えにしてください。
そうしないと単語間に隙間が空きすぎてしまいます。
しかし段落を完璧な長方形として表示したいなど、このルールを破りたい場合もあるでしょう。
デフォルトでは、CSSは最後の行を左揃えにしますが、CSS3ではtext-align-lastを指定できるため、必要であれば最終行を完全にジャスティフィケーションにすることも可能です。

p { text-align-last: justify; }

どのような結果になるかを承知したうえで、慎重にこのプロパティを使用してください。
また連続するテキストのブロック内にある各段落では使わないようにします。

長い段落は中央揃えにしない p63

見出しは中央揃えにしてもかまいません。
序文などの短い段落もです。
スタイル上、中央揃えのテキストは古典的な印象を与えます。
見た目がきれいで、調和や気品、威厳さえも感じられます。
しかし、長い文章の中央揃えは読みにくく苦痛の元となるので、本文を中央揃えにするのは控えてください。

後ろに下がったり目を細めたりするだけでは不十分 p70

プロトタイプはデザインを適切にテストする絶好のチャンスです。
多くのデザイナーは、まるで後ろに下がって絵全体を見渡す油絵画家のように、モニターから離れてデザインを検証します。
また目を細めて視界をぼやけさせ、ページ全体の色、階層、構成を感じ取ろうとするデザイナーもいます。
これらの方法に害はなく、どちらのやり方でもデザインのまとまり具合をすばやく評価できます。
しかしテキストの可読性を判断するには何の役にも立ちません。
可読性を検証するには、組んだテキストを実際に読むしかないのです。

ここで真価を発揮するのが本物のコンテンツです。
クライアントや顧客、上司から本物のコンテンツをすぐに入手できない場合は、デザインするうえで欠かせないものだと主張して、頼み込んで借りられるように尽力してください。
初期のドラフトやほかのソースのサンプルコンテンツを要求してもよいですし、それも無理なら自分が見たことのないテキスト(無作為に選んだニュース記事など)を用意します。
そしてデザインをイテレーションするたびにテキストを変更します。
何から何まで知っている文章では、可読性を判断することはできません。

さまざまなスペース p72

スペースバーを押すと文字間に挿入されるスペースもグリフのひとつで、UnicodeではU+0020でエンコードされます。
通常、スペースは単語間を約0.25em離しますが、標準のサイズというものはありません。
書体デザイナーは、ほかのグリフをデザインするときと同じように各フォントのスペース幅を指定します。

アンパサンドは使いすぎない、凝りすぎない p78

アンパサンド(&)はeとtの2文字を組み合わせた記号で、英語のandに相当するラテン語のetを意味します。
数世紀の間にアンパサンドの形状はめまぐるしく変化し、最近ではetの合字というよりはト音記号に近くなっています。
書体デザイナーは、アンパサンドのデザインになると気が大きくなる人が多いようです。
フォントによっては原型を留めているものもありますが、大幅に進化したものもあります。

アンパサンドは使いすぎに注意してください。
本文では、古典的な効果が特に必要なければandを使用してください。
最近の読み手はアンパサンドにそれほどなじみがないので、文中で使用すると流れが妨げられる可能性があります。

スタイルガイドの中には、アンパサンドはSelfridges & Coなどのように名称にのみ使用すべきと制定しているものもあります。
また一貫性があれば見出しやタイトルなどで使ってもよいとするものもあります。
ロバート・ブリングハースト(Robert Bringhurst)は著書『The Elements of Typographic Style』の中で次のように述べています。

見出しやタイトルでは最良のアンパサンドを使用すること。

このアドバイスは多くのデザイナーの心に留まったようで、調和を無視したアンパサンドが多く出回るようになりました。
しかしブリングハーストは、普通のアンパサンドの代わりに手の込んだものを使うようすすめたわけではありません。
決して凝りに凝ったアンパサンドを使用してほしかったのではないのです。
引き立てたり飾りつけたりすることが目的でないのなら、タイトルには普通のアンパサンドを使用することをおすすめします。
次の図のようにHelveticaの小見出しにBaskervilleのイタリックのアンパサンドを挿入することに、正当な理由はありません。

ブリングハーストが言いたいのは、特に見出しでアンパサンドを使用するときは、見苦しく見えたり、テキストの感じを損なわないよう注意すべきだということです。
このケースではまず、イタリックのアンパサンドはあくまで選択肢のひとつととらえるべきです。
多くの場合、ローマン体(標準の直立した書体)の方が魅力的に見えます。

スペースが限られている場合、アンパサンドは大変便利です。
テーブル、チャート、キャプションなど、文字数が制限されている場所で活用してください。
HTMLへの入力には、必ず文字参照&を使います。
アンパサンドには予約済みの意味があるので(文字参照の入力に使用されます)、直接入力することはできません。

文字サイズはスケールを使って決める p92

タイプスケールの最もシンプルな使い方は、全体を通じて1つのサイズを使用することです。
これは初期のタイポグラファや印刷工が用いたアプローチで、書籍を1つのフォント(同じサイズの1つの書体)で仕上げ、装飾やスペーシングで章などの構成を示していました。
このアプローチが取られた主な理由は、金属活字を鋳造するにのにコストがかかったからです。
しかし現在では、階層やセマンティクスを効果的に伝えるには複数のフォントサイズが必要でしょう。
意味を明確にするための鍵は一貫性です。
そして一貫性のためには、スケールを常に使用することが大切です。

タイプスケールはあらかじめ定義された文字サイズのセットです。
デザインの面で選択肢が制限されるため、組版に規律と一貫性がもたらされます。
デジタル活字全盛の今、整数ではない端数のピクセルに至るまで、ほぼ無限ともいえる文字サイズが選べるようになっています。
しかし活版印刷の時代は、活字ケースに並ぶ金属製(または木製)の活字からなるスケールを使う以外ありませんでした。

16世紀になると、ヨーロッパのタイポグラファは活字サイズのセットを標準化するようになりました。
それから400年経った今でも、ワープロやレイアウトソフトウェアにはプリセットという形でこのスケールが残っています。
これは依然として現代のタイポグラフィの基礎であり、バランスと調和の取れた一連の文字サイズを与えてくれるものです。

伝統的なタイポグラフィックスケールは、よく音楽のスケール(音階)と比べられますが、これにはそれなりの理由があります。
スケールには6、12、24、48というサイズがあり、文字サイズがいくつかのポイントごとにきっかり2倍大きくなります。
つまり伝統的なタイポグラフィックスケールでは2:1という比率が繰り返されるのです。
この同じ比率は音楽の周波数にも見られます。
たとえばピアノの各Cの音の周波数は、それより1オクターブ下のCの周波数の倍になります。

音階はオクターブ間の一連の音によって定義されます。
音階の音どうしの数学的関係が、音楽の協和音(または不協和音)の基礎となります。
これらの関係が耳に心地よく(または不快に)聴こえるように、視覚的な関係の調和が心地よくも目ざわりにもなるのです。

音楽は空間だけでなく時間の流れの中に生じます。
聴き手が心地よく感じるのは、個々の協和音の効果というよりも、ある協和音から別の協和音へと移る経過です。
タイポグラフィもまた、時間の流れの中に生じます。
テキストは眺めるのはなく読むために存在するからです。
音楽と同じように、タイポグラフィでは文字サイズの移り変わりによって、読み手は心地よくなったり不安になったりします。

音楽では2音間の距離(短3度、完全5度、オクターブ、長9度など)をインターバル(音程)と呼びます。
タイポグラフィでも2つのサイズ間の隔たりをインターバルと言いますが、ここでのインターバルはあるサイズとその倍のサイズ間にある文字サイズの数で定義されます。
たとえば、伝統的なタイポグラフィックスケールでは、このインターバルが5になっています。
12と24の間には、12、14、16、18、21という5つのサイズがあります。
さらに見ると、12より下のインターバルでは、6、7、8、9、10の5つのサイズがあります。
なおこのインターバルには11というサイズもありますが、後ほど説明するようにこのサイズは例外的なものです。

比率とインターバルを理解できれば、伝統的なタイポグラフィックスケールを数学的に導くのに十分な情報が得られるので、次のようにスケールを再計算して拡張することができます。

次の図は算出したサイズと400年前に使用されていた値の比較です。
ルネサンス期のタイポグラファの直感はかなり正確であるものの、いくつかずれがあります。

まず、伝統的なタイポグラフィックスケールには余分な11ptがあります。
それから、スケール内で完全に協和するはずの4つの音(サイズ)がありません。
さらに、60ptと72ptの音符がフラット、つまり少し下にずれています。
これら2つのフォントサイズは、パイカの倍数に丸められているようなので(1パイカは12ptに相当します)、初期の印刷工程のツールや印刷物で実利的に要求されたものなのかもしれません。

すべてのウェブブラウザがデフォルトで見出しやその他の要素に使用するスケールは、伝統的なタイポグラフィックスケールにかなり近いものです。
ただし、伝統的なスケールからも算出したスケールからもずれるところが2つあります。
基本の文字サイズが16ピクセルのとき、<h5>と<small>要素はともに13ピクセルで表示され、<h3>要素は19ピクセルで表示されるのです。
ブラウザはHTML要素のサイズを相対的に決定するので、この不一致は内部スタイルシートの精度不足が原因かもしれません。

物理的な活字による制約を受けない現代のデジタル組版(およびCSS)では、伝統的なスケールに含まれない文字サイズを指定することも可能です。
この自由さから、タイポグラフィは何でもありの状態となり、デザイナーは相互関係を無視して好きなサイズを使えるようになりました。
まるで音がぶつかり合って協和しない曲を作るかのようです(ぶつかるのは文字ですが)。
タイポグラフィ上の不協和音が目的であればそれもいいでしょう。
しかしほとんどのテキストは調和および協和していた方が効果的なので、スケール内の音符を優先することをおすすめします。
なお使用するサイズの数には制限を設けてください。
読み手のことを考えれば、まずは3つぐらいからはじめて、なるべくシンプルに保つのがよいでしょう。

たくさんのフォントサイズを使用しても、一貫性があれば、総合的にはテキストのセマンティクスが伝わるかもしれません。
それでもやはり、見た目はわかりにくくて複雑なものになってしまうでしょう。
容易に理解できるものにするためには、すべてのメロディを披露しようとするのではなく、1つの和音だけを鳴らすようにしましょう。

最も小さいサイズを先に決める p95

大まかに言うと、テキストにはそれぞれ大きさの異なる3つの種類があります。

1. レファレンス (小)
レファレンステキストとは、但し書きや備考、それに参考文献、辞書、データ表示といった特殊な目的を持つものです。
レファレンステキストは必ずしも小さい文字にする必要はありませんが、印刷ではコスト節約のためしばしば小さくします。
この種のテキストは本文の流れの中で読んでもらうものではないので、たとえ印刷コストが問題でない場合でも、小さめのテキストでかまわないでしょう。

2. リーディング (中)
没入して読んでもらうためのテキストです。
これには通常見出しが含まれ、本文とは違うサイズにする必要があります。

3. ディスプレイ (大)
ディスプレイテキストは、インパクトを与え、感情に訴え、雰囲気を決めるものです。
読むより先に見てもらうことが目的なので、大きめにします。

タイプスケールを使用するときは、最初に一番小さいサイズを決めてから、大きいサイズを選ぶようにしましょう。
こうすれば最小のテキストが小さすぎて判別できないといったことが起きません。

本文からサイズを決めてもよいのですが、その次は必ず最小サイズを定めるようにしてください。
この順番を守らないと、本文のサイズを小さくしすぎたために、レファレンステキストが小さくなりすぎて判別できないという、デザイナーがはまりがちなワナにかかってしまうことがあります。

コンテンツにあわせて代替モジュラースケールを使用する p96

伝統的なタイポグラフィックスケールは何世紀にもわたり使用されてきました。
適切に設定されていれば、このスケールのサイズのみを使用したデザインは心地よい見た目になります。
このスケールさえあれば十分に思えますが、ほかにも有効になり得るスケールがあります。

伝統的なタイポグラフィックスケールの配列はモジュラースケールの一種です。
モジュラースケールは意味ある根拠をもとに配列された、一連の調和するプロポーションです。
モジュラースケールは次の数式で表せます。
fₙは、スケールで番目の位置にある文字サイズです。

f_n = f_o * r^(n/i)
fₙ＝文字サイズ、fₒ＝基本サイズ、r＝比率、i＝インターバル、n＝スケール上の位置。

モジュラースケールの数式を伝統的なタイポグラフィの配列に適用すると、重要な土台(基本サイズ)は12になります。
この12は、印刷で本文によく使用される12pt、それに1パイカが12ptであることを反映した数字です。
前に説明したように、インターバルは5で、400年前に制定された比率は2:1小数でいうと2になります。
先ほどの数学的配列は、これらの数字を次のように数式に当てはめた結果です。

f_n = 12 * 2^(n/5)
fₙ＝文字サイズ、n＝スケール上の位置。

このような数式は、比較的シンプルではありますが、直接使用することを想定したものではありません(できないわけではありませんが)。
それよりもこの数式が示しているのは、タイポグラフィが美術というより工芸であること、そしてデザインの問題に対する創造的なソリューションとして、このように簡単に再利用可能で頼りになるパターンがある、ということです。
モジュラースケールの場合は、ニーズに応じてスケールを仕立てることができ、そのスケールに従うことでデザインの一貫性を確保できます。

基本サイズ、インターバル、そして特に比率を変えることで、テキストや設定のニーズに合ったモジュラースケールを作成できます。
ティム・ブラウン(Tim Brown)のModular Scale*1や本書著者のSimple Scale*2といったオンライン計算ツールを利用すれば、簡単にいろいろ試すことができます。

独自のモジュラースケールを定義するには、まず基本サイズを指定します。
単純に本文のサイズを指定すればよいでしょう(16など)。
比率に関しては、文化的または歴史的に関連する数字を選択すると、恣意的な数字や簡単に割り切れる数字を使用したレイアウトにはない視覚的な調和を得られます。
多くの人はすぐに黄金比(小数で1.618)に手を伸ばすかもしれません。
神の数字とも呼ばれ、自然界やあらゆる古典美術と建築に繰り返し現れるとされる比率です。
コンテンツや読み手の画面比率とは関係がないにも関わらず、この黄金比はほどよく調和のとれたタイプスケールを提供してくれます。

私たちがいる実世界とオンラインの世界では、音程の比率は少なくとも黄金比と同じくらい一般的です。
この比率は、特に画面のアスペクト比やデジタル画像の寸法でよく見られます。
たとえば、デジタル一眼レフカメラのアスペクト比は3:2、つまり完全5度(小数で1.5)です。
完全4度は4:3(1.333)であり、コンパクトカメラや各種携帯電話で撮影したデジタル写真の多くがこのアスペクト比を用いています。
コンテンツに膨大な数の写真が含まれる場合は、画像に関連するスケールを使ってテキストと写真を結びつけてもいいでしょう。

*1
https://www.modularscale.com/

*2
https://simplescale.online/

文字サイズとスケールを画面ごとに調整する p98

ブラウザのデフォルトに近い文字サイズを選択すれば、小さい画面にも無理なく収まる一連のプロポーションが得られます。
しかし、もっと大きいテキストを収容できる大画面にこうしたサイズを適用すると、コントラストが減少し、読み手がひと目で階層を把握するのが難しくなってしまいます。

大きい画面用に別のスケールを選ぶ必要は必ずしもありません。
そのスケールがほかのコンテンツ要素のアスペクト比を考慮して選んだものである場合はなおさらです。
単純に、そのスケールの中から大きめのサイズを選択してください。
たとえば次の図のように、完全4度の4:3比をベースにしたスケールを使用している場合、小中大の画面用に少しずつ大きいサイズを選択していきます。

メディアクエリを使用して、大きい画面に大きいテキストを表示させたい場合、CSSは次のようになります。

h1 { font-size: 2.0625rem; /* 33px */ }
h2 { font-size: 1.5625rem; /* 25px */ }
h3 { font-size: 1.3125rem; /* 21px */ }
h4 { font-size: 1rem; /* 16px */ }
p { font-size: 1rem; /* 16px */ }

@media screen and (min-width: 60em) {
	h1 { font-size: 3.1875rem; /* 51px */ }
	h2 { font-size: 2.0625rem; /* 33px */ }
	h3 { font-size: 1.5625rem; /* 25px */ }
	h4 { font-size: 1.125rem; /* 18px */ }
	p { font-size: 1.125rem; /* 18px */ }
}

@media screen and (min-width: 120em) {
	h1 { font-size: 4.875rem; /* 78px */ }
	h2 { font-size: 2.75rem; /* 44px */ }
	h3 { font-size: 1.75rem; /* 28px */ }
	h4 { font-size: 1.3125rem; /* 21px */ }
	p { font-size: 1.3125rem; /* 21px */ }
}

画面の高さを考慮する p100

ビューポートの幅をベースに文字サイズを指数関数的に増大させるのは、たいていこのケースで問題ありません。
しかしこれはビューポートの高さが幅と比例して増すことが前提になっています。
幅がとても広いビューポートには大きい見出しが合っているように見えますが、ウィンドウの高さがとても低い場合は(読み手側でそう設定していることもあれば、デバイスが珍しい形状をしていることが原因の場合もあります)、テキストが不釣合いに大きく見えたり、一部が切り取られたりすることがあります。
レスポンシブデザインの精神に従うなら、この可能性を考慮しなければいけません。
大きいテキストはビューポートが縦横ともに大きいときにだけ使用してください。
たとえば次のように高さをもとにした条件をメディアクエリに含めます。

@media screen and (min-width: 60em)
	and (min-height: 30em) { ... }

@media screen and (min-width: 120em)
	and (min-height: 60em) { ... }

p102

CSSを記述するときは、後に利用するときのために、すべてのHTML見出しレベル(1から6まで)のスタイルを定義しておくことをおすすめします。
使用する見出しレベルが4つしかない場合は、h5とh6見出しはh4と同じにしておきます。
当然、これらのスタイルは同じになりますが、これらの見出しが思いがけずコンテンツに含まれることになった場合でも、少なくとも一貫性は維持されます。

見出しのレディングは狭くする p102

大きなテキストのレディングは相対的に狭くする必要があります。
本文であれば1.5という行の高さで問題なくても、サイズの大きい見出しでは行間が広くなりすぎて、2行の見出しが2つの別個の見出しのように見えてしまうことがあるからです。

衝突を避ける(意図的なものは除く) p103

line-heightを1に設定(ソリッドと呼ばれます)しないと、見出しの行間がちょうどよくならないことがあります。
この場合は衝突に気をつけなければいけません。
衝突は文字のディセンダーが次の行の文字のアセンダーに触れたり重なったりすることで生じます。
さながら「gが釣りに行ってfを釣り上げた」といったところでしょうか。
このような衝突は、読み手に苦痛や不安をもたらし、判別性を損ねるので、見出しのような重要なテキストでは避けるべきでしょう。
行をまたぐ見出しでレディングを狭くする場合は、この点を必ずチェックしてください。

段落の区切りを適切に示す p108

段落の区切りをどのように示すかは、美観と機能の両面から判断します。
段落はそれぞれ個別の考えを示す単位として使われるものなので、読み手が一呼吸おいてから次の段落を読み進められるようにしてください。
段落間の境界は、明確かつシンプルなものが最適です。

段落の区切りを示すのに、正しい方法も間違っている方法もありません。
あくまでも個人的好みやコンテンツ発信元のスタイルによります。
タイポグラフィ全般に言えることですが、確立され広く認められているパターンを使用して、読み手の支障にならないようにしましょう。
連続する段落ではインデントまたはスペースを挿入して、段落の区切りを示します。
ただし同時に両方を使用してはいけません。

現在のウェブで最も一般的なのは、1行分のスペースで段落の区切りを示すやり方ですべてのブラウザでこれがデフォルトのスタイルとして採用されています。
一方、印刷の書籍や刊行物ではインデントを段落の目印とするのが一般的です。
19世紀以前は、段落間に1行分の空白スペースを挟むのは贅沢だと考えられていました。
当時の印刷はコストが高く、特に紙は高価でした(非常に高価なヴェラムなどの高級品は言うまでもありません)。
一方で画面での「印刷」ではコストを心配する必要がないため、ウェブタイポグラフィの価値を測るものは読み手の体験だけということになります。

インデントを段落の目印とする方法は、エッセイ、書籍、ニュース記事などの比較的長い読み物で有効です。
目は中断させられることなく文章を追うことができ、脳はその中の言葉に没頭できます(言葉そのものに引きつける何かがあることが前提ですが)。
段落間に余白が挟まれると、読みがそのつど妨げられ、次の段落へとスキップしてしまう読み手も出てきます。

同じ理由から、各段落がそれぞれ独立している傾向の強い参考資料などの文献では、空行による区切りの方が読み手は情報を追いやすくなります。
空行によって示される考えが切り替わるので、目的を持ってテキストを追えるようになります。

小説や新聞などと比べると、ウェブの文章は段落ごとに考えが完結したかたまりに分かれている傾向があります。
このスタイルは流し読みする読み手を念頭に置いたものなので、段落間に空行を置く方が適しています。

段落のインデントは1em以上にする p108

段落をインデントするときは、1em以上にしないと明確さに欠けます。
インデントを行の高さと同じにすれば、さらに明確になります。
この場合、段落間に正方形の余白ができることになります。

次のCSSは、連続するすべての段落の1行めを行の高さと同じだけインデントさせています。

p {
	font-size: 1rem;
	line-height: 1.5;
	margin-bottom: 0;
}

p + p {
	text-indent: 1.5em;
	margin-top: 0;
}

タイトル、見出し、テーブル、リスト、画像などの直後の段落はインデントしないでください。

段落間のスペースは1cm以下にする p109

空行で段落を区切る場合は、その間隔が書体サイズよりも大きくならないようにしてください。
読み手の目が疲れず、楽に読めるようにするのが目的です。
たいていは行の高さの半分程度で十分であり、リニアに読むことを前提としているテキストでも、これが適切な妥協点でしょう。

すべてのブロック引用がプルクオートのように見える必要はない p111

プルクオートは本文から一部を抜き出すタイポグラフィの表現です。
目を引く断片によって、視覚的な面白さを加え、流し読みしやすくすることを目的としています。
たいていのプルクオートは本文よりずっと大きなサイズで、本文と並べて配置されます。
これらについては「2-7 見出しとインパクト」で詳しく説明しています。

ブロック引用は引用したテキストの一節を載せるためのもので、プルクオートとは異なります。
小説ではストーリー内で手紙の文面を紹介するものとして報道では公文書からの抜粋などを紹介するものとして使用されます。
チュートリアルやブログ記事などのノンフィンクションでは、仕様や関連するブログ記事からの抜粋を示すために使用されます。
いずれのケースでも、ブロック引用はプルクオートのように注意を引きつける必要はありません。

ブロック引用も本文とは区別できるようすべきですが、過度な強調は不要です。
テキストサイズは本文と同じかそれ以下にし、マージン†より下げて配置します(目安としては、本文の段落と同じだけインデントします)。
右側は特に下げる必要はありません。
引用元に関するクレジットを載せる場合は、引用文の右端に揃え、先頭にemダッシュを使用します。
テキストサイズを本文より小さくしてもよいでしょう。

†
ここでのマージン(margin)は、本文ブロックの四方の余白のこと。

引用符のぶら下げ p111

行の先頭で引用符が使用されると、それに続く文字が少し内側に引っ込み、目障りな隙間ができたり段落の左右が不均等になったりするので、ガタガタして少し読みにくいことがあります。
ブロック引用を引用符で開始する場合は、引用内の最初の文字が他の行の先頭文字と揃うようにしてください。
そのためには、始め引用符を外側にずらすかインデントしてぶら下がる状態にします。
終わり引用符に関しては、テキストの後に続くだけなので特に位置を指定する必要はありません。

始め引用符をぶら下げるには、hanging-punctuationプロパティの値としてfirstを指定します。
値にlastを追加すると、最後の行が長い場合に終わり引用符を右マージンにぶら下げることができます。

hanging-punctuation: first last;

本書執筆時点では、hanging-punctuationプロパティをサポートしているのはSafariだけです。
しかし始め引用符に負のマージン値を指定して元の位置から移動させ、続くテキストを引っ張ることで、同じ効果を得られます。
引用符を直接文に挿入するとなると<span>を追加する必要があるわけですが、ここではクリーンでシンプルなHTMLを維持するため、生成コンテンツを使って引用符を挿入します。

<blockquote class="quoted">
	<p>One more attribute […] too fussy.</p>
	<footer>- Hans P. Schmoller,
		in ‘Book Design Today’,
		<cite>Printing Review</cite>, 1951</footer>
</blockquote>

どの引用符をどの順番で使用するかはCSSのquotesプロパティで指定します。
そして::beforeと::after擬似要素にcontent:open-quoteとcontent:close-quoteプロパティを組み合わせて、テキストブロックの前後に引用符を追加します。

.quoted p {
	quotes: '“' '”' '‘' '’';
}

.quoted p:first-of-type::before {
	content: open-quote;
}

.quoted p:last-of-type::after {
	content: close-quote;
}

負のマージン値を使って始め引用符の位置を指定すると、引用符と文字の間の本来のスペーシングを保つことができます。
短所は、必要な距離はフォントによって若干異なる点です。
マージンをemではなくchで指定すれば、少なくともズレはemスクエアではなくそのフォントの幅を基準としたものとなります。
次の例では、-0.83chというマイナスのマージン値を指定していますが、この値は前のブロック引用で使用したフォントの二重引用符から導き出したものです。
引用符をどれぐらトインデントさせるかについて決まったルールはないので、自分の目で確かめることが重要です(そのときはテキストのサイズを上げるとよいかもしれません)。

.quoted p:first-of-type::before {
	margin-left: -0.83ch;
}

.quoted p {
	hanging-punctuation: first last;
}

@supports(hanging-punctuation: first last) {
	.quoted p:first-of-type::before {
		margin-left: 0;
	}
}

リストは読まれるテキストとして扱う p113

リストもその他のテキストと同じように丁重に扱わねばなりません。
リストをテキストの一節に挿入するときは、テキストと一体化して続いているものとして扱います。
リストは前の段落または見出しから適度なスペースを開けてください(通常は1行の半分ぐらいで十分です)。

アンダーラインでは強調しない p115

ストレート引用符や、ピリオドの後に入れる2つのスペースと同様、アンダーラインもタイプライター時代の遺物です。
一定のウェイトの等幅フォントを機械的に打つタイプライターでは、アンダースコアを文字に重ねてタイプすることが唯一の現実的な強調方法でした。
ウェブでは、アンダーラインは慣習上リンクと見なされてしまうという問題があります。
読み手はアンダーラインが引かれたテキストをクリックしても何も起こらないことに戸惑うことになるでしょう。

偽のボールドとイタリックは使わない p115

プロ仕様の書体は、標準のスタイルをもとにコンピューターが生成したようなボールドやイタリックをファミリーの一員として認めません。
真のボールドやイタリックは、人工的に生成された偽のボールドやイタリックと異なり、初めからボールドやイタリックとして手描きされているか、少なくとも計算によって生じた歪みやバランスの悪さが視覚的に修正されています。
次の図は適切に描かれた真のイタリックと偽のイタリックを比較したものです。
両者の違いはOなどの丸みを帯びた文字で特に顕著です。

Proxima Novaのイタリックは、厳密に言うと真のイタリックではありません。
傾けた立体またはオブリークなどと呼んだ方が正しいでしょう。
オブリークは傾いていますが、ベースとなるローマン体(標準の直立した書体)を視覚的に修正したものです。
これに対し真のイタリックは、そのローマン体とはまったく異なり、一般的によりコンパクトで筆記体に近いものになっています(石に彫ったものではなく手描きに由来しています)。

イタリックはサンセリフ書体よりもセリフ書体でよく使用されます。
サンセリフ書体でのイタリックは、斜めにするだけでなく、微妙な字体の調整もされる傾向があります。
特に立体活字で2階建てのaまたはgなどは、イタリックでは1階建てにされることがあります。

CSS font-styleプロパティを使用して、italic、oblique、normalのいずれかのスタイルを選択できます。
イタリックでもオブリークでもない直立書体を指定するにはnormal(デフォルト)を選択します。
italicを指定すると、その書体ファミリーにイタリックとしてラベルづけされたフォントがあればイタリックが選択され、イタリックがなくオブリークがある場合はオブリークが選択されます。
同様に、obliqueを指定すると、オブリークとラベルづけされたフォントが選択され、オブリークがなくイタリックがある場合はイタリックが選択されます。
いずれのケースでも、イタリックとオブリークのどちらもない場合は、ブラウザが標準書体のグリフを人工的に傾けて偽のイタリックを生成します。

font-styleのこのフォールバックの振る舞いは、イタリックとオブリークが同じような意味で使用できることを意味しています。
ほとんどのフォントがオブリークをイタリックと呼んでいることを考えれば当然かもしれません。
しかしイタリックとオブリークの両方を用意しているフォントもわずかながら存在します。
たとえばSupria Sansなどです。
このようなフォントの場合、obliqueとitalicのどちらを指定するかで表示されるフォントが変わります。

p {
	font-family: "Supria Sans", sans-serif;
	font-style: normal;
}

p.italic {
	font-style: italic;
}

p.oblique {
	font-style: oblique;
}

偽のボールドやイタリックはけっして使わないでください。
たとえそれが帯域幅を節約するためであっても。
詳細は「3-8 ウェブフォントを使用する」で説明しますが、偽のボールドを最初に表示しておき、真のボールドが読み込まれたら置き換えることも可能です。
同じことはオブリークとイタリックでもできますが、イタリックの場合は占める横幅が狭い傾向があり、イタリックフォントが読み込まれた時点でページに目障りなリフローが起こる恐れがあります。

ブラウザに機械的にボールドやイタリックを生成させるかどうかはfont-synthesisプロパティを使ってコントロールできます。
デフォルトではこの値はweight styleになっていて、ボールドとオブリークイタリックの両方が機械的に生成されます。
機械的な生成を無効にするには、font-synthesisをnoneに設定します。
次の例はトップレベルの見出しではオブリークとイタリックの生成を無効にしていますが、偽のボールドは許可しています。

h1 { font-synthesis: style; }

問題の多い機械的なボールドとイタリックですが、真のフォントの読み込みや表示に失敗したときは便利な代替策となります。
機械的な生成を無効にしているときに、イタリックやボールドフォントの読み込みに失敗すると、スタイルが適用されていある箇所の文字が表示されず、テキスト内の重要な構造や意味が失われる危険があります。
機械的な生成を無効にすることが不可欠だったり、純粋な装飾目的でスタイルを適用している場合を除き、機械的な生成を有効にしておくことをおすすめします。

ウェイト p118

ボールドフォントはCSSのfont-weightプロパティで指定します。
これは非常にシンプルで、ボールドにする場合はfont-weight:bold、解除する場合はfont-weight:normalとします。
イタリックやオブリークと同じように、真のボールドフォントが見つからない場合はブラウザが機械的に生成しますが、やはり完璧なボールドにはなりません。

フォントのウェイトにはレギュラーとボールド以外にもいろいろあります。
書体ファミリーの中には、ウルトラライトからエクストラブラックまで全範囲のウェイトを含むものもありますが、いくつかの主要なウェイトだけを用意しているものも多いでしょう。
特定のウェイトを選択するにはfont-weightで数値を指定します。
その基準となるスケールには100から900まで、100区切りの9段階が含まれています。
定義ではレギュラーウェイトはこのスケールの400で、ボールドは700です。
これ以外ではスケールに厳密な定義はありません。
100から900の値は一般的なウェイト名に大体対応していますが、これらはあくまでも近似値です。
フォントのウェイトはたいてい数値化されていませんし、この分類にぴったり一致することもほぼないからです。

あるデザイナーによるミディアムは、他のデザイナーのセミボールドに相当することもあります(これらは事実上、フォントの呼び名にすぎないということです)。
@font-faceルールでfont-weightを明確に設定する場合は別ですが、スケール内のウェイトをいくつか試してみないと、好みのフォントウェイトに到達するのは難しいかもしれません。

9種類のウェイトを持つフォントファミリーはほとんどありません。
存在しないフォントウェイトを指定すると、その値に最も近いウェイトが使用されます。
ボールドウェイト(600以上)であれば、その次に太いフォントが選択されます。
ライトウェイト(500以下)では、その次に細いフォントが選択されます。
ブラウザでの機械的な生成も可能ですが、細いウェイトからボールドを生成するしかできません。
ウェイトをボールドより太くしたり、細くしたりすることはできません。

数値によるウェイトシステムは1996年にCSSが登場したときから仕様として備わっていますが、当初からその目的は、広範囲のスタイルをサポートすることでした。*1

100から900という数字が使用されていることには意味があります。
将来的にそれらの中間の値もサポートしたいというのが、
3桁の数字を使用する理由のひとつです。
――ホーコン・ウィウム・リー(Håkon Wium Lie)、CSSの共同開発者

任意の整数値は、バリアブルフォントと一緒にCSS Fonts Level 4に導入される可能性もありますが(「3-8 ウェブフォントを使用する」を参照)、CSS3の段階では100単位でしか指定できません。
それ以外の数字を指定すると、ブラウザはそれを最も近い値に丸めるのではなく、無効なスタイルルールと見なして無視してしまいます。
正しい振る舞いではありますが、ブラウザのサポートが追いつくまでは、細かいスケールでの指定は問題になりやすいでしょう。

*1
ホーコン・ウィウム・リーによるCSS Working Groupへの投稿(2015年1月)
https://lists.w3.org/Archives/Public/www-style/2015Jan/0078.html

リンクは明確かつ控えめにする p120

ハイパーリンクは、オンライン上のあるリソースと別のリソースをつなぐデジタルメディア特有の機能です。
クリック可能なリンクは、World Wide Webに「網」を張り巡らすもので、ウェブが利用され、成長し、現代社会に組み込まれるために欠かせません。

完璧なリンクは明確でありながら控えめです。
目立ちすぎることなく、クリックできることを伝えます。
多くの場合は文脈からリンクの存在は明白で、サイトナビゲーション、参考文献のリスト、検索結果などは特に説明がなくてもリンクであることがわかるはずです。
問題になりやすいのは本文内の単語やフレーズにハイパーリンクを設定したインラインリンクです。
インラインリンクでは、読み手がなるべくスムーズに読み進められるようにすることと、リンクの存在をはっきりと示すことの間で妥協点を探らねばなりません。
デフォルトのアンダーラインを引いた鮮やかな青のテキストでは、読み手の注意を過剰にひいてしまいます。
このようなリンクはきれいに刈られた芝にできたモグラ塚のようです。

テキストは左揃え、数字は右揃え、見出しはデータに揃える p134

テーブルは読んでもらうためのものなので、テーブル内のテキストは中央揃えにしないでください。
ほかの場所のテキストと同じように左揃えにします。
テキストは狭い列内に収まることになりますが、ジャスティフィケーションはせず、右端は不揃いのままにしてください。
ジャスティフィケーションではまるで川がテーブルの下方向に流れているように見え、混乱や読みにくさの原因となります。
ただしテーブルの列にひどい凸凹ができてしまう場合は、ハイフネーションを有効にしてもかまいません。

数字は右揃えにすると、縦方向に流し読みしたときに簡単に大きさを比較できます。
こうした流し読みをしやすくするには、数字データの表記が一貫している必要があるので、数字の位は必ず揃えるようにしてください。

一貫性を維持し、内容を把握しやすくするため、見出しの位置はデータに合わせます。
たとえば、数字データの列の見出しは右揃え、テキストの列の見出しは左揃えにします。

小数点に揃える p135

状況によっては、数値の精度をコントロールできる立場にない場合や、データが同じ有効数字に丸められていて精度が一定でない場合があるでしょう。
このような場合、数字の列をただ右揃えにしただけでは、縦方向に流し読みしたとき、小さいのに精度が高い数字は大きい数に見えてしまいます。
こうしたケースでは小数点の位置で数字を揃えましょう。
そうすれば流し読みでもさまざまな形態の数字の大きさを把握しやすくなります。

小数点での位置揃えはHTML4の<td>タグでchar属性を使用すれば理論的に可能ですが、実際にはこれはサポートされていません。
数字を小数点(または任意の文字)で揃えるための最新のアプローチは、text-alignの新しい値を指定するやり方です。
ただし本書の執筆時点では、CSS Text Level 4 Module*2でのサポートは完全とは言えません。

新しい値の構文はシンプルです。
位置揃えの基準となる文字(通常はピリオドかコンマ)を引用符で囲み、スペースを挟んで希望する位置揃えの方法を指定します。
何も指定しないと、デフォルトの右揃えになります。
たとえば、次のコードではデータを中央揃えにして、前の例のように小数点の位置で揃えています。

td { text-align: "." center; }

位置揃えの基準となる文字を変えれば、より複雑なテーブルも利便性の高いものに仕上げることができます。

テーブルにスタイルを適用しすぎない p141

フランスの作家アントワーヌ・ド・サン＝テグジュペリは、「完璧がついに達成されるのは、何も加えるものがなくなった時ではなく、何も削るものがなくなった時である」と言っています。*3

テーブルをスプレッドシートのように見せる必要はありません。
スプレッドシートはあくまでもツールであり、一方テーブルはデータや情報を伝えるためのものです。
スプレッドシートソフトウェアにはテーブルスタイル用の各種オプションが揃っていて、テキスト書式、枠線、背景の塗りつぶしなど、多様な装飾を施せるようになっています。
これらを使えば見た目はきれいになるでしょうが、テーブルの読みやすさには効果がないので、やりすぎないよう注意しましょう。
美しいのもけっこうですが、テーブルは芸術作品ではありません。
色づけしたり装飾を施したりするのではなく、読み手の立場になってデザインすることが大切です。

*3
アントワーヌ・ド・サン＝テグジュペリ著『人間の土地』(原題:Terre des Hommes、英訳書:Wind, Sand and Stars、1939年)

2-7 見出しとインパクト p158

タイポグラフィには、大きく分けて小説と広告看板という2つの役割があります。*1
つまり、没頭させることと割り込むこと、読ませることとインパクトを与えることです。
広告看板は読み手の注意をつかむために組まれたディスプレイ書体でできています。
見栄えがすれば、通常のタイポグラフィのルールはある程度無視できますが、十分注意を払う必要があります。

見出しとディスプレイテキストは、注意を引きつけるためのものです。
場面を設定して人を引き込むことを目的としています。
もし読み手が注意を向けてくれれば、あなたがタイポグラフィのデザインに費やした時間は報われます。

*1
イギリス人デザイナーのヨン・タン(Jon Tan)が提唱した表現。
http://jontangerine.com/

小さい画面でもテキストをディスプレイサイズに設定する p158

「ウェブタイポグラフィが本当に重要な理由」で紹介したように、優れたタイポグラフィは読み手が気づかぬうちにムードと体験全体を向上させることが科学的に実証されています。
ディスプレイテキストのサイズを大きく設定すれば、当然読み手に大きく作用できます。
テキストのサイズを本文の3倍の大きさに設定したとすると、訪問者はそれを「読む」より先に「見る」ことになります。
テキスト設定と使用するフォントの第一印象は、読み手の意識下で情動反応を引き出し(理由とその仕組みについては「3-5 ディスプレイテキストの書体を選ぶ」を参照してください)その後に続くコンテンツのムードを設定することができます。
大きいサイズのテキストは写真と同じように考えてください。
画像としての活字が雰囲気を作り、レイアウトを支えています。

映画のポスター、本の表紙、そして特に雑誌の見開きなどは、この効果を最大限生かしたアプローチで作成されています。
雑誌の見開きページは、大きいディスプレイと同じぐらいのサイズがあります。
文字サイズに関してはしきたりに縛られず、大胆になりましょう。
デザイナーが印刷物で表現するのと同じような最初のインパクトを画面でも目指してください。

視覚的にテキストを中央にするか約物をぶら下げる p168

「2-4 意味とセマンティクス」で、左揃えか右揃えの引用文では引用符をマージン内にぶら下げるべきだと紹介しました。
そうすることで先頭行の文字の開始位置が前のものと揃うので、テキストブロックがより整然として読みやすくなります。
この要件はディスプレイサイズに設定されたテキストでより明快です。

引用符を含むテキストブロックを中央揃えにしているときも、同じように考えられます。
この場合は引用符をぶら下げるのではなく、引用符抜きのテキストブロックを視覚的に中央揃えにしてから、引用符を所定の位置に戻します。

テキストを中央揃えにした場合でも、引用符をぶら下げた場合でも、視覚的な位置揃えは引用符に負のマージンを指定することで処理できます。
次のようにします。

blockquote {
	text-align: center;
	position: relative;
}

blockquote::before {
	content: '“';
	margin-left: -0.6ch;
}

blockquote::after {
	content: '.”';
	margin-right: -1.1ch;
}

繰り返しになりますが、ディスプレイサイズのテキストでは約物を正しく使うよう特に慎重になる必要があります。
ハイフンやストレート引用符の間違った使用は、大きなテキストではより目立ってしまうからです。

行間を調整してカラーを均等にする p170

「2-6 トラッキングとカーニング」で、ボールドフォントではトラッキングを詰める必要があると説明しました。
同じことは行間にも言え、フォントサイズが大きい場合は特にです。
形状がシンプルなサンセリフ書体も、行間をタイトにした方が見栄えが向上します。
まずはline-height:1で行間をソリッドに設定するところから始めましょう。
ウェイトの軽い、細いフォントでは、セリフフォントがひげ飾りなどを収めるのに広めのスペースが必要であるように、少しスペースに余裕を持たせてください。

すべて大文字の場合は、おそらく行間は1未満に設定した方がよいでしょう(0.75あたりから試してみてください)。
一点注意してほしいのは、大文字には縦のストロークが多い点です。
大文字同士の行間を狭くしすぎると、ページが牢屋の鉄格子のように見えてしまいます。

行間を1以下にすると、「2-4 意味とセマンティクス」で紹介したように上下の行が衝突してしまう可能性があります。
単純なルールとしては、アセンダーとディセンダーが衝突しないようにする必要がありますが、審美的理由がある場合はこのルールを破ってもかまいません。
スタイル上の理由から行間をかなり狭くしたいこともあるでしょう。
文字を良い具合に織り合わせて調和や可読性をもたらしたい場合もあれば、あえて読みにくくしたい場合もあります。
ルールは破るためにあります。
もちろん、テキストがそれを求めていて、描いているイメージがそれによって恩恵を受ける場合に限りますが。

縦方向のスペースを一定間隔にする p179

デザインのバーティカルリズム(縦方向のリズム)は、読み手が下に向かって読み進めるときに遭遇するテキストの配置とスペーシングによって生まれます。
行や段落の間のスペーシングが一貫していないと、リズムも一貫性を欠きます。
ページ全体がごちゃごちゃした感じになるだけならまだしも、最悪のケースでは読み手の体験が阻害されることもあります。

バーティカルリズムに沿って構成すると読み手をページ下部へスムーズに誘導できますが、そのためにはタイポグラフィ上の規律が求められます。
面倒な計算がたくさん必要なように思えますが(ちょっとした割り算と掛け算程度なので尻込みすることはありません)、優れた組版で大切なのは数字であり、この細やかな配慮が成功への鍵となります。

ページのバーティカルリズムは、本文の行の高さを指定した時点で設定されます。
本文テキストを16px、行の高さを21pxとした場合、縦方向のスペースの基本単位は21pxになります。
ページにバーティカルリズムを持たせるには、マージンやほかのテキストの行の高さなどを含むすべての縦方向のスペーシングを21の倍数にしてください。
堅固で信頼できるバーティカルリズムは、読み手を引きつけてページの先へと導き、テキストを読み進めさせます。

リズムは段落間のスペーシングで途切れがちです。
ブラウザはデフォルトで上下に1emのマージンを挿入するため、このケースでは段落間に16pxのスペースが追加されることになり、テキストがページのビートから外れてしまうのです。
リズムを維持するには、段落間のスペーシングを基本となる行の高さの倍数にする必要があります。
ここでは単純に、下マージンを行の高さと同じにしてみましょう。

body {
	font-size: 1rem; /* 16px */
	line-height: 1.3125; /* 21px */
}

p {
	margin-top: 0;
	margin-bottom: 1.3125em; /* 21px */
}

段落間のスペーシングを狭くしたいときは、行の高さの半分の値を試してください。

基本設定をリセットして一貫性を維持する p180

ブラウザは、見出し、リスト、ブロック引用、テーブルといったあらゆるブロックレベル要素に独自のマージンを適用します。
すべてのブロックレベル要素の基本設定をリセットして、マージンやパディングを除去すれば、余計な情報がない基礎が得られ、自在にデザインできるようになります。
ほとんどの基本要素は次の記述でカバーできます。

html, body, section, nav, article, aside, h1, h2,
h3, h4, h5, h6, hgroup, header, footer, address, p,
hr, pre, blockquote, ol, ul, li, dl, dt, dd, figure,
figcaption, div, table, caption, form, fieldset { 
	vertical-align: baseline;
	margin: 0;
	padding: 0;
}

見出しやキャプションなどで文字サイズが変わる場合、それらのテキストも基準となる行の高さの倍になるようにしてください。
つまり、基本の文字サイズと異なるものは、どれも21pxの倍数の高さにする必要があるということです。
これは行の高さとマージンを相応に調整すれば実現できます。

仮に小見出しを18pxにする必要があるとします。
各行の高さを21pxにするには、line-heightは次のようになります。

21 / 18 = 1.167

見出しのようなサイズの大きいテキストに本文と同じ行の高さを設定すると、見出しを改行したとき、本文よりも行間が詰まることになります。
しかし複数行にまたがるボールドの見出しでは、これは問題というよりもメリットになるでしょう。

リズムを維持するには、見出しの上下のマージンをフィットするように調整します。
マージンを行の高さと同じ1.167emに設定すれば、バーティカルリズムの単位である21pxと揃います。
見出しの上下に意図的な余白を設けるためにline-heghtを使ってはいけません。
改行した際に2つの見出しがあるように見えてしまうからです。

h2 {
	font-size: 1.125rem; /* 18px */
	line-height: 1.167; /* 21px */
	margin-top: 1.167em; /* 21px */
	margin-bottom: 1.167em; /* 21px */
}

マージンの合計が基本の行の高さの倍数であれば、見出しに非対称のマージンを設定することもできます。
たとえば見出しとその前のコンテンツとの間隔は広げ、後に続くコンテンツとの間隔は狭くするといった具合です。
次の例では上のマージンバーティカルリズムの1.5倍、下のマージンが半分になっています。

h2 {
	font-size: 1.125rem; /* 18px */
	line-height: 1.167; /* 21px */
	margin-top: 1.75em; /* 31.5px */
	margin-bottom: 0.583em; /* 10.5px */
}

一般に、傍注やキャプションなどの補助的なテキストは、本文よりも小さめの文字サイズに設定します。
こうした小さいサイズのテキストでもリズムが維持されるよう、見出しと同じような計算をしてください。
傍注のサイズが14pxだとしましょう。
21pxという行の高さを維持するには、行の高さを1.5に設定します。

aside.note {
	font-size: 0.875rem; /* 14px */
	line-height: 1.5; /* 21px */
}

傍注の行の高さは、実際には本文とは違うものにした方が落ち着くかもしれません。
このような幅の狭いカラムでは、行間も相応に狭くした方がバランスが取れるうえ、本文からの続きのように見えるリスクも回避できます。
それに傍注の行の高さを低くしてもページ全体のリズムは保てます。
たとえば行の高さを18pxにすれば、7行ごとに本文のリズムと揃うのです。
よほど長い傍注でない限り、これが読み手に違和感を与えることはないでしょう。
思慮に富む、完全なタイポグラフィックシステムであることに変わりありません。

メディアの挿入でリズムが乱れてもかまわない p182

図版、ビデオ、テーブル、フォームなどが割り込むと、ページの基本リズムにシンコペーションやバリエーションが生じます。
これらのバリエーションはページ構成に命を吹き込んでくれるものです。
その後に続く本文をもとのリズムに正確に合わせる理由は特にありません。

リズムにフィットさせるためには、画像をリズムに応じてクロップする必要があります。
しかしレスポンシブデザインにおいて、このアプローチはたとえ不可能ではないとしても、極めて難しいでしょう。
可変幅のカラムは画像の幅と高さをさまざまに変化させるからです。
それに何よりも本末転倒です。
装飾としてではなくコンテンツとして使用する画像は、正しいメッセージを伝える目的でクロップすることはあっても、数学的な配置にフィットさせるためにクロップすべきではありません。

バーティカルリズムが最も明らかになるのは本文においてです。
そのテキストを埋め込みのメディアが遮っても、そのメディアの後からまたビートを再開すればよいのです。

ベースライングリッドに盲目的に従わない p183

ベースラインはフォントの文字が立つ地面のような役割を持つ仮想線です。
印刷デザインの世界では、バーティカルリズムの基本単位はベースラインからベースラインまでの距離であり、テキストブロックはベースラインに揃う形で配置されます。

ところがウェブでは事情が少し異なります。
ブラウザではテキストがテキストブロックの上下中央に配置されます。
テキストブロックは細かく正確に調整できますが、挿入された要素によって乱れたテキストの位置を強制的にベースライングリッドに戻す設定ができるInDesignなどのソフトウェアと違い、ブラウザにはベースライン*1という概念がほとんどありません。

ブラウザで共通のベースライン上にすべてのテキストを揃えるには、ごまかしのテクニックがいくつも必要となりますが*2、ベースラインの概念がほとんどないからといって、ページにバーティカルリズムを持たせることができないわけでも、その恩恵が得られないわけでもありません。
ウェブページのレイアウトは、上下を逆さまにしたテトリスのようなものです。
ブロックがページ上部から下へ向かって積み重なり、これらのブロックの中にテキストが入ります。
つまり、テキスト中心の構造になっておらず、これがそもそもベースライングリッドが存在しない理由です。
すべての活字をベースライングリッドに揃えようとするのは、ウェブが何か別のもの、つまり印刷物であるかのように装うようなものです。
バーティカルリズムはベースライングリッドと完全に同じものではありませんが、読み手が求める一貫性と下方向への規則的な進行を提供してくれます。

1つの例外は、異なるサイズのテキストを含むブロックを左右に配置してベースラインを揃える場合です。
この場合、必ずしも揃える必要はありませんが、揃えた方が目に優しいものとなります。
テキストはベースラインではなくテキストブロックの中央に存在しているので、通常はいずれかのブロックを上下に移動して揃える必要があります。

結局のところベースライングリッドは印刷物において最も効果を発揮するものです。
その特徴は裏側のページに注意するとよくわかります。
読んでいる際に光がページに射し込むと、紙が透けて裏側のページの文字の影が見えるのです。
ページの両面でテキストを揃えておけば、ベースラインのずれのせいで読みにくくなることを防げます。
画面ではこの問題が起きることはありません。

*1
CSSでベースラインを揃える方法は増えてきています。
当初は、インライン画像をベースライン上に乗せるためのvertical-align:baselineしかありませんでした。
最近では、隣接するブロックをベースライン上に揃える方法がFlexboxとGrid Layoutモジュールに用意されています。
https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/

*2
トム・ブレディン・グレイ(Tom Bredin-Grey)は、ベースライン揃えのプロジェクトとして執筆した「MegaType」でさまざまな検討や計算をおこないました。
https://medium.com/@tbredin/a-jolly-web-typesetting-adventure-42948ab0d1dd

2-9 配置と構成 p185

レイアウトは本質的にタイポグラフィと結びついています。
必ずしもレイアウトに関するすべてがテキストと関連しているわけではありませんが、テキストに関する事柄を整理して配置し、ページ内の異なる要素間の関係を読み手に理解させ、関心があるものを効率的に見つけられるようにすあるのは、タイポグラファの仕事です。

レイアウトに関連するタイポグラフィの分野を「マクロタイポグラフィ」と言います。
これには全体的なユーザー体験デザインの一部として、情報デザインと呼ばれる要素のさまざまな側面が組み込まれています。
レイアウトに特化にした優れた書籍は数多く出回っていて*1、その多くは本書よりもはるかにボリュームがあります。
この章だけでレイアウトのすべての側面を掘り下げることはできませんが、ページ全体の構造と構成に関する重要な戦略について取り上げます。

*1
特にヨゼフ・ミューラー＝ブロックマン(JosefMüller-Brockmann)著の『Grid Systems in Graphic Design』とハンス・ルドルフ・ボスハルト(Hans Rudolf Bosshard)著の『The Typographic Grid』

レイアウトをコンテンツからデザインする p185

1928年、後にペンギンブックスの主任デザイナーになるドイツ人タイポグラファーのヤン・チヒョルト(Jan Tschichold)が『Die neue Typographie』を執筆し、大反響を呼びました*2。
この中で彼は次のように述べています。

今日ではほとんど忘れ去られていますが、何世紀もかけて開発され、
もうそれ以上は改善できないほどに進化した手法やルールがありました。
完璧な本を制作するには、これらのルールを生き返らせなくてはなりません。

チヒョルトがここで言及しているのは、書籍などの印刷出版物において美しいテキストを作成する、研ぎ澄まされた幾何学的システムのことです。
優れた書籍デザイナーは、コンテンツを製本して物理的な状態にするわけですが、このような紙ベースのデザインはすべて紙から始まります。

紙には決まったサイズと比率があり、すべてのページでこれらが繰り返されます。
つまり物理的なキャンバスであり、チヒョルトの主張はこのキャンバスを想定したものです。
「もうそれ以上は改善できないほどに進化した手法やルール」はもはや通用しなくなりました。
いま私たちは新しい時代にいて、1,000年以上存在してきたデザインやレイアウト理論に挑みかからなければならないのです。
美しい構図を描く定義済みのキャンバスはなく、外から内にというレイアウトアプローチも使用できません。
代わりに、読み手が使用するさまざまなキャンバス(つまり画面)にコンテンツを対応させる必要があります。

ウェブデザイナーには、キャンバスのサイズや種類を事前に選んだり知ったりする機会はありません。
デザインの対象となるテキストや画像について知らないことも多くあります。
ルールを何とか制定して、未知のコンテンツを未知の媒体に向けてレイアウトし、組版しなくてはなりません。
コンピュータがもたらす正確さを前提に、見積もり、推測し、適応させ、妥協しなくてはならないのです。

しかしチヒョルトが言及するルールや手法がすべて過去のものになったわけではありません。
それらを再評価し、媒体が(常にではありませんが、文字通り)ユーザーの手の中にある現代の流動的なコンテキストに応用する必要があります。
対比、反復、整列、隣接のルールを適用することで、コンテンツをもとにしてデザインでき、プロポーションを用いてレイアウトを周囲の環境に合わせることができるようになります。

*2
ヤン・チヒョルト著の『The New Typography』(1995年、初版1928年)。

モバイルファーストの哲学を採用する p186

小さい画面向けのデザインでは、レイアウトにあまり選択肢はありません。
テキストは常に同じ方向、つまり下に向かうことになります。
まるで鍵穴を通して見るかのように、読み手が少しずつ知覚する幅の狭いカラムは、かなり挑戦しがいのあるデザイン環境です。
事前に十分検討しておくことが欠かせません。
モバイルデバイスのユーザーは、たいてい一度にページの一部しか見られず、コンテンツも配置されているというよりは積み重なっているので、優先順位と階層の扱いが成功への大きな鍵となります。

モバイルファーストはデザイン哲学であり、デザインにおいて非常に有用です。
リニアな優先順位を検討しなくてはなりませんが、それには潜在的なあらゆるレイアウトにプラスに働くという嬉しい副作用もあります。
クライアントはもう、ある2つのブロックが同じように重要だと言って終わりにすることはできません(どちらかが先にこなくてはいけませんから)。
優先順位こそ、デザイナーとして知っておかなねばらならない情報です。

デザインするときは小さい画面を中心に据えて、デスクトップモニターなどは追加機能として考えましょう。
皆さんや皆さんの同僚には、モバイルファーストで構築するための独自の開発プロセスがあると思いますが、モバイルファーストという考え方は必ずしもモバイルを先にデザインするという意味ではありません。
2つの極端なニーズが同時に存在しているので、携帯電話とデスクトップ(またはその中間のサイズのデバイス)のどちらかを後から考えるということはしないでくださすべての画面サイズが、このデザイン思考およびプロセスの一部なのです。

個々のデバイスの種類ごとに異なるレイアウトをデザインするのは避けましょう。
これでは無駄骨を折るどころか、偽りの安心感でひと息ついているにすぎません。
デザインは水の姿のようなもので、注がれる器に合わせて連続的に調整されるべきものです。
レイアウト要素が乱れたときは(つまりブレイクポイントでは)デザインを相応に適合させてください。
これこそが真のレスポンシブデザインであり、最も柔軟で長続きするデザインアプローチです。
利便性や保守性のために、予測できるサイズ(小、中、大、特大)への順応をバッチとしてグループ化するのはかまいませんが、あくまでもモジュールの観点から捉えるべきです。
器に合うようにレイアウトを向上させるのであって、決して特定のデバイスのためにデザインするのではありません。

メインのテキストブロックを斜め読みできるようにする p187

「1-1 読むということ」で説明したように、人はセクションからセクションへと飛びながら特定の情報を探して拾い読みをします。
また斜め読みによってテキスト全体にざっと目を通し、単語や文章をところどころ読んでなんとなく内容を理解します。
そして最終的に、興味を持った文節やページ全体をじっくりとリニアに読みます(と願っています)。

本書はここまで、テキストを詳細に検討したり、リニアな読みの体験に配慮したりすることについて扱ってきました。
しかしデザイナーとしてページを考えるときは、タイポグラフィ的視点から離れて、グラフィックデザイナーの視点に立つことが大切です。
グラフィックデザイナーの役割は、読み手がすぐ意味を理解できるようにテキストブロックや画像などを配置することです。
私たちの仕事は斜め読みする人を読む人に変えることですが、どの人も最初は斜め読みするという事実を受け入れ、それに合わせてページをデザインしなければいけません。

人がどのように斜め読みするかについては、文献や情報が豊富に出回っています。
大きい画面では、人はF字型パターンで目を動かす傾向があるそうです*3。

最初は横方向に読み始めます。
通常ここにはメインの見出し、要約、リードなどがあります。
この最初の動きがFの字の上の横棒に当たります。

冒頭で関心を引きつけられなかった場合、読み手は少し下に移動してから再び横方向に目を走らせますが、たいてい最初よりも短くなります。
これがFの字の中央の横棒に当たります。

最後に、読み手はコンテンツの左端を縦方向にざっと読み、これがFの字の縦棒になります。
この動きはゆっくりと慎重な場合もあれば、素早くかたまりからかたまりへとスキップするような場合もあります。
このF字型パターンから、デザインに取り入れるべき次の3つのことがわかります。

1. 全体的な読む体験は最初の斜め読みで決まるので、可能な限りひと目で注意を引き込むようにする
2. 小見出しは明確に識別でき、理解しやすいものにする
3. 左側の端を明確にすることで、ページを下方に進む際の視覚的な手すりを読み手に提供する

*3
Nielsen-Norman GroupのWebページに掲載されたヤコブ・ニールセン(Jakob Nielsen)の記事「F-Shaped Pattern For Reading Web Content」(2006年)。
https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

関係を提示して注意を引きつける p191

コンテンツが少ない場合は、ブロックを画面の中央に配置してもよいですし、ブラウザウィンドウの左端からほどよく離して配置してもよいでしょう。
しかしさまざまな形態のコンテンツがある場合はそれだけではいけません。
小さい画面では、傍画像視覚化したデータ、備考関連リンク広告などの補助的な要素が、メインのテキストブロックの前後や途中に挿入されます。
一方の大きい画面では、これらの要素は安住の地を求めて辺りを漂うことになります。

補足的なサポート要素の配置では、コンテキストを意識することが大切です。
適度な注意を引きつけ、近くの要素と関連づけるように配置します。
ゲシュタルトの法則のいくつかを適用すると、これを実現できます。

ゲシュタルトというドイツ語は「形状」や「形態」と訳すことができ、人がどのように視覚的入力を認識するのかを表します。
ものの見え方はその周囲によって変わります。
全体を見た後では個々の部分に対する認識も変わります。
逆にすべての部分を見た後では全体への理解も変わります。
これはゲシュタルト理論で場の理論と呼ばれるものです。
場とは世界の全体的な見え方で、このケースではデザイン全体になります。
ゲシュタルトの理論によれば、場のすべての属性を調整すれば、個々の部分は気にしなくても、最適な結果にたどり着けます。
全体は部分の総和よりも勝るものではなく、部分の総和とは別物なのです。

アクティブな余白では、ゲシュタルトの法則のひとつである近接がすでに登場しています。

要素をほかの要素の近くに配置すると、それらは個々の要素ではなく、グループ内このパーツと見なされるようになります。
これはある要素を別の要素に関連づける確かな方法です。
たとえば傍注は補足している本文のすぐ横に配置します。

その逆の効果も便利です。
要素の周囲に広くスペースを取れば、隣接する要素との近接性が弱まって、コンテキスト面ではっきり分離できます。

もうひとつの法則は類同です。
似たような特徴を持つ要素は、そうではない要素よりも関連性が強いと認識されます。

類似する特徴の種類に制限はありません(色、形状、サイズ、テクスチャなど)。
読み手は似たような特徴を目にしたとき、それらの要素が互いに関連していると認識します。
リンクにおいて、同じ色は同じ意味を持ちます(未訪問と訪問済み)。
同様に同じサイズの見出しは同レベルの階層にあると判断されます。
サンセリフ書体の小さいテキストはすべて関連していると見なされ、セリフ書体の小さいテキストは関連していながらもサンセリフ書体のテキストとはどこか違うものとして捉えられます。

類同のバリエーションは焦点です。
周囲に類同性のある要素がなければ焦点は生まれないからです。
興味を引いたり、強調されていたり、ほかとは違う要素は読み手の注意を引きつけます。
古典的な焦点としてはドロップキャップがあります。
またサムネイル画像アイコン、マニキュール👉、セクション記号§、装飾引用符“、またはフルーロン❦などもあります。
どんなに小さくても注意を引きつけるものは焦点となりますが、こうした記号類が1ページに多すぎると、互いに競い合ってしまい、焦点というよりも類同性のある要素と見なされてしまいます。

複数の要素を同じ閉ざされた領域内に配置すると、それらはグループ内のパーツであると認識されます。
周囲に線を引けば、それらはグループとしてまとまります。
要素を異なる色の背景上に置いても同じ効果が得られます。

ゲシュタルトの法則と同様、これも自明のことのように思うかもしれませんが、これらを意識しながらページ全体を見ることで、さらに効果的なバリエーションや選択肢が見つかるかもしれません。
たとえば白い背景のページで、複数の関連リンクを暗い背景上にまとめているとしましょう。
関連リンクの背景色がページ上の画像類と合わなかったり混同されたりする可能性がある場合は、関連リンクの背景を白にして、ページの残りを暗い色にすることもできます。
背景色を適用することに問題があるのであれば、リンクの色や書体を変えることでリンクをグループ化してもかまいません。

グリッド p194

階層構造はタイポグラフィの下地となります。
ゲシュタルトの法則は要素をグループ化して関連づけることができます。
グリッドはコンテンツを整理して配置するのに役立ちます。
コンテンツが収まる構造と、情報システムを読み手に触れさせる貫した方法を提供します。

グリッドに当てはまる特徴として柔軟性が挙げられます。
デザインに被せるとグリッドはまるで牢屋の鉄格子のように見えるかもしれませんが、グリッドはコンテンツを待ちうける独房ではなく、コンテンツの収容先を体制から命じられることもありません。
グリッドは整然と組織化された可能性の集まりです。

グリッドの種類 p194

グリッドには基本的に階層型、カラム型、モジュール型の3種類があります。

階層グリッドでは、異なる種類のコンテンツを水平なモジュールでグループ化し、縦方向に積み重ねて整理します。
シンプルかつとても柔軟性のあるグリッドで、各要素の縦の長さ(高さ)に制限はありません。

階層型グリッドは、適度なカラム幅以外には横方向のスペースがほとんど不要なので、小さい画面に適しています。
欠点はグループ間の関係がリニアな階層に制限される点です。

カラム型グリッドでは、縦方向のカラムが横に並んでいます。
関連リンク、画像、広告などの異なる種類のコンテンツを本文の横に並べたいときに最適です。
テキストブロックが複数のカラムにまたがるようにデザインし、カラムグリッドを使ってコンテンツをそのテキストブロック内に配置したり、特定の位置で横に配置したりもできます。

モジュール型グリッドはカラム型グリッドと似ていますが、行も一定間隔で配置されれているので、ページの縦横に格子状のモジュールが並びます。
各モジュールにそれぞれコンテンツを含めてもよいですし、モジュールをさまざまに組み合わせて、シンプルな長方形やスクラブル†のようにレイアウトしてもかまいません。
モジュール型グリッドには正確さと柔軟性の両方が備わっているので、クリエイティブでありながら規則正しい構成を実現できます。
欠点は、外から内、つまりキャンバスファーストのアプローチに強く依存するところです。

複雑なモジュール型グリッドは、ウェブにはあまり適していません。
読み手がグリッド全体を認識でき、各要素の関連性を寸法や並びなどから認識できて初めて効果を発揮するものだからです。
モジュール型グリッドで意図通りに各要素を配置するには、文字サイズ、画面寸法、そしてコンテンツそのものを理解してコントロールできることが必須です。
ウェブページではコンテンツが上から下に埋まっていきますが、モジュール型グリッドではコンテンツを正確に二次元の格子状に配置しなくてはなりません。
これらの因子はレスポンシブデザインの要件と競合します。

†
スクラブル(Scrabble)とはアルファベットの書かれたコマをボードに並べて単語を作るゲームのこと。

複合グリッドを使用して柔軟性を最大化 p195

モジュール型グリッドが抱える弱点に対応した理想的な妥協策は、複合グリッドです。
複合グリッドは階層型グリッドとカラム型グリッドを組み合わせたものです。
これは2通りの方法で作成できます。
ひとつはカラム型グリッドの各カラムに独自の階層型グリッドを持たせてコンテンツをグループ化したり分離したりするやり方。
もうひとつは階層型グリッドのそれぞれの階層にカラム型グリッドを適用するやり方です。

後者の方法は、コンテンツに合わせて最適なカラムグリッドを各階層に適用できることから、特に柔軟性に優れていると言えます。
いずれのアプローチでも、ユーザーによる環境設定や画面サイズ、そしてデータベースから注がれる未知のコンテンツに柔軟に対応できます。

均等よりも不均等なグリッドシステムを選択する p196

ウェブ上で見る多くのグリッド、特にCSSフレームワークで使用されているものは、偶数個の同一サイズのカラムをベースとしています。
しかしグリッドでは均等性は必要ありません。
グリッドが提供すべきは一貫性であり、単調な繰り返しではないからです。
各カラムの幅が隣のカラムの1.618倍であるような、黄金比に基づく簡単な非対称グリッドを作ることもできます。
または1:√2の比率で徐々にカラムの幅を狭くするのも効果的です(1つ前よりも1.414倍狭くします)。

広告用に特定のカラム幅を指定し、隣接するカラムにコンテンツを柔軟に流し込みながら読みやすい行の長さを確保するという方法もあります。
グリッドシステムはデザイナーとしての作業を楽にしてくれますが、使用するグリッドには、個人的な利便性ではなくコンテンツと読み手にとって最適なものを選択するようにしてください。
ウェブでよく見るほとんどのグリッドフレームワークに偶数個のカラムがあるのは、デザイン的配慮ではなく数学的処理の結果です。
グリッドが12(それに6、4、3、2)で割り切れることは長所として支持されているものの、コンテンツのニーズとは一切関係がなく、ただ汎用のシステムを提供したいだけにすぎません。

さまざまな媒体で使用されているグリッドの種類を調べてみれば、奇数カラムが一般的であることがわかるでしょう。
たとえば新聞は5カラムか7カラムで組まれることがよくあります。
偶数のカラムは安定しますが、奇数のカラムは効果的な緊張関係をもたらすので、それによって階層をわかりやすく示唆したり、読み手の目をレイアウト上で誘導したりできるのです。

CSS Grid Layout*4モジュールは、モジュール型グリッドの制限のいくつかを解消し、レスポンシブデザインのコンテキストに適合した長所を備えていますが、固定幅の行と列で構成されたキャンバスベースのモジュラーグリッドはウェブでは常に問題の種となります。

*4
レイチェル・アンドリュー(Rachel Andrew)による「Get Ready for CSS Grid Layout」でわかりやすく説明されています。
https://abookapart.com/products/get-ready-for-css-grid-layout

カラムの幅をビューポートの高さに応じて制限する p197

CSSのマルチカラムレイアウトを使用して、幅の狭い文章をページを横切るように配置することもできます。
この方法は、読みやすい行の長さを維持しつつ、導入や補足のテキストをコンパクトに表示させるのに便利です。
カラムは段落などのすべてのブロックレベル要素に設定することができます。
また<div>や<article>などの親をターゲットにすることで、複数の要素に使用できます。
カラムを定義するにはcolumn-widthで最小カラム幅を指定します。

article {
	column-width: 10em;
}

このケースでは、ブラウザは<article>要素を表示する際、各カラムの幅が10emより狭くならず、なおかつカラムの数がなるべく多くなるようにします。
article要素が15em幅の場合、テキストは15cm幅の1つのカラムに表示されます。
article要素が22em幅の場合、11em幅のカラムが2つできることになります。

column-countでカラム数を指定することで、カラムレイアウトを有効にすることもできます。

article {
	column-count: 3;
}

この記述では、どれくらいの幅にすれば利用できる幅内に収まるかは考慮せず、3カラムでテキストがレイアウトされます。
この方法では、テキストの可読性はあまコントロールできません。
column-countとcolumn-widthを組み合わせれば、column-countがカラムの最大数になり、column-widthがカラムの最小幅になるので、カラムレイアウトをもう少し詳細にコントロールできるようになります。

またcolumn-gapを使ってカラム間に間隔をあけたり、column-ruleを使ってカラム間に境界線を挿入したりもできます。

article {
	column-count: 3;
	column-width: 10em;
	column-gap: 1.5em;
	column-rule: 1px dotted #ddd;
}

column-widthで設定したCSSカラムは、ビューポート幅の観点から見れば本質的にレスポンシブです。
しかしカラムの高さがビューポートを超えてしまた場合、読手はカラムごとに上下にスクロールしなくてはならず、わずらわしい操作によって流れが妨げられることになります。
カラム内に含めるテキストの量がわかっていある場合は、垂直方向のメディアクエリを使用して全体を見せるのに十分なスペースがあるときにのみカラムを有効にするようにしてください。

@media (min-height: 25em) {
	article {
		columns: 3 10em;
		column-gap: 1.5em;
		column-rule: 1px dotted #ddd;
	}
}

必要最低限の高さを知るにはテストを繰り返す必要があります。

和文組版の考え方 p200

本書の内容の多くは和文のウェブタイポグラフィにも当てはまるものですが、なかには少し事情の異なる事柄もあります。
ここでは参考までに、和文の組版での考え方を紹介します。

書体の選び方 p200

一般に使われる和文書体には明朝体とゴシック体があります。
ウェブにおける和文の本文書体としてはゴシック体が主流ですが、近年の高解像度画面やウェブフォントの普及を考えると、明朝体も十分に現実的な選択肢になるでしょう。
ただ明朝体の場合、横画が細すぎると画面ではかすれてしまうことがあるため、コントラストが低めの(横画が太めの)フォントを選ぶのがよいでしょう。

和文フォントを選ぶ際はそこに含まれる欧文グリフのクオリティにも目を向けましょう。
近年の和文フォントの中には、欧文グリフだけを抜き出しても欧文フォントに引けを取らないクオリティを持つものもあります。

行の長さ p200

本書では欧文の行の長さ(カラム幅)は45文字から75文字の範囲が好ましいとしています。
和文ではこれらの文字数の半分強、24文字から40文字程度を目安にするとよいでしょう。

文字サイズと行間 p200

同じ文字サイズの欧文と和文を並べると、ほとんどの場合は和文の方が文字が大きく見えます。
そのため和文はより広い行間を必要とします。
本書では欧文のline-heightの調整は1.4から始めるようアドバイスしていますが、和文では1.7程度から始めるとよいでしょう。

また、もし同じサイト内に和文のページと欧文がページがあったり、同じページに和文と欧文を並べて配置したりする場合は、和文の文字サイズをひとまわり小さくし、その上で行の高さが同じになるようにすれば、両者の印象が揃いやすくなります。

3-1 フォントが画面にレンダリングされる仕組み p202

画面は、言葉が生きて暮らしていくには適さない粗野な場所です。
画面から放射する光*1は、紙に反射する光よりも目を疲れさせます。
解像度が印刷物と比べて情けないぐらい低いことも少なくありません。
デバイスの寸法はさまざまで予測できず、テキストの表示方法もシステムごとに大きく異なります。

このような理由から、ウェブ上のタイポグラフィには最大限の注意を払うことが重要です。
テキストが粗雑に表示されると、読み手にとって心地よい場所ではなくなります。
彼らの多くは、天文学者が天体を観察するようにページを流し読みし、時折止まっては細かく読むという行動をとります。
つまり読むうえで障害になることは全力で回避しなくてはならず、そのためには画面上でどのように字形が表現されるかを理解しておく必要があるのです。

*1
Kindleなどのe-inkを採用しているデバイスは除きます。

画面解像度の限界を受け入れる p202

私たちの周りにあるテキストの多くは、印刷物か画面かに関係なく、さまざまな色形状、サイズのドットで構成されています。
デジタルプリンターは微小のインク粒を吹きつけて固着させます。
画面はピクセルと呼ばれる極めて小さい光の点の明滅を放射します。

ここで言う解像度は、所定の領域内にいくつのドットが含まれているかを表します。
画面の場合、ドットはピクセルに当たるので、より厳密に言えば1インチあたりのピクセル数(ppi)となり、1インチあたりのドット数(dpi)は印刷用の単位になります。
ラップトップやデスクトップの多くは、約140ppiの画面解像度を備えています。
アップルのRetinaディスプレイなどの高解像度画面でも400ppi以下です。
一方のプリンターは、比較的安価なレーザープリンターでも600dpiの解像度があり、プロ仕様のデジタルプリンターでは2,438dpiもあります。

解像度が140ppiの画面では、1平方インチあたりに19,600ピクセルが含まれています。
一方、安価なレーザープリンターでも1平方インチあたりのドット数は360,000にもなり、一般的な画面の18倍、Retinaディスプレイの約4倍にもなります。
ドットまたはピクセル数が多いほど、個々のピクセルを識別しにくくなり、より詳細かつシャープに、正確な諧調を表現できるようになります。
このように解像度は重要な要素ですが、しかし私たちデザイナーには手出しができません。

フォントが画面にレンダリングされる仕組みを理解する p203

デジタルフォントは、ベクターデータとしてデザインおよび格納されており、数学的に算出された完全な線や曲線で構成されています。
しかし画面はピクセルで構成されているため、フォントファイル内のベクターデータはどこかの時点でドットに変換され、画面上ではドットとして描画(レンダリング)される必要があります。
このプロセスはラスタライズと呼ばれます。

ラスタライズすると基本的に質は下がります。
結果として、字形をピクセル表示に変換すると、歪んだり判別しにくくなってしまうこともあります。
しかしこれは状況次第です。
テキストレンダリングエンジンやその設定に応じて、フォントファイルのラスタライズの出来が違ってくるので、同じ字形でも著しく異なるピクセルマトリックスになります。

各オペレーティングシステムにはテキストレンダリングエンジンが備わっていて(複数備えていることもあります)、それぞれのウェブブラウザがどのレンダリングエンジンを使用するかをコントロールしています。
つまり同じオペレーティングシステムでも、ブラウザによってテキストの見た目が大きく異なる可能性があるということです。
使用するテキストレンダリングエンジンとその設定は、OSやブラウザのバージョン間でも異なります。
さらにユーザーはブラウザやオペレーティングシステムのラスタライズ設定を変えることもできます。

アンチエイリアスの登場 p203

白の背景に黒いテキストを表示させようとした場合、最も簡単なラスタライズ方法は中心がアウトライン内に納まるピクセルをすべて黒にするやり方です。
このように文字をピクセルグリッドに揃えると、エイリアス化されたテキストになります。
このシンプルなアプローチの弱点は、文字の一部が誤って余計なピクセルも黒にしてしまったとき、文字が見苦しいかたまりのようになることです。
さらに悪いことに、黒にしたピクセルが少なすぎれば、文字が判別できないこともあります。

エイリアス化されたテキストのでこぼこを和らげる方法のひとつが、グレースケールスムージングというアンチエイリアス処理です。
この処理ではアウトライン内に一部収まるピクセルはすべてグレースケールに変換されます。
アウトライン内に収まる範囲が広いピクセルほど濃いグレーになり、完全にアウトライン内に収まるピクセルは黒になります。

液晶(LCD)および有機発光ダイオード(OLED)ディスプレイのピクセルは、サブピクセルと呼ばれる赤緑青の帯で構成されています。
ピクセル内の各色の輝度を変えることでサブピクセルアンチエイリアス効果が得られ、画面の見た目上の解像度とテキストのシャープさが向上します。

よく見るとわかるように、グレースケールスムージングの方がサブピクセルアンチエイリアスよりもぼやけたテキストになります。
これは見解の問題などではなく、レンダリング手法によるものです。
サブピクセルアンチエイリアスでは、画面の各ピクセル内の3つのサブピクセルを使用して、フォントのエッジをより滑らかでシャープなものにします。
一方のグレースケールスムージングはピクセル単位で処理をするので、スムーズさとシャープさは実質的に1/3に減少することになります。
そうは言っても、サブピクセルアンチエイリアスにも欠点があります。
低解像度の画面では、カラーフリンジが現れて文字が少し太くなることがあります。
しかしテキストのシャープさと比べればこの程度の妥協は許容範囲でしょう。

ヒンティング p205

ここまで見てきたように、ベクターデータのピクセルへのマッピングには問題があります。
これは特にモノクロのラスタライズで顕著ですが、グレースケールやサブピクセルアンチエイリアスにも問題がないわけではありません。
そこで登場するのがヒンティングです。
TrueTypeのヒンティングは、字形の輪郭を曲げて形状を少し修正するよう指示することで、ピクセル化された字形を判別しやすくします。

プログラムされたヒンティングの指示には、ステムのウェイト(縦線の太さ)を各字形ごとに揃えつつアルファベットを通じて一貫性を持たせ、かつ元のデザインから外れないようにしながら、アウトラインをピクセルグリッドにスナップする、という手順が含まれます。

ヒンティングは各サイズで1文字ごとに行われます。
とても手間のかかる面倒な処理のように聞こえますが、実際のところその通りです。
基本的な256文字のフォントのヒンティングには、その道のベテランでも80時間ほどかかります。

Verdana、Georgia、Arialなどの主要なウェブ用のフォントは無料だと思われていますが、実際にはVerdanaは、かつてないほど労力と時間を注ぎ込んだ最も高価なフォントと言えるでしょう。
広範な言語に対応した文字が含まれているだけでなく、そうした文字一つひとつが、9pxから60pxまでのすべてのサイズで可読性が高くなるように調整されています。
つまり、890以上の文字がモノクロ用、グレースケール用、サブピクセルアンチエイリアス用にデザインし直されているのです。

自動ヒンティングによる支援 p206

フォントのヒンティングは自動処理することもできます。
手動でのヒンティングには手間とコストがかかりすぎるため、ほとんどのウェブ用のフォントは自動ヒンティングを備えています。
自動ヒンティングはモノクロレンダリングよりもアンチエイリアスの効果がはるかに高く、ヒンティングしないよりはずっとましです。
書体デザイナーでエンジニアのティム・アーレン(Tim Ahrens)*2は次のように述べています。

この世の多くのものと同じように、ヒンティングでも多少手間をかければ
それなりの成果が得られます。しかし、完璧に近づくにはさらなる労力が必要です。
[...] 数時間かけて手動でヒンティングを設定すれば [自動ヒンティング後に]
残った問題の大半を解決できますが、完璧を求めるのであれば、
無制限にとことん時間をかけてやらねばなりません。Verdanaのような
極端な例では、ヒンティングに数週間から数ヶ月かけているはずです。

*2
Typekit blogの「A closer look at TrueType hinting」についたコメントへの返信。
https://blog.typekit.com/2010/12/14/a-closer-look-at-truetype-hinting/

プラットフォーム間のレンダリングの違いを受け入れる p206

フォントをベクターデータから画面上のピクセルに変換する方法をいくつか見てきましたが、これらの手法にはフォントエンジニアと読み手の両方が適用できる設定修正、調整があります。
またプラットフォームやオペレーティングシステム間にも考え方の哲学的相違があり、特にマイクロソフトとその他では大きく異なっています。
以下に例を挙げます。

・ヒンティングを使用するのはWindowsのみです。
その他のオペレーティングシステム(macOS、iOS、Android、Linuxなど)はヒンティングを用いません。

・携帯端末(iOSやAndroidデバイスなど)では、サブピクセルアンチエイリアスではなくグレースケールスムージングが使用されます。
物理的にサブピクセルは横方向に並んでいるため、デバイスを回転させるとアンチエイリアスが正しく機能しないからです。
Windowsベースのモバイルデバイスは、グレースケールスムージングとヒンティングを組み合わせて使用しています。

・LCDおよびOLEDのデスクトップやラップトップといった画面の向きが固定されているものに関しては、デフォルトでサブピクセルアンチエイリアスが使用されます。
Windowsマシンはサブピクセルアンチエイリアスとヒンティングを組み合わせて使用しています。

マイクロソフトは正確さよりも鮮明さを優先させるというスタンスです。
マイクロソフトのラスタライザであるDirectWriteは、ヒンティングを使用して文字を全体のピクセルグリッドに揃えようとするものですが、結果としてレギュラーウェイトが軽めに見えたり、ボールドがより太く見えたり、小さい文字サイズではデザインの微小なディテールが失われたりすることがあります。
これに対してアップルをはじめとするほかのメーカーは、書体のデザインをできるだけ維持することを目指しています。
アップルのCoreTextラスタライザは、テキストをできるだけオリジナルのベクターデータのまま表示しようとし、場合によっては画像としての鮮明さを犠牲にすることもあります。
つまり低解像度画面の場合(200ppi未満)、Windowsユーザーはぼやけの少ないよりシャープなテキストを見ることになり、その他の環境のユーザーは正確ながらもよりぼやけたテキストを見ることになります。
1つのシステムに慣れている人はこの状況に戸惑うかもしれませんが、書体デザイナーのクリスチャン・シュワルツ(Christian Schwartz)はこう述べています。*3

私たちの目標はすべての見た目を良くすることにあり、
すべてを同じにすることではありません。
だってコート紙と非コート紙でも書体の見た目は変わるわけですから。

現代はデジタルデバイド(情報格差)の時代です。
同じように画面上でのフォントのパフォーマンスにも差が生まれています。
低解像度画面ではテキストをレンダリングするためのピクセル数が少ないので、作りが未熟なフォントは問題を起こしやすく、ラスタライズをめぐる主観性も表面化しやすいです。

一方、高解像度画面ではテキストのレンダリングは落ち着いています。
ピクセル数が多い分、鮮明さが正確さに追いつき、ラスタライズの方針はあまり意味をなさず、そして一貫性が勝利を収めます。
いずれフォントヒンティングが過去のものになることは明白です。
インターネットに使われる機器の半分以上を占めるモバイルデバイスでは使用されておらず、高解像度画面でもニーズはかなり低いからです。
しかしマイクロソフトがヒンティングのサポートを継続し、膨大な数のユーザーが低解像度ディスプレイのWindowsマシンを使用しているという状況が続く限り、向こう10年は維持されるでしょう。
そうは言っても、大量の手動ヒンティングへの需要が減ってきている状況は、すべての書体デザイナーが歓迎するところです*4。
ほとんどのケースでは自動ヒンティングが用いられ、そこで漏れたものを手動で調整するようになっています。

*3
Ampersand NYCのコンファレンスにて(2013年11月2日)。
http://nyc.ampersandconf.com/

*4
TypeDrawers掲示板の「Is type hinting for screens still relevant?」トピックをめぐるやり取りを参照してください。
https://typedrawers.com/discussion/comment/24051/#Comment_24051.

白抜き文字の場合に限りサブピクセルレンダリングを無効にする p208

サブピクセルアンチエイリアスは、低解像度のmacOSの画面で1つ大きな問題を抱えています。
テキストが白抜きになっている(暗い背景上に明るいテキストがある)とき、明るい背景上の暗いテキストよりもウェイトがかなり重く描かれる傾向があるのです。
この問題は大きいテキストでより顕著で、全体が別のウェイトのように見えることもあります。

このような場合、ベンダー固有のプロパティを使ってサブピクセルアンチエイリアスの代わりにグレースケールスムージングを使用するようブラウザに強制できます。

h1 {
	background: #000;
	color: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

これらのプロパティは注意深く使用してください。
サブピクセルアンチエイリアスはグレースケールよりもはるかに読みやすい環境をもたらしてくれるので、テキストを白抜きにしている場合(できれば大きいテキストのみ)に限り無効にするようにします。
本文ではある程度の違いはあっても問題になりません。

フォントを各種プラットフォームでチェックする p209

最近では大半の画面が高解像度になってきているので、レンダリングの質に関する話題はここまでにして、書体デザインそのものに話を戻しましょう。
現時点で言えるのは、使用するフォントが各種プラットフォームやブラウザでどのようにレンダリングされるかを必ずチェックすべきということです。
一部のフォントはほかよりもきれいにラスタライズが行われますが、問題は見た目の美しさだけではありません。
デザインがいい加減だったり、ヒンティングがなかったり貧弱だったりするフォントは、判別性に影響してテキストを台無しにすることがあります。

テストは早い段階から何度も行います。
Macで作業している人はテスト用にWindowsマシンの購入を検討してください。
安価なラップトップで十分で、画面も低解像度の方がフォントの問題が露見しやすいのでおすすめです。

作業を画面でしか確認しない印刷デザイナーも、作業を自分のマシンでしか
確認しないウェブデザイナーも、ユーザーを無視した傲慢な人たちです。
――A List Apart サイトに掲載されたディーン・アレン(Dean Allen)の「Reading Design」の記事より

ウェブデザイン全般に言えることですが、デバイス間ですべてが同じようにレンダリングされることを期待してはいけません。
自分の選択をベースに、何かがただ違って見えるだけなのか、または質が低下しているのかどうかを評価します。
仕事ではPC、家ではiPad、スマートフォンにはAndroidを使っているユーザーも、それらのデバイスを並べて比較することはなく、自分が使うデバイス間の違いに慣れるものです。
読み手の体験を損なっていないか、何かが壊れているように見えていないかを自問してください。
タイポグラフィの観点から見て、問題なく読み続けることができますか？
書体が情緒的および構造的に必要な役割を果たしているでしょうか？
答えが「ノー」の場合、違うフォントに変える以外の選択肢はあまり残されていません。

3-2 実際的および実用的考慮事項 p210

多くのデザイナーにとって、デザインプロセスのハイライトは書体の選択です。
それは私たちを夢中にさせる、啓発的で、知的で、喜びにあふれまた仕事であると同時に、アーティストや学術者としてではなくデザイナーとして取り組むべき仕事でもあります。
皆さんの役割は、知りえる範囲の要件と制約にフィットするフォントを選ぶことです。
テキストに求められる声のトーンやメッセージ、感触にマッチする書体を主観的に選択する前に、プロジェクト全体の客観的ニーズを考えてください。

いつも使用している書体がそのテキストに関する実際の考慮事項に対応しているなら、それを選択するのもありでしょう。
また、もちろん実用面の基準を満たしていることが前提ですが、いつか試したいと思っていた新しい書体を試すのもよいと思います。
タイポグラファとして書体を選ぶときの第一の責務は、最終的な選択が目の前の仕事に対して「間違っていない」と保証することです。
そうすれば、残るのはその選択が「どの程度正しいか」という主観的な意見だけになります。
客観的なニーズに見合い、最終的な選択にクライアントが満足しているのであれば、その仕事はうまくいったと考えてよいでしょう。

すぐにフォントを選択しない p210

プロジェクトの最初で書体を決めないでください。
まずはデザインにおけるタイポグラフィの方向性を定めることに時間を割きましょう。
こうすることで書体が使用される文脈や状況がよりクリアになっていきます。

どのフォントを使用するかは、特定の要件、文脈、制約、信頼性、そして最後は好みで決まります。
決断に向けてまず、可能性のある候補をリストアップしてそこから絞り込んでいきましょう。
このリストに加えたフォントは、実際のニーズを必ず満たしている必要があります。
求められる役割を果たさない書体を選択肢に入れても意味がありません。
美的または情緒的な判断を下す前に、実用的な要件を考慮してください。

目的と要件を理解する p211

まずフォントで何をする必要があるのかを完全に把握しておきましょう。
優れた庭師は全体の輪郭を頭に入れて作業を進めます。
作りたい形、映したい影、生み出したい色やテクスチャがすべて頭に入っているのです。
これらの条件を把握して初めてどの苗木をどこに植えればよいかがわかります。

デザインしているウェブサイトの性質をよく理解してください。
将来についても考えましょう。
今は小さなプロジェクトですが、いずれ大きくなりますか？
今後もっと複雑な機能を要求されるかもしれません。
選択するフォントの全般的な目的をつかむことも大切です。
読み手を没頭させなくてはいけないのか、それとも流し読みで十分なのか？
ナビゲーション、ラベル、フォームコントロールなどの多くのインターフェイス要素をスタイリングする必要はあるか？
注、通知、警告、キャプションなどのマイクロコピーの数は？
但し書きやテーブル形式のデータは？
ディスプレイテキストは読むというよりも見るものとして組むのか？

必要な文字が揃っている書体を使用する p211

フォントの全般的な目的を理解したらまず、必要な文字、アクセント、約物などを調べます。
当然のことながら、選ぶフォントは書き手の文章に必要とされるすべての文字を含んでいなければいけません。
言うまでもないことと思われるかもしれませんが、たとえばイギリスの全国紙のウェブサイトでさえ次のようなことが起こるのです。

この例のCesc Fàbregas(セスク・ファブレガス)は世界的に有名なスペイン人サッカー選手の名前です。
本書の執筆時点ではイギリスのプレミアリーグでプレーしています。
カタルーニャ語のàが別の書体でレンダリングされていて、外国のバーに迷い込んだ大胆な旅行者のように目立っています。
ファブレガスは毎週のように新聞のサッカー記事に登場しているにも関わらずです。

ここで何が起こっているのかを理解しておきましょう。
ブラウザがテキストをレンダリングするときは、文字を一つひとつ個別に見ます。
そしてfont-familyスタック内の書体のリストを巡回して、レンダリングする文字のグリフを含むフォントを探します。
このケースでは、最初に選択されたフォントはàの文字を含みませんでしたが、巡回先の別のフォントが含んでいました。
このようにしてウェブは、プラットフォーム間で利用できるフォントの違いと、個々のフォントがサポートする文字範囲の違いに対応しています。

書体は、ウェブページが対象としているすべての言語に対応できるものを指定してください。
トピックによっては(サッカーや化学など)、テキストの主言語に含まれていないグリフが使用される可能性があることも頭に入れておきましょう。
正式なドイツ語表記ではHaßfurtなどでエスツェット(ß)が必要ですし、トルコ語ではFırat Üniversitesiなどで点のないiが必要になることがあります。

無償で配布されているフォントには、重要なアクセント記号や通貨記号などの文字、それに一般的ではない約物が含まれていないことがあります。
サンプルのテキストでテストしてください。
良心的なフォントサービスやファウンドリーではフォントを購入する前に試せます。

必要なスタイルが書体に備わっていることを確認する p212

本文はレギュラーウェイト、引用と強調はイタリック、見出しにボールドというように、デザインスキーム内で書体のさまざまなスタイルを使用することがあります。
情報階層のシステムにおいて、見出しの一部またはすべてをセミボールドにしなければいけない場合もあるでしょう。
ディスプレイテキストを極細で大きくレンダリングしたいこともあるでしょう。

特定のテキストを決められた領域内に収めたり、キャプションを限られたスペース内に配置する必要があるかもしれません。
これらのケースではコンデンスト書体が必要です。

1つの幅と4つのスタイル(レギュラー、ボールド、イタリック、ボールドイタリック)しか備えていないフォントファミリーは珍しくありません。
中には4つより少ない書体もあります。
たとえば、ジョン・バスカヴィル(John Baskerville)は自身の名を冠した書体のためにボールドを作らなかったので、忠実に復刻されたBaskervilleにはイタリックはあるもののボールドはありません。

レギュラー、ボールド、イタリックはあってもボールドイタリックがないというフォントもあります。
デジタル世代には不要ということなのでしょうか。
トーマス・ガブリエル(Thomas Gabriel)が2009年にデザインした、本書(監訳者注:英語版原書)で使用しているPremiéraもボールドイタリックを含んでいません。

必要な機能と特殊効果を備えたフォントを選択する p212

検討しているフォントで使えるOpenType機能も調べておきましょう。
必要な機能が利用できますか？
無償フォントの多くには備わっていません。
繊細なタイポグラフィによって伝統的な感じを出したい場合は、スモールキャップ、古典的合字、オールドスタイル数字などの有無を確認してください。

コンテンツに多くのテーブル形式のデータが含まれていますか？
含まれている場合は、等幅のライニング数字も必要となるでしょう。
指数表記はありますか？
上付き文字や下付き文字、数学記号は必要ですか？

フレンドリーで魅力的、または子どもに優しい見た目にしたいですか？
スタンダードな2階建てのaやgが、1階建てバージョンの代替としてフォントに用意されているかもしれません。

流麗なスワッシュや任意の合字などの装飾を使用して、フォントを通常よりも目立つようにしたり、ディスプレイテキストをユニークで自信に満ち溢れたものにする必要はありませんか？

フォントのパフォーマンスを考慮する p213

技術的な観点からフォントのパフォーマンス(処理速度)について考えてみましょう。
読み手が使用する特定のデバイスまたはオペレーティングシステムはわかっていますか？
読み手のインターネット接続は遅かったり不安定だったりしますか？

レンダリング p213

「3-1 フォントが画面にレンダリングされる仕組み」で、フォントのレンダリングがマシンやプラットフォームによって異なることを説明しました。
候補に挙がったフォントは、ターゲットとするデバイスでテストし、テキストのレンダリングが正常におこなわれることをチェックする必要があります。

ファイルサイズ p213

ダウンロード速度は誰にとっても重要です。
これは通信の高速化と広範囲なブロードバンドが普及している今でも変わりません(ヨーロッパや北アメリカでもまだまだなので、ほかの国々は言うまでもありません)。
プロジェクトによってはパフォーマンスが最優先事項となることもあります。
膨大な文字セット、ヒンティング、カーニング、OpenType機能などが詰まった半ダース以上の100Kbのフォントファイルで読み手を爆撃する前に、彼らの状況を考慮してください。

ウェブアプリのユーザーにはウェブフォントを注意深く提供すべきかもしれませんが、雑誌やじっくり読むタイプのページの読み手はもう少し忍耐力があるでしょう。

パフォーマンスを優先するあまり、ボールドのフォントファイルがダウンロードされず、偽のボールドが使用されるといった事態にならないよう注意してください。
どうしてもパフォーマンスを譲れないのであれば、ボールド抜きのデザインソリューションも検討することが大切です。
読み手は偽のボールドそのものには気づかないかもしれませんが、どこか違和感を感じるものです。
ウェブフォントのファイルサイズに関する詳細については「3-8 ウェブフォントを使用する」を参照してください。

予算を超えないよう、ただし無償のものには用心を p214

フォントの候補を決めるにあたり、最大の鍵となるのが予算です。
プロジェクトまたはクライアントはウェブフォント用の資金を用意していますか？
用意されていない場合、彼らを説得するか、自分の日給で費用を負担しなければなりません。

いくつかの注目すべき例外を除き、優れた書体にはお金がかかります。
結果的にオペレーティングシステムやソフトウェアにバンドルするなどして無償配布されることになったとしても、優れた書体は膨大な時間をかけてデザイン、処理、開発されているからです。

無償配布されているフォントの中にも、十分な文字セットと機能を備えた優れものがあります。
すぐに思い浮かぶのは、Source Serif、Open Sans、Lato、Clear Sans、Merriweather、Fira、Overpass、Alegreyaなどでしょう。
一方、無償フォントの多くには制限があるので、何が足りないのかを把握して、できないことを求めないようにしてください。
無償または安価な書体では、要件に適合させるためにより多くの手間が必要になります。

ライセンス p214

フォントのライセンスにはいくつかの形態があります。
簡単にまとめると、無償のもの、一度限りのセルフホスティング代金で買えるもの、サービスを通じてレンタルできるものがあります。
多くの場合、価格はページビューや帯域幅によって変わります。

あなたの会社やクライアントがウェブフォントサービスのサブスクリプションを利用している場合は、そのサービスに絞ってフォントを探すことをおすすめします。
通常、これらのサービスでは何千種類という書体から選べるようになっています。
サービスを利用していない場合は、フォントのセルフホスティングも可能です。
ほとんどのファウンドリーはセルフホスティングをオプションとして提供しているので、選択肢はより広がります。
多くはウェブフォントサービスを通じたフォントの提供もおこなっていますが、どちらか一方のオプションしか提供しないファウンドリーも一部あるので、混乱の原因となることがあります。

すべての書体がウェブフォントとして利用できるわけではありません。
デスクトップ用に購入したフォントをウェブフォントに変換するのは簡単ですが、この行為がライセンス契約の内容に違反する可能性もあります。
このような場合はファウンドリーに問い合わせて最適なソリューションを見つけてください。

ブランド要件に対して現実的に対応する p215

ブランド独自のフォントを持っている会社やクライアントが、そのフォントをデザインに取り入れるように要望してくることがあります。
このようなときは、これまで説明してきた実際の考慮事項にそのブランドフォントが対応しているかを確認してください。
十分に対応していなかったとしたら、ブランドに合う代替書体を使用できますか？
指定された書体が本文に適さない場合、ブランドフォントは見出しだけに使用し、本文用に別のフォントを組み合わせられますか？

過去に購入して今でも日常的に使用している書体があるかもしれません。
まったく違うフォントを自由に使用できることもあれば、指定のフォントを異なる方法で使用してみることもあるでしょう。
タイポグラフィで大切なのは、書体そのものではなく、書体を使って何をするかであることを忘れないでください。
基本的な材料だけでもおいしい料理を作れるのです。

書体のジャンルは分類法よりも役立つ p225

書体をリニアダイナミックサンセリフなどと説明する方法とその理由について見てきました。
堅牢ながらも快適に読め、堅苦しさのない書体を探しているのであれば、この種のデザインを選ぶとよいかもしれません。
しかし、残念なことにほとんどのフォントベンダーは、「リニアダイナミックサンセリフ」のようなここで紹介した用語を使ったカテゴリーにはグループ化していません。

特定の種類の書体を探しているときに直面する問題のひとつが、書体に統一的な分類体系がないことです。
しかしそれも仕方ありません。
ミュージシャンを既存のジャンルに当てはめるが難しく、議論を呼ぶことがあるように、書体デザインも主観的でジャンルにとらわれないものだからです。
数百年の間に多くの人が無秩序な状態を何とかしようと試みましたが、そのほとんどは歴史的な文献に寄った学術的で難解な結論に至ったのみで、実際に受ける印象や使用感の観点に立ったものにはなりませんでした。
この流れを見渡しても、これらのスキームは私たちに矛盾と戸惑いに満ちた専門用語を残したにすぎません。
昔のファウンドリーの中には「エジプシャン」や「アンティーク」をスラブセリフの意味で使っていたところもありました。
フランス人はサンセリフを「アンティーク」と呼び、ドイツ人は「グロテスク」、アメリカ人は「ゴシック」と呼びます。
ヨーロッパでは「ゴシック」をブラックレターの意味で使うことがあります。

業界標準に最も近い分類スキームでも、ほぼ間違いなく問題が多く、現代での使用に適していません。
Vox-ATypI分類は、1921年にフランスのタイポグラファあるフランシス・ティボドー(Francis Thibaudeau)の発案で始まりました。
この分類はもっぱらセリフのフォームをベースとしており、何世紀にも及ぶさまざまな時代のスタイルを区別するのに使用されています。

ティボドーのシステムをマクシミリアン・ヴォックス(Maximilien Vox)がさらに発展させ、1954年に彼自身のバージョンが発表されました。
彼はティボドーによる分類のメイングループを継承し、それらに象徴的な活版職人の名前にちなんだ名前をつけました(garaldeはGaramondとAldusを合わせたもので、didoneはDidotとBodoniを合わせたものです)。
彼はサンセリフデザインにも適応できるようにシステムを拡張しましたが、この時点ではまだHelveticaが登場していなかったこともあり、拡張した分類もすぐに役に立たないものとなってしまいます。

ヴォックスのシステムは、1960年に多少の修正を加えた状態でATypI(Association Typographique Internationale)に引き継がれました。
その後、1964年にドイツ規格協会(DIN)、1967年に英国規格協会(BSI)で国際標準として認められたものの、今では撤回されています。
このVox-ATypIシステムは、これ以降特に目立った更新もされていません。

現代の多くの書体デザインによって、Vox-ATypI分類は不十分なものになってしまいました。
不可解な命名スキームはさておき、Vox-ATyplは歴史的経緯や初期のセリフ書体の微妙な違いを区別することに比重を置きすぎています。
サンセリフとスラブセリフに関しては一般化しすぎており、これらの書体がその後広く発展し人気を博したことを考えると大いに問題があります。
また現代の書体の多くは歴史を継承しているものの、書体デザイナーはさまざまな時代やスタイルからアイデアを得て、そこに現代の嗜好やニーズを融合させているので、そうした書体を1つの歴史的カテゴリーに当てはめることはできないのです。

実情はそうだとしても、Vox-ATypIの用語を理解し、それらが現代的な特徴による分類とどのように一致したり重なったりするのかを理解することには意義があります。
しかしその前に簡単に歴史を振り返っておきましょう。

歴史を学ぶ p226

Vox-ATypI分類スキームは歴史と結びついています。
これがスキームが衰退した理由のひとつですが、書体がいつどこで生まれたかを知ることは勉強になりますし、なぜそのようなスタイルになったのかを歴史的背景を含めて説明できるようになります。
書体の歴史、伝統、地理を知ることは面白いだけでなく、フォントを選択するプロセスも楽にしてくれます(活字オタクにしか気づかれないであろう恥ずかしい間違いを回避することもできます)。

西洋の書体は、ヨーロッパでヨハネス・グーテンベルク(Johannes Gutenberg)活版印刷を発案した600年ほど前に登場しました。
グーテンベルクが発案した書体はブラックレターで、本の制作を一任されていた修道士や写字生によるレタリングをベースにしたものでした。
現代ではお馴染みのいわゆるローマン字形は当時は手書きされていて(カロリンジャン体として知られています)、グーテンベルクが印刷機を登場させてから数十年と経たないうちにローマン体として登場しました。

以降、さまざまな書体ジャンルが登場しましたが、いずれも初期のデザインに置き換わるようなものではなく、あくまでも候補のひとつとなったにすぎません。
現在ではデジタルフォントがほとんどですが、15世紀の書体デザインは今でも現役で使用されています。
次に紹介する年表は、特定のスタイルがいつ使用され始めたかを示すもので、見本書体は可能な限りその時代のものを使用しています。

15世紀：オールドスタイルセリフ p226

ローマン書体のもともとの形状は、人間味のあるヒューマニストセリフでした。
そのフォームはダイナミックで、斜めのストレスと緩やかなモジュレーションを持ち、低から中程度のコントラストがあります。
大きく分けてeのクロスバーに角度がついているヴェネチアンスタイルと、eのアイが小さいフレンチまたはダッチスタイル(17世紀に登場)の2つに分類できます。
通常は両方のスタイルにブラケットがあり、場合によっては非対称セリフが使用されることもあります。
例：Jenson、Centaur、Garamond、Bembo。

18世紀前半：トランジショナルセリフ p227

手書きを模写した字形から徐々に離れていったのがトランジショナル(またはリアリスト)セリフです。
これらはよりラショナルな性質を備え、たいてい垂直のストレスを持っているほか、コントラストはより高く、プロポーションは均整のとれたものになっています。
オールドスタイルセリフよりもxハイトは大きく、アパチャーはより閉じられ、ブラケットセリフを持ち、しばしば涙形ターミナルをともないます。
例：Caslon、BaskervilleBell、Bulmer、Scotch Modern、Bookmano。

18世紀後半：ラショナルセリフ p227

モダンセリフとも呼ばれ、極端なリアリストフォームを持っています。
直立するラショナルフォームと、縦方向の太いステムと横方向の細いヘアラインからなる高いコントラストを備えています。
字形は一貫性を持って構成されており、ボールターミナルがあるのが一般的です。
19世紀にはこのスタイルはさらに誇張されて、ディスプレイ目的のフォントデザインに使用されます。
例：Didot、Bodoni、Walbaum。

19世紀：リアリストサンセリフ p227

最初のサンセリフは異様なもの、変わったものとみなされたことから、文字通り「グロテスク」と名づけられました。
産業革命の到来により、紙と印刷コストが安価になったことから、比較的大きいサイズの活字を組むのが経済的に可能になりましこの時代、ディスプレイサイズの活字は木から作られていましたが、それもこうしたデザインの形状がよりシンプルになった理由かもしれません。
リアリストサアンセリフ書体は、トランジショナルセリフのような直立したラショナルフォームを持ち、比較的低コントラストなリニアストロークと狭めのアパチャーを備えています。
初期のフォームには、2階建てのgと斜めの足を持つRもあります。
20世紀中頃になると、よりオープンでxハイトが大きいネオグロテスクが登場します。
例：Franklin Gothic、Akzidenz Grotesk、Helvetica、Univers。

19世紀：ラショナルスラブセリフ p227

サンセリフと同じ時期にスラブセリフも登場しましたが、こちらも最初はディスプレイ用でした。
当初のスタイルは、当時浸透し始めたリアリストサンセリフにブロックのような長方形のセリフが追加されたものでした。
がっちりとしたラショナル低コントラストデザインは印刷状況が悪い場合も使用に耐え、ボールターミナルとブラケットセリフをともなう字形が開発されました(Clarendonとしてお馴染みです)。
例：Serifa、Clarendon、Century Schoolbook。

20世紀：ジオメトリックサンセリフとジオメトリックスラブセリフ p228

1920年代にドイツで開発されたジオメトリックサンセリフは、すでに普及していたグロテスクをより合理化させたものでした。
文字は円または矩形をベースとする視覚的に補正された幾何学的なフォームで形成され、コントラストはごくわずかです。
aとgは通常1階建てでした。
スラブセリフも幾何学的なフォームになっていきます。
Lubalin GraphがAvant Gardeに手を加えたものであるように、しばしば既存のサンセリフにスラブセリフがつけ足されました。
例：Futura、Avenir、Century、Gothic、Lubalin Graph、Memphis。

20世紀：ヒューマニストサンセリフ p228

20世紀初頭の工業化の流れとは対照的に、ルネッサンス時代のオールドスタイルセリフを彷彿させるダイナミックフォームを持ったヒューマニストサンセリフが登場しました。
字形は手書き風で、たいてい真のイタリックを備えていました。
例：Gill Sans、Frutiger、Syntax、Optima。

20世紀後半：コンテンポラリーセリフ p228

多様なフォーム、低コントラスト、大きいxハイト、広いアパチャー、ずんぐりしたセリフが特徴です。
デザインは実用的で機能性が高く、細部が簡素化されているので、低品質の紙、低解像度の印刷および画面に適しています。
例：Fedra Serif、Premiéra、Skolar、Georgia。

20世紀後半：リバイバルと合成 p228

20世紀後半、書体デザインを取り巻く環境は大きく変化しました。
金属や木材に置き換わるデジタルフォントの登場と、インターネットを使用した配布チャンネルにより、利用できる書体の数が劇的に増えました。
デザイン面では、現代の書体はリバイバルまたは合成のいずれかだと言えるでしょう。
格言にもあるように、オリジナリティとは記憶力が悪い人たちが主張するものです。

リバイバルとは、過去の書体を作り直したものを指します。
この数百年の間に登場した象徴的なデザインをデジタルで具象化し、現代の組版で使用できるものにしたものです。
中にはラーズバーグクィスト(Lars Bergquist)のBaskerville 1757などのように、デジタルフォント時代の初期に作られた低品質バージョンを修正して、金属活字の感じを忠実に再現しようとしているものもあります。
また古典デザインを現代のテイストに合わせて手直ししたり、最新のテクノロジーで利用できる文字セットや機能などで拡張したりしたものもあります。
マーク・シモンソン(Mark Simonson)のBookmania、クリス・ソワーズビー(Kris Sowersby)のFounders Grotesk(20世紀初頭のサンセリフをベースにしています)などがその例です。

現代のもっとも興味深い書体の数々は、歴史的カテゴリーに簡単には分類できません。
蓄積された知見を元に、異なるスタイルを合成し、多様なフォームを結合させたデザインになっているからです。
たとえばジョス・ブイベンガ(Jos Buiveng)のCallunaでは、しっかりとしたトランジショナルセリフにオールドスタイルのフローとダイナミックフォームが組み合わさっています。
またHoefler & CoのSentinelは、Clarendonのようなラショナルスラブセリフにコントラストを加え、
セリフを減らすことで可読性を向上させたもので、19世紀のオリジナル書体にはなかった真のイタリックも用意されています。
TypeTogetherのヴェロニカ・プリアレン(Veronika Burian)とホセ・スカグリオーネ(José Scaglione)による多彩なバリエーションを誇るAbrilは、2つの相補的フォームを持つ書体として一からデザインされています。
ディスプレイスタイルは高コントラストのラショナルセリフフォーム、本文用スタイルは低コントラストのトランジショナルフォームをベースにしていますが、両者は同時期にデザインされているので、形状や特徴に一貫性がありうまく調和します。

書体デザインは著作権で保護できない p229

リバイバルや派生デザインは完全に容認されています。
アルファベットの著作権の話にまでなってしまうため、書体デザインを著作権で保護することはできないからです。
デザイナーとして主張できる権利は、書体名に対する商標ぐらいです。
このことが原因で、ここ数世紀に数多くの似たような書体、あるいはそっくり同じ書体が違う名前で出回るようになってしまいました。
しかし現代ではデジタルフォントはソフトウェアとして扱われ、ソフトウェアは著作権で保護されています。
つまり単純にデジタルファイルをコピーしてフォント名だけを変えることはできないのです。
ただ、あるフォントに含まれるすべての文字を出力し(すべてのウェイトおよびスタイルで)、そこから個々のグリフのベクターデータを新規に作成することは可能ですし、そうしてできたフォントの文字間のスペーシングやカーニングを調整したり、複数のサイズを複数の材質の用紙でテストしたり、ヒンティングをしたり、複数の画面でテストしたりもできます。
あとは新しい名前を考えるだけです。

テキストに沿った書体を選ぶ p247

アメリカのタイポグラフィのコミュニケーターであるベアトリス・ウォード(Beatrice Warde)は、1955年に発表したエッセイ「クリスタルゴブレット」の中で次のように述べています。

アイデアを愛する人は言葉も愛しているに違いない。
彼らは言葉がまとう服に強烈な関心を持っている

この言葉でウォード氏は言いたいのは、人が着ている服で判断されるように、テキストもその書体で判断されるということです。
書体は言葉にとって服のようなもので着ている服がその人の何かを表すように、使用している書体もテキストや書き手の何かを表すのです。

書体は、テキストの特性を尊重し、明らかにしてくれるものを選びましょう。
テキストの内容について考えるのはもちろんですが、重要なのは文章の特徴をつかむことです。
テキストが醸し出す雰囲気をうまく表す言葉を考え、その感じやムードをデザインに取り込む必要があります。
たとえばテキストが重い病気に関する内容であっても、言葉は楽観的で、誰かを大切に思う気持がほのかに伝わってくるのであれば、ヒューマニストサンセリフのようにタッチが軽めの書体が適しているでしょう。
また学術研究を報告する内容の場合は、よりまじめで権威を感じさせるトランジショナルセリフなどの書体がふさわしいと言えます。

製薬業界に関するテキストをデザインする場合を考えてみましょう。
テキストのトピックや特徴、それがより広範なブランドとコンテキストを踏まえたものであるかどうかによって、取るべきアプローチは違ってきます。

・化学工場やエンジニアリングに関する内容には、グロテスクスラブセリフなどのインダストリアルな感じの書体が適しています。
・ジオメトリックサンセリフのシンプルで科学的な書体を使用すれば、化学ラボの雰囲気を醸し出すことができます。
・研究成果の発表などでは、現代的なヒューマニストセリフのしっかりして学術.的な書体が必要となります。
・健康とウェルビーイングの感じを出したい場合は、ヒューマニストサンセリフがぴったりです。

ここでウォードの例えに戻りましょう。
会場がウェブページの利用者で埋め尽くされており、テキストがスピーチとして伝えられるとします。
演説者はどのような服を着ていていますか？
その理由は？
「3-3 書体を知る、書体を探す」を参照し、その服装がどのような書体に置き換えられるかを考えてください。

最終的に書体を選ぶ際は、安くてみすぼらしいスーツもあれば、丁寧に仕立てられたスーツもあることを思い出してください。
スーツが与える印象はフィット感とデザインのディテールによって変わってきます。
演説者が親しみやすさを出すためにジーンズにTシャツというカジュアルな服装をしていても、みすぼらしかったり、だらしなかったりするとは限りません。
ジーンズにTシャツであっても、ぱりっとしてこぎれいだったり、現代的できちんとしていたりする場合もあります。

ニュートラルな書体というものは存在しない p248

ニュートラルとされる書体を選ぶことはできません。
それは書き手が何も意見を述べず、言いたいこともなく、内容にわざと魂をこめていないと言っているようなものだからです。
ニュートラルな服を着るということもあり得ません。
退屈で、予想どおり、ありきたり、当たり障りのない服装も、決してニュートラルではないのです。
奇をてらわない服を選ぶのも決断であり、ニュートラルではありません。

ニュートラルな書体にしたいということは、俗に言う「退屈」な書体、つまり何のじゃまもせず、アイデアがよく映える書体が必要ということでしょう。
優れた退屈な書体は、書体そのものに関心が向かないよう、可読性を重視して慎重にデザインされています。
物静かで信頼性が高く、便利なうえ、十分なテクスチャによって読み手に気づかれることなく彼らを導けます。
それは決してニュートラルでも、特徴を欠いた書体でもありません。
意図して作られた繊細なデザインなのです。

歴史と文化がテキストと共鳴する書体を選ぶ p249

書体には、いつどこで何のためにデザインされたのか、過去にどのように使用されたのかなどの歴史があります。
これらは、私たちがこれまでの人生で培ってきたさまざまな連想と結びつきます。
ある特定の文脈の中でフォントを目にするたびに、より多くのことをフォントから連想するようになります。
書体は場所に関する感覚きます。
書体の歴史的および文化的な特徴がテキストの内容と調和するようにしてください。
フォントをテキストやデザインと対峙させるのではなく連携させようとするなら、読み手側の連想によって自分の伝えたいことが補完されるようでなければいけません。

取るべきアプローチはいたってシンプルです。
テーマが明らかに近代のことのであれば、最近の書体を選びます。
歴史的な内容であれば、より古い書体(またはオールドスタイルを継承している書体)を使用します。
クライアントの組織の創設年に作成されたフォントが見つかる可能性もありますが、そのフォントが内容に適している確率は低いでしょう。
執筆者が女性だった場合、たとえばキャロル・トゥオンブリー(Carol Twombly)、ヴェロニカ・ブリアン(Veronika Burian)、ニコル・ドーティン(Nicole Dotin)、フリーダ・サック(Freda Sack)、ズーザナ・リコ(Zuzana Licko)、ニーナ・ストーインジャ(Nina Stössinger)などの女性がデザインした書体を使用するという方法もあります。*1
書体やテキストがすべて女性らしくあるべきだと言うつもりはありませんが、まったく無関係でもないので、書体を絞り込む条件のひとつにはなるでしょう。

オランダに関するテキストであればオランダ人デザイナーによる書体を選択するのもよいかもしれませんが、この場合の選択は簡単ではないでしょう。
なにしろオランダはどこよりも国民1人あたりの書体デザイナーの数が多い国だそうですから。*2
現代だけでもざっと数えてエリック・バンブロックランド(Erikvan Blokland)、ジョス・ブイベンガ(Jos Buivenga)、ルーカス・デ・グルート(Luc(as) de Groot)、マーティン・マジョール(Martin Majoor)、フレット・スメイヤーズ(Fred Smeijers)、ジェラルド・アンジャー(Gerard Unger)という6人の名前が浮かびます。
それに4世紀さかのぼれば、ダッチテイストヒューマニストセリフとアントン・ヤンソン(Anton Janson)の時代です。
これらのデザイナーによるすべてのフォントがオランダ関連のテキストに合うわけではないのは明らかで、オランダらしさを感じさせないことすらあるでしょう。
しかし候補の中にオランダ人デザイナーの書体が含まれているのであれば、それが最有力候補となる可能性はあります。

そもそも正しいフォントとは、プロジェクトの実際的および主観的条件をすべて満たしているものです。
古代エジプトに関する文献をすべてPapyrusにしないように、たとえば19世紀初期のイタリアに関するテキストには、その時代に近いBodoniを使うことで低解像度画面で高コントラストの恩恵を受け損ねるよりも、より堅牢な最近のフォントであるダルトン・マーグ(Dalton Maag)のBressayあたりを試した方がよいでしょう。

*1
書体と女性については「Alphabettes」を参照してください。
http://www.alphabettes.org/

*2
ピーター・ビリャーク(Peter Bilak)によるTypothequeの記事「Dutch Type Design」(2004)の中で、オランダ人デザイナーであるジェラルド・アンジャー(Gerard Unger)が語っている内容を参考にしています。
https://www.typotheque.com/articles/dutch_type_design

調査する p250

書体がテキストに適しているか、適していないか(こちらの方が多いかと思います)は、書体に関する情報を掘り下げるとわかります。
デザイナーやファウンドリーのウェブサイトにアクセスするか、書体見本帳(多くのものは美麗で収集欲をそそる上、無料です)を手に入れましょう。
書体の背景情報はその書体に注ぎ込まれた膨大な量の考えや研究を反映しています。
デザイナーの中には、なぜその書体を作成したのか、どこからインスピレーションを得たのか、どんな用途を想定しているかなどを述べている人もいます。

フォントが過去にどのように使用されてきたかを調べるのも忘れないでください。
書籍や雑誌に加えて、Fonts In Use*3やTypewolf*4などの便利なウェブサイトも活用しましょう。
中には気づかないうちに不適切なトピックやスタイルに結びつけてしまっていることがあるかもしれません。
テキストが語っていないことを広めようとする書体は選ばないよう心がけてください。
伝えたくないものを伝えるべきではありません。

*3
Fonts In Use
https://fontsinuse.com/

*4
Typewolf
https://www.typewolf.com/

書体見本を作成して候補を絞る p250

「1-7 レスポンシブな段落」で、レスポンシブなプロトタイプ内でタイポグラフィックデザインをテストすることについて説明しました。
書体の見本を作成し、並べて比較してみましょう。

候補を絞り込み、ブラウザベースのより詳細なプロトタイプでそれらを試します。
ページには段落のほか、見出し、小見出し、リスト、テーブル、キャプションなど実際にありそうなコンテンツを含めましょう。
またボールドやイタリックその他の使いそうなスタイル(スモールキャップなど)も含めるようにしてください。

サンプルや見本は本文の書体を評価しやすくするためのものです。
したがって見本で使用するコンテンツもできるだけリアルなものにする必要があります。
見本のコンテンツはあなたが読みたいと思えるものにしてください。
よく練られたコンテンツが的確に配置されていれば、あなたが引き出したいコンテンツの個性を書体が適切に表しているかどうかに集中できるようになります。
また、どこかの時点でクライアント名または会社名を見本に含めるようにしてください。
思いがけずそれらに書体が合っていなかったという事態は避けなければいけません。

これから多くの異なる書体を評価することになるでしょう。
以前はこの作業に多くの時間と手間がかかりましたが、今ではほとんどのウェブフォントサービスやフォントベンダーで、わずかな料金でライブラリ全体をテストできるようになっています(最終的に書体を決めてサイトを公開する際にフルライセンスを購入します)。

さまざまな環境で書体を判断する p252

書体の堅牢さ、テクスチャ、カラーなどは、考えうるあらゆる環境でテストしましょう。
読み手がどのような状況でデザインを見たとしても、あなたが書体の選択に費やした労力と配慮が彼らにとってプラスに働かなくてはいけません。
見本は多種多様なデバイスに読み込んでテストすることが大切です。

ユーザーがコンテンツを目にする状況を想像してください。
通勤時にスマートフォンで開き、長い通勤時間を利用してテキストを熟読するかもしれません。
もし内容に興味を持った上に読みやすいと感じたのなら、会社に着いた後もデスクトップラップトップでコンテンツに戻ってきてくれるでしょう。
家であればタブレットを起動してくれるかもしれません。
評価のプロセスでは、こうしたさまざまな状況や起こりそうなシナリオで検証することが重要です。

自分の好みを信じる p252

書体の選択自体がデザインとなるべきではありません。
あくまでもテキストと組版を支えるためのものであるため、「3-2 実際的および実用的考慮事項」で触れたように、プロジェクトの性質を理解したうえで選択する必要があります。
そして最終的な決断は、有力な候補のリストから主観的に下すことになります。

リストを絞り込む過程でProxima Novaが最終候補に残ることはまずないでしょう†。
しかしネオグロテスクの特徴を備えたジオメトリックサンセリフがプロジェクトにフィットすると客観的に判断し、実用的な候補からProxima Novaを選択した場合、その最終決断は自分の趣味や好みであるということになります。
ある特定の書体に魅了されるのは楽しいものです。
書体に魅せられるということは、いかなる時にもその書体に興味が引かれるということです。
書体を試したい理由には、ここまでの2つ章で紹介した実用的なもの以外にもたくさんあります。
名前やデザイナーで書体を選ぶこともあれば、自分にとって特別な意味がある、美しい、挑戦しがいがある、購入したが実践で使用する機会がなかったなどの理由で選ぶこともあるでしょう(「3-9 ライブラリを構築する」を参照)。
対象となるプロジェクトに適さないものではない限り、すべてが書体を選択する正当な理由となり得ます。

†
Proxima Novaは2010年頃にウェブフォントとして大流行しましたが、非常に多くのサイトで使われたために飽きられてしまい、その後あまり使われなくなったという経緯があります。

3-5 ディスプレイテキストの書体を選ぶ p253

ディスプレイテキストの使命は誘惑することにあります。
コンテンツに読み手を引き込むのが目的です。
効果的なタイポグラフィによる誘惑は表情豊かで力強いものですが、確固たる美的判断には決断力とスキルが求められます。

かしこまらず、押しつけず、ありふれたものにせず p253

あたりさわりのない無味なものや安全パイとされているものを選んで責任放棄するようなことはやめましょう。
ディスプレイ書体には適切さが必要ですが、独自の特徴と効果も持たせるようにしましょう。

書体を通じて感覚に働きかける p253

「2-7 見出しとインパクト」で、ウェブページを訪れた人はディスプレイテキストを「読む」前に「見る」ことを紹介しました。
これはテキストおよびウェブサイト全体が何を表現しているかを書体によって即座に伝えるチャンスです。
フォントの選択と組版によって雰囲気が作られ、訪問者の感情を微妙に変化させます。

活字をどのように組むか(サイズ、スペーシング、カラー、コンテキスト)は、読む体験の良し悪しに大きく関わってきます。
組版の品質は読み手の印象に大いに影響しますが、その中で最も影響力があるのが書体の選択です。

本文用の書体の選択で重要なのは可読性を優先させた実際的な判断をすることです。
もちろん書体が発するメッセージも重要ですが、優先度は低く、その効果も微細でしょう。
しかしディスプレイテキストではその効果が絶大です。
印象的なタイポグラフィは読み手に強い印象を植えつけ、ウェブサイトに対する印象に直接影響します。

私たちは書体を意識的に知覚し、文字の並びを解釈して単語を理解します。
しかし書体は私たちの潜在意識にも働きかけています。
すべての視覚的刺激と同様に、書体も扁桃体、つまり古来から人類の防御および生存システムに直結している脳の部分で処理されます。
左右の脳の奥深くにある扁桃体は、記憶、決断、感情的反応の処理において主要な役割を果たします。
このシステムにおける扁桃体の主な機能のひとつは、感覚と生物学的ニーズとの間の関連性を形成することです。
たとえば丸くて柔らかく甘い食べ物を美味しいと感じたり、固くてギザギザしたものを辛いまたは危険と感じたりするのは、扁桃体がそれらの体験を通じて関係性として保持しているからです。
同じ体験が繰り返されるたびに、関連性は強化され、いずれ扁桃体を通じて本能的なものになっていきます。

多感覚タイポグラフィの専門家であるサラ・ヒンドマンは、書体が人の潜在意識にどのように働きかけるかを研究しています。
カンファレンスで行ったデモンストレーションでは、フォントが料理の味に影響を及ぼすことが実証されました。
ジェリービーンズが入ったボウルの近くに丸みを帯びたフォントを配置するとより甘く感じられ、ギザギザの傾いたフォントを配置すると同じジェリービーンズの味がより酸っぱく感じられたのです。
科学的に証明されているわけではありませんが、ヒンドマンは同じデモンストレーション*1を各所で行っていて、いずれも同じ結果になっています。

つまり書体の選択は何らかの形で感覚に直接影響を及ぼすということです。
感覚に影響を及ぼすことができるのであれば、書体によって読み手の印象を変えることもできます。
書体だけで読み手の感情を変えることができるのです。
これは大きなチャンスです。
読み手に何らかの感情をうながすことができるのですから、読み手に何を感じてほしいのか、読み手の気分にどのような影響を与えたいのかを考えてください。
禁煙キャンペーンであればタバコをやめたい気持ちにさせる書体を、長編の報道記事であれば読み手の興味をそそるような書体を、南国の楽園に関することであれば休息や安心感を与える書体をそれぞれ選択します。

タイポグラフィは単に情報を伝えたり、感覚、感情、情緒に訴えるだけではありません。
信頼性やトーン、コンテンツに対する先入観を刺激します。

この例で使われている大胆な丸みを帯びた書体から感じ取れるのは、難しい教科に対するグチというよりも、「モフモフの子猫が大好き」といったところでしょう。
次の例も予想を裏切りそうな組み合わせです。

ディスプレイテキストはウェブサイトのコンセプトや特徴と人を結びつけ、これから読むであろう内容との関係を構築します。
それはニュース記事かもしれないし、製品にまつわるストーリーや、慈善団体の背後にある歴史かもしれません。

*1
サラ・ヒンドマンの研究の詳細については「Type Tasting」を参照してください。
https://www.typetasting.com/

さまざまなディスプレイ書体を試す p256

ディスプレイ書体は大きく分けて2つに分類できます。
「働き者」タイプと「個性派」タイプです。

働き者 p256

働き者タイプの書体はタイポグラファの意のままに働いてくれる書体です。
多種多様なアイデンティティや文脈に合わせてさまざまに形を変えることができるので、あちこちで使用されています。
代表的なものにHelvetica、Futura、Proxima Novaなどがあります。

働き者タイプの書体は多目的に使用できますが、個性とインパクトを出すにはたくさんの実践経験と器用さが必要です。
働き者タイプの書体を鮭の切り身にたとえてみましょう。
シンプルでどうにでもなる素材なので、ロースト、煮込み、焼き物、揚げ物など、さまざまな方法で料理できます。
しかしこれを本当においしい料理として仕上げるには、豊富なスキルと経験が必要となります。

働き者タイプの書体の多くは、スーパーファミリーと呼ばれる大きなフォントファミリーに属しています。
スーパーファミリー内のディスプレイ書体は、ウェイトや幅が極端な設定になっています。
スーパーファミリー内のフォントを本文用に選択するなら、同じファミリーに含まれるディスプレイスタイルをまず候補として考えてください。
その2つのフォントは確実に調和します。

スーパーファミリーからディスプレイ書体を選択するメリットは、画面サイズに応じたスタイルを選択できるようになることです。
「2-7 見出しとインパクト」でも説明したように、大きい画面では本文のサイズに対してディスプレイテキストを大きめにするとバランスが取れます。
その際、よりコンデンストなスタイルを選択すれば、文字サイズを大きくしても幅が不自然に広がることはありません。

次の例では、文字サイズを10vminに設定し、画面幅が80em以上であればスタイルをコンデンストからエクストラコンデンストに切り替えます。

h1 {
	font-family: "Acumin Condensed", sans-serif;
	font-size: 10vmin;
}

@media screen and (min-width: 80em) {
	h1 {
		font-family: "Acumin Extra-Condensed", sans-serif;
	}
}

個性派 p257

2つめのカテゴリーの書体は献身的な書体で、固有の性質や特色をより多く備えています。
丁寧に仕立てられた服のように、デザインのディテールが持ち前の機能に輝きを添えています。
個性派の書体はそのままで独創性を発揮してくれますが、順応性は高くありません。
これらを別のアイデンティティや文脈に適用するのは困難です。

ここで話しているのはハロウィーンっぽいフォントや風船でできたパーティー用フォントのようなレディメイドの書体のことではありません。
個性派の書体は秘伝の材料を提供してくれる高品質のフォントです。
地元で獲れた丸ごと1匹のカレイと、パックになった養殖の鮭の切り身を比べてみてください(価格の違いは無視します)。
鮭は食材としてさまざまな種類の料理に溶け込みますが、カレイは常に主役であり、それを中心に料理が作られていきます。
カレイは特別な料理を作るにはうってつけですが、ふさわしい調理法やつけ合わせはそう多くありません。

Marr Sansは即効性のある少しエキセントリックなサンセリフです。
シャープで独特の雰囲気を持ったエディトリアルデザインを提供します。

FS Clerkenwellはロンドン界隈の影響を受けたスラブセリフで、風変わりな今風のひねりが入っています。

Breeは、もしHelveticaで組んでいたら見過ごされそうな見出しに個性を与えます。

柔軟性よりも個性を重視する p258

これらのディスプレイ書体にはそれぞれ適した場所があり、柔軟性がほしいところには働き者の書体、独自性が欲しいところには個性派の書体を使用します。
自分がどちらの書体を使用しているのかを意識しておくと、ふさわしい扱いができるようになります。

世界中の読み手と消費者のために、できれば個性派の書体をもっと使用するようにしましょう。
どのメディアのデザインにも言えることですが、ウェブでは似たようなものが増殖しがちです。
個性派の書体は独自の作風をもたらし、オンラインの世界に個性とカリスマ性を振りまきます。
作ったものがほかと容易に差別化できるようになります。
そのうえ、少しの敬意と理解を持って書体を扱えば、書体はあなたの仕事の大部分を肩代わりしてくれます。

ディスプレイテキストにディスプレイスタイルを使用する p258

より洗練された書体ファミリーは、幅やウェイトを極端にしただけではない、固有のディスプレイスタイルを備えています。
ディスプレイスタイルは本文用スタイルのバリエーションで、大きいサイズ用に調整されています。
その違いはかなり極端なこともあります。
たとえばジョシュア・ダーデン(Joshua Darden)のFreight書体ファミリーには5つのオプティカルサイズが用意されています。
Freight Macro(画面上に小さいサイズで表示するのに適したデザイン)とFreight Big(大きいサイズで表示するのに適したデザイン)を比較すると、ディスプレイスタイルのFreight Bigの方がコントラストがかなり高く、小さいサイズでは失われるであろう繊細なディテールを含んでいます。
これに対し本文用書体の大きな×ハイトと荒削りなディテールは、大きいサイズで表示した場合、不格好で魅力がなくなってしまいます。

最も表現豊かなディスプレイスタイルは、本文用のデザインを誇張させたものです。
マーティン・マジョール(Martin Majoor)とジョス・ブイベンガ(Jos Buivenga)がデザインしたQuesta Grandeでは、本文用スタイルではかすかにわかる程度の細かい曲線やはね、カールが強調されています。

ヴェロニカ・ブリアン(Veronika Burian)とホセ・スカグリオーネ(José Scaglione)がデザインしたAbrilは、このアプローチをさらに拡張したものです。
本文用スタイルとディスプレイスタイルはそれぞれ異なるスタイルをベースにしているものの、うまく調和するようにデザインされています。
Abril Textは、19世紀のスラブセリフとスコッチローマン書体にインスパイアされたもので、基本的にごつごつした新聞フォントです。
Abril Displayは、その本文用書体のプロポーションを異なるスタイルのラショナルセリフに適用し、曲線の規則的なテンションと高コントラストで読み手の注意を維持できるようになっています。

テキスト書体の構造を補強するディスプレイ書体を選択する p260

ディスプレイスタイルは本文用書体を誇張したものです。
デザインの特徴を強化したものもあれば、スーパーファミリー内で幅またはウェイトを誇張させたものもあります。
選んだ本文用書体に固有のディスプレイスタイルが存在しない場合は、その書体の表情をより強調してくれるような別の書体を探してみましょう。

同じカテゴリーから選べば、形状や内部構造の似ているフォントが見つかります。
「3-3 書体を知る、書体を探す」でも紹介したように、BodoniとBaskervilleはいずれもラショナルセリフですが、高コントラストのBodoniはBaskervilleを誇張したものと言えます。
またFira Sansにはディスプレイスタイルがありませんが、これとBreeは両方ともダイナミックサンセリフなので、Breeはやや平凡なFira Sansを洗練させたものとして使用できます。

オプティカルサイズ p260

ここまで見てきたディスプレイスタイルは、大きいサイズではより繊細で複雑な形状も表示できることを生かして、対応する本文用スタイルに意図的に大きな変更を加えたものでした。
しかし何も変えていなくても、サイズによってフォントの見た目は変わります。
金属製活字の時代では、サイズごとにグリフに細かい調整を加えることで、サイズが変わっても書体のスタイルと判別性が維持されるようにしていました。
小さい字でも判別性を高くするために、小さい字ほどスペーシングを増やし、細部を簡略化したのです。

デジタル時代では書体をどんなサイズにでも設定できますが、フォントがそのサイズでどう見えるかまでは考慮されません。
デジタルフォントはレンダリングされるサイズに関係なくいつも同じアウトラインを使用します。
書体デザイナーはこの問題を解決するため、同じ書体を複数バージョン作成し、さまざまなサイズで使用されたときに視覚的に補正するようになってきています。

アップルは2015年、オペレーティングシステム用のフォントとしてSan Franciscoを発表しました。
San FranciscoにはTextとDisplayという2つのオプティカルサイズがあります。
オペレーティングシステムは20pt(144dpi)を境に自動的にこの2つのバージョンを切り替えます。
Textバージョンは小さいサイズでも判読できるように文字間のスペーシングが広くなっているうえ、任意のサイズで見栄えが良いようにグリフのアウトラインに細かい調整が加えられています。
アップルのオペレーティングシステム上では、San Franciscoの字間のスペーシングはサイズに応じて決まります。
各フォントサイズごとに、特定のトラッキング値がオペレーティングシステムによって自動的に適用されます。
San Franciscoはウェブページに使用することもできますが(オプティカル機能の利点を生かすため)、この後の「3-6 機能的テキストの書体を選ぶ」で説明するように、簡単とは言えません。

マイクロソフトはマシュー・カーター(Matthew Carter)に画面上で読むための書体、特にInternet Explorer 11の「読み取りビュー」モードに適した書体の作成を依頼しました。
Sitkaファミリーには4つのスタイルがあり、それぞれにSmall、Text、Subheading、Heading、Display、Bannerという6種類のオプティカルサイズが用意されています。

各オプティカルスタイルはそれぞれが対象としているサイズの範囲と用途に最適化されています。
読み取りビューモードで画像のキャプションに使用されるのは、ストロークが太めで、xハイトが大きく、字間も緩めのSitka Smallです。
一方、記事の見出しに使用されるSitka Bannerは、ストロークが細くて字間のスペーシングもより詰まっています。

ヒントを見つけ、いろいろ試す p262

ディスプレイ書体の選択はかなり主観的なものです。
大きいテキスト用の書体なので、本文ほど実用性を気にする必要はありません。
実際に使われるコンテンツが正確にわかっていれば、選択はとても楽になるでしょう。
コンテンツの主題が肝心なのは言うまでもありませんが、さらに重要なのは語句のトーンです。
これがわかれば、どのような雰囲気にすればよいのかを判断しやすくなります。

いろいろなフォントを見て回ったり検索したりするときは、そのテキストがどのような感情を伝えるべきかを考えてください。
子どものように夢中になる感覚ですか？
ビジネスライクな権威、あるいはぎすぎすした不安感？
時代の先取り、流行の先端、未来派、分別、安全？
読み手に感じてほしいのは、興奮、充足、安心、それとも緊張ですか？

適切と思われる候補がいくつか見つかったら、見本を作成してください。
プロトタイプで使ってみて、さまざまなバリエーションを試しながら吟味します。
ディスプレイ書体と本文を並べてみましょう。
各種デバイスにさまざまなサイズで表示させ、大きいディスプレイフォントがうまくサイズ調整されるかどうかを確認します。
人生の諸々のことに通じますが、いろいろ試してみるのが一番の学習方法です。

機能的テキストと本文を明確に区別する p263

機能的テキストにはそれぞれ独自の目的があります。
前後関係、配置、色などによって、機能的テキストを本文から明確に切り離すことができます。
より直感的な戦略として本文より小さいサイズに設定すれば、より明確になります。
機能的テキストはメインコンテンツに従属するものなので、サイズを小さくすることで立場がよりはっきりするのです。

印刷物ではキャプションやラベルはかなり小さいサイズにしても機能します。
実際、キャプションを本文の半分のサイズに相当する6ptから8ptに設定するのも珍しくはありません。
しかし画面の場合、たとえ高解像度であってもここまで小さいサイズでは多くの人が読みにくさを感じてしまいます。
原則として、機能的テキストは本文の75%よりも小さくしないようにしてください。

機能的テキストはたいてい短いものです。
1つの単語のときもありますし、長くても2、3の文でしょう。
テキスト量が少ない場合は、長い文章ほど設定に神経質になる必要はありません。
流し読みでも簡単に内容を把握できることから、段落の設定に適用される通常のガイドラインをいくらか緩めていいでしょう。
短いテキストは行間を詰めて、行の長さも短くしていいでしょう。
必要であれば、横幅を広く取ることもできます。
わずか数行のテキストであれば、読み手の目を本文に戻すのもそう大変ではありません。

機能的テキストにはオープンで明瞭な字形を選ぶ p264

機能的テキストは、小さいサイズに設定したときでもひと目で間違いなく読み取れなくてはなりません。
注意を引きすぎることも、注目されることもない書体を選ぶものでなくてはいけません。
読み手に認知負荷を負わせることなく、コンテンツをことが大切です。
ページ内のほかの書体と調和しつつ、読み手のじゃまにならない支えるような書体を選んでください。

短い機能的テキストでは、読み手に十分な背景情報を提供できないことがあるので、文字が容易に識別できることが不可欠です。
たとえば大文字のなのか小文字の1なのか、あるいは数字の1なのか、読み手が迷うようではいけません。

本文内であれば前後関係から推察できることが多いので、これが問題となる可能性は低いでしょう。
しかしラベルやシリアル番号、データなどでは、そのような単語(あるいは数字と文字の混ざったもの)の文字の見分けがつかないと困ってしまいます。

小さいテキスト、特に画面上に表示するものにはシンプルでうるさくない書体が必要です。
セリフフォントは除外すべきというわけではありませんが、スラブセリフの方が小さなサイズでも使いやすく堅牢な性質を備えています。
機能的テキストの書体には、異なるサイズや寸法の各種デバイスにも対応できる柔軟性が必要です。
この観点から見れば、サンセリフが最も適しているということになるでしょう。

一般にxハイトの大きい書体は読みやすく、小さいサイズでもきれいに表示されます。
しかしアセンダーの明瞭さには注意する必要があり、たとえばxハイトが大きいとnとの区別がしにくいことがあります。

書体を小さいサイズで使用するには十分な字間が必要です。
文字同士が近すぎると、文字が合体しているように見えて読みにくくなります。
字間に十分なスペースを確保するには、letter-spacingを適用するのではなく、もとから適切にデザインされているフォントを選んでください。

軽いウェイトは機能的テキストにはおすすめしません。
インターフェイスがエレガントに見えることは大切ですが、軽いウェイトのフォントがどんなに美しくても、常にユーザビリティを優先しなくてはなりません。
たとえばNeue Helvetica Lightは、テレビの電子番組ガイド(EPG)などのユーザーインターフェイスには的外れな選択肢だと言えます。
字間が狭く、細いストロークは予期せずぼやけたり背景ににじんだりしてしまううえ、区別しにくい字形が数多くあります。

最も安全なアプローチは、標識やユーザーインターフェイス向けにデザインされた書体を探すことです。
たとえば以下のような書体です。

Frutiger
Parisine
Fira
Lucida Grande
New Transport
Wayfinding Sans
DIN
Overpass
San Francisco
New Rail Alphabet

標識やユーザーインターフェイス用にデザインされた書体。

これらの書体はそれぞれ独自の特徴を持っていますが、シンプルでしっかりしている、簡単に文字を区別できる、字間が十分確保されているという実用面での特徴が共通しています。

書体ファミリーの中には、キャプション専用のスタイルを含むものもあります。
小さいサイズで使用されることを前提にデザインされており、たいてい本文用のスタイルよりも幅が広く、xハイトも大きくなっています。
たとえば、PT Sans Captionなどが該当します。

キャプションは、本書のように限られた狭い範囲に収めなくてはならないことがよくあります。
このようなケースでは幅広のキャプション用書体よりも、1行により多くの文字を組めるコンデンストフォントの方が現実的かもしれません。
標識用にデザインされた書体の多くは、次のSkolar Sansのように幅の狭いコンデンストスタイルも用意しています。

システムUIフォント p266

システム内蔵のユーザーインターフェイスフォントを機能的テキストに使用することもできます。
これらのフォントはとてもよくデザインされていて、特に比較的小さいサイズで使用するのに適しています。
また「3-5 ディスプレイテキストの書体を選ぶ」で紹介したように、アップルのSan Franciscoの自動トラッキング調整など、最近のオペレーティングシステムによる書体のレンダリング機能も年々向上しています。
オペレーティングシステムのユーザーインターフェイスフォントを利用するには、ジェネリックフォントファミリーであるsystem-uiを指定します。

caption { font-family: system-ui; }

これはMacOS上のブラウザで表示される書体がWindowsやAndroidとは異なることを意味します。
system-uiジェネリックフォントファミリーはCSS Fonts Module Level4 *1で導入された、比較的新しい仕様です。
そのためサポートしないブラウザのために後方互換性を持たせるとよいでしょう。
システムのUIフォントをCSS内で指定するひとつの方法として、font-familyルール内に可能な限り多くのオペレーティングシステムフォントをリストしておくやり方があります。

caption {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

本書の執筆時点ではこれで問題なく指定できますが、ターゲットとしているオペレーティングシステムがシステムフォントを変更したときには、それに応じてリストを更新してください。
なおリストの2つめおよび3つめのフォント名は、Macのシステムフォントに対応したブラウザ固有のジェネリックファミリー名です。

*1
Generic font families(CSS Fonts Module Level 4)
https://www.w3.org/TR/css-fonts-4/#generic-font-families

インターフェイス要素のフォントを指定する p267

このアプローチは、短縮プロパティのfontでシステムフォントが選択可能になったことで、CSS 2.1から利用できるようになりました。
値としてfont:captionといった1つのキーワードを指定することにより、フォントファミリー、サイズ、スタイル、ウェイトなどをまとめて設定できます。
これはデザイナーがユーザーの環境設定を含む現行システムのUIコンポーネントを確実に再現できるようにすることを目的としています。
使用できるキーワードは次の通りです。

・caption：キャプションつきのコントロールで使用されるフォント(例:ボタン、ドロップダウンメニューなど)
・icon：アイコンラベルで使用されるフォント
・menu：メニューで使用されるフォント(例:ドロップダウンメニューやメニューリスト)
・message-box：ダイアログボックスで使用されるフォント
・small-caption：小さいコントロールのラベルで使用されるフォント
・status-bar：ウィンドウのステータスバーで使用されるフォント

一般的なオペレーティングシステムでは、small-captionとstatus-barのサイズが小さいのを除き、すべてのキーワードで使用されるフォントとサイズは同じです。
一般的な使用には、アイコンラベルなどの特定の用途に特化したものではなく、ダイアログボックスに使われるフォントを選択できるmessage-boxキーワードが最適でしょう。

この場合のfont短縮プロパティは、システムフォントキーワードと一緒にしか使用できません。
フォントサイズなどのほかの値を追加すると、message-boxが特殊なキーワードとしてではなくフォント名として解釈されてしまいます。
ウェブページ内のシステムフォントのサイズやスタイルをコントロールしたいときは、その後に続けて指定します。

caption {
	font: message-box;
	font-size: 1.2rem;
}

本書の執筆時点で、このテクニックで唯一対応できないのがアップルのiOSです。
Mobile SafariはCSS 2.1のシステムフォントキーワードを認識しません。
代わりに独自のキーワードを使用します。*2
fontプロパティを繰り返すことで(順番が重要です)、iOSを含むすべての現行ブラウザでシステムフォントを利用できます。

caption {
	font: message-box;
	font: -apple-system-body;
	font-size: 1.2rem;
}

*2
詳細についてはWebkit blog(2015年)に掲載されているマイルス・マックスフィールド(Myles Maxfield)の記事「Using the System Font in Web Content」を参照してください。
https://webkit.org/blog/3709/using-the-system-font-in-web-content/

ローカルフォントは気軽に指定しない p278

font-familyでウェブフォントにつけた名前が読み手の環境にあるフォントファミリーと同じだった場合、ローカルフォントの存在は無視されます。
この仕様のおかげで、デザイナーはインストールされているフォントとの衝突を心配することなく、自由にfont-family名を指定することができます。

所定のフォントと同じものがローカルにあればそれを指定し、もし存在しない場合はダウンロードするようにしたければ、local()をsrcのリストに追加します。

@font-face {
	font-family: MyGentium;
	src: local(Gentium), url(Gentium.woff2) format('woff2'), url(Gentium.woff) format('woff');
}

local()で使用するフォント名は、フォーマット固有の名前で、大きいファミリー内の特定のフォントを指定するものとなります。
OpenTypeとTrueTypeフォントではこの文字列がフォントのPostScript名またはフルネームのどちらかに一致するものとして扱われます。
どちらの名前を使用するかはプラットフォームやフォントによって異なるので、各種プラットフォームで確実に一致するように両方の名前を含める必要があります。

@font-face {
	font-family: MyGentium;
	src: local(Gentium Bold), /* フルネーム */
		local(Gentium-Bold), /* PostScript名 */
		url(GentiumBold.woff2) format('woff2'),
		url(GentiumBold.woff) format('woff');
	font-weight: bold;
}

品質に確証が持てない場合はローカルフォントを指定しないでください。
フォントはさまざまなルートでユーザーのマシンにインストールされるので、読み手のPCにあるHelveticaのコピーがうまくレンダリングされる保証はありません。
場合によってはヒンティングが完全に失われていて、あなたにとっても読み手にとっても悲惨な事態となることがあります。
フォントが企業の中央サーバーで管理されているとか、あるいは特注の書体が社員に配布されているとかでない限り、安全であるとは言えません。

3-9 ライブラリを構築する p294

自分自身の書体ライブラリは一生をかけて構築していくものです。
ゆっくりと確実に書体を選び、構築していってください。
それらの仕組み、長所、制限なども学びましょう。
そのうち好みの傾向が現れ始め、どんなケースにどんな書体がフィットするかが直感的にわかるようになっていきます。

自分の趣味や好みを育む p294

ここで言うライブラリの構築とは、高価なフォントコレクションを購入することではありません。
自分自身で選んだフォントを知り、使用し、深く理解することです。

プロジェクト用の書体を選択するとき、デザイナーの中には何日もかけてのんびりと探す人がいます。
書体見本をダウンロードしたり、オンラインの組版アプリをいじったり、文字セット、ウェイト、代替字形などを比較したりするのです。
この時間は貴重です。
こうすることで知識が広く深くなり、タイポグラフィのパレットの拡張につながるからです。

一方で、使用経験があり信頼性の高い候補書体から自信を持って即断するデザイナーもいます。
いずれのアプローチも、仕事をこなすという意味では適切です。

ニューヨーク市の地下鉄路線図など多数の象徴的なデザインを手掛けているイタリア人デザイナーのマッシモ・ヴィネッリ(Massimo Vignelli)は、どんな書体でも自由に切り刻めるデスクトップパブリッシングの現状に対して、「最大級の惨劇であり、比類のないレベルの文化的公害である」と厳しく批判しています。
彼いわく、12書体あればどんなニーズにも対応できるとのことです。*1

この問題に関心を持ってもらうために、彼は4つの書体(Garamond、Bodoni、Century Expanded、Helvetica)だけを使って制作した作品の展覧会を開きました。
この展覧会の目的は、数種類の書体だけでも多種多様な仕事が可能であると示すことでした。
言い換えれば、問題は書体ではなくそれを使って何をするかであり、書体を十分に理解していればニーズに合った使い方ができるということです。

ヴィネッリの指摘はもっともですが、同意できない点もあります。
タイポグラフィのパレットには、さまざまな条件で各書体がどのように機能するかを把握でき、プロジェクトに最適なものを直感的に選び取れるくらいの数だけ書体があればよいかもしれません。
しかし12書体に制限してしまうのはとても寂しいことです。
フォントのデザインがスタージョンの法則*2に従っているのは事実ですし、日の目を見ることのない書体をいくつも抱えるのも得策ではありませんが、12種類あれば十分で、それらが書体デザインの頂点であり、そしてこれからもそうあり続ける、というのはナンセンスではないでしょうか。
もちろんプロジェクトごとに使用する書体を変えなければいけないわけではありません(本文は特にです)。
それでも使用できる書体の数に自ら制限を設けるのはチャンスを見逃しているのと同じです。
そこれは読み手に対しても、先人の知恵を生かして最新の書体の技術、美観、可読性、耐久性を高めようとしているデザイナーに対しても失礼です。
「もう十分」と言うことは、新しい書体を発見、学習、使用する喜びの機会を自ら拒んでいることになるのです。

*1
マッシモ・ヴィネッリによるPDF「The Vignelli Canon」(2009年)
https://www.academia.edu/36557421/THE_VIGNELLI_CANON

*2
よく引用される格言「どんなものも、その90%はカスである」は、アメリカ人SF作家であり評論家でもあるシオドア・スタージョン(Theodore Sturgeon)の言葉からの抜粋です。

インスピレーションは盗むものでコピーするものではない p295

パブロ・ピカソの言葉に「何か盗めるものがあれば、私は盗む」というのがあります。
彼は同時代に活躍したアンリ・マティスを引き合いに出して、これを説明しています。

マティスと私が当時描いていたすべての絵を頭の中で並べて
思い描くことができるはずだ。誰よりもマティスの絵をじっくり観ているのは
私であり、私の絵を誰よりもじっくり観ているのはマティスだ。

ここで言う盗むこととコピーの違いは、知的所有権に関するものではありません。
誰かのアイデアをあたかも自身のものであるかのように振る舞うことを言いたいのではありません。
誰かが選択した書体やテクニックを深く考えずにコピーした場合、あなたははその人にとって特定の状況下で有効だったものをただ使用していることになります。
一方、アプローチを盗むというのは、それを自分のものにすることでです。
なぜその人のプロジェクトでは有効だったのか、自分のプロジェクトではどうなのかを検証し、必要に応じてアプローチを適応させたり、場合によってはコンテキストを完全に変えたりします。

フォントの実際の使用場面からインスピレーションを得てください。
他人の仕事を細かく検証するのは投資のようなものです。
デサインが素晴らしいウェブサイトのスクリーンショットを撮ったり、雑誌を切り抜いたりスキャンしたり、デザインのレビューサイトを見たりタイポグラフィ関連のブログを読んだりしましょう(おすすめは参考文献を参照してください)。
手本としたいグラフィックデザイナーやウェブデザイナーを見つけ、彼らが好んで使う書体を試してみるのも効果的です。
彼らがなぜそれらの書体を選択し、どのように使用しているかに目を向けてください。
好みのデザイナーを見つけて彼らの書体パレットを取り入れるのは、自身のライブラリを構築する有効な手段となります。
フォントサービスを利用し、サービスが提供するお気に入り登録機能をフル活用してください。

より広い世界からデザインを吸収することは糧になります。
現在、雑誌業界は変革の時期を迎えています。
いろいろな雑誌を見て、有名なデザイナーに限らず、さまざまなデザインにインスピレーションを求めてみてください。
自分の専門以外にも目を向けましょう。
メインストリームだけでなくアンダーグラウンドにも盗めあるものはたくさんあります。
過去にさかのぼって、1970年代のポスターや広告なども見てみてください(必要であれば1980年代も)。
とにかく自分自身にフィットする書体を探し続けることが大切です。
フォントを特定できたら*3、時間をかけてそれを検証します。
ある書体が気になったのであれば、その歴史やデザイナーのほかの書体もチェックしてください。
その中に自分が意図しているものが見つかるかもしれません。

ファウンドリーのウェブサイトもチェックしましょう。
書体の本来の使い方を示すのを目的としているので、美しく表現豊かな書体を見つける格好の場所となります。

*3
フォントを特定する自動化ツールは多数あります。
例：Identifont、WhatTheFont!、Matcherator
http://www.identifont.com/
https://www.myfonts.com/WhatTheFont/
https://www.fontspring.com/matcherator

支払った分だけ得て、得たものに対して支払う p296

タイポグラフィの知識やレパートリーを構築するには、書体をいろいろ試したり実験したりしてみなければなりません。
以前(デジタルフォントやインターネットが登場する前)は、これには法外な出費が必要でした。
インターネットが登場し、膨大な数のフォントにアクセスできるようになってからも、やはりコストがかかるか、不正使用になってしまうかのどちらかでした。
しかし最近になって販売モデルが良い方向に変わってきています。
大半のプロ用フォントは、オンラインのサービスやライブラリを通じて、安価または無償で試せるようになりました。
Dalton Maagをはじめとする一部のファウンドリーは、フォントをダウンロードして無償で試すことができ、使用した分だけ支払うというシステムを採用しています。

プロ向け書体のデザインと開発には、何か月にも及ぶ細かい作業が必要です。*4
フォントの配布および販売サービスの多くは大手の上場企業によって運営されていますが、書体デザイナーの大多数は個人事業主であるか、小規模な会社を営んでいるかのどちらかです。
彼らの生活、それにグラフィックデザインの文化的活力と長寿を守るため、彼らの仕事にきちんと敬意を払いましょう。
皆さん自身であろうと、代理人、会社、クライアントであろうと、発生するライセンス料は必ず支払うようにしてください。
これはモラルの問題でもあると同時に法的な義務でもあります。

無償のものには注意してください。
プロ向け書体の開発には時間がかかるとは言え、基本的なデザインは数週間で完成することもあります。
この段階のフォントが無償で出回ることも少なくありませんが、ほとんどの場合、便利な文字セット、さまざまなウェイト、適切なイタリック、正確なスペーシング、カーニング、合字、ヒンティングなどは含まれません。
大手やプロ向けの配布元が出す無償フォントでさえ、このような未完成のものがあります。
余計なテストをさせられるという形で無償のツケを払うことになるかもしれません。

*4
ニーナ・ストーインジャ(Nina Stössinger)の「designing FF Ernestine」
https://www.typotalks.com/videos/the-importance-of-being-ernestine/

活字マニアは治らないが致命的ではない p297

活字嗜好症は活字への愛そのものです。
自分の書体ライブラリの構築を夢見ている(あるいはすでに構築し始めている)のであれば、あなたはすでに活字嗜好症に冒されています。
活字嗜好症の行き着く先は、エリック・シュピーカーマン(Erik Spiekermann)が愛を込めて作った造語であるところの活字マニアでしょう。
ここまでくれば、どこに行っても目にする書体が気になるようになります。
すべての書体に心の中でラベルをつけ、その使われ方が適切かどうかにうっかり気を取られてしまいます。
活字マニアは無害ですが不治の精神の病で、カーニングやターミナル、カウンター、活字彫刻などにのめり込むことを無上の喜びとする多くの人々がその病にかかっています。
いいですか、ちゃんと警告しましたからね。
活字マニアの会へようこそ！

ジャスティフィケーション p298

和文でも欧文と同様にジャスティフィケーション(両端揃えとも呼ばれます)がおこなわれます。
適切なジャスティフィケーションには高度な組版エンジンとタイポグラファによる調整が欠かせない点も同じです。
しかし現状のウェブでは和文のジャスティフィケーションの調整に関してできることはほとんどなく、満足のいく結果を得ることは難しいでしょう。
和文では原則としてジャスティフィケーションをせず、左揃えにするのが無難です。

その代わりテキストブロックの幅を文字サイズの整数倍にすることをおすすめします。
和文フォントはボディが全角幅なので、役物が改行に影響したり行に欧文が含まれたりする場合を除いて行の幅がブロックに揃い、右端のガタつきを最小限に抑えられます。

トラッキング p298

本書では特別な理由がない限りトラッキング(レタースペーシング)を調整しないことを鉄則としていますが、これは和文も同様です。
とくに本文では避けましょう。
もしトラッキングが気になるとしたら、別のフォントを探した方がよいでしょう。

カーニング p298

フォントやブラウザにもよりますが、CSSのカーニングが有効になっていると、ひらがなやカタカナでも字間が調整されることがあります。
しかし和文では正方形の活字を隙間なく並べる「全角ベタ組み」が基本のため、カーニングは原則として無効にしましょう。
例外的に、見出しなどでプロポーショナルメトリクスを有効にする場合は、カーニングもあわせて有効にしてください。

body {
	font-kerning: none;
}

h1 {
	font-feature-settings: "palt" 1;
	font-kerning: normal;
}

デザインを伝える p300

ウェブタイポグラフィは複雑で入り組んでいるうえ、細かくて時間のかかるものです。
苦労して仕上げたデザインのディテールがデザイナーから開発者にうまく伝わらなければ、努力も水の泡です。

ここまで本書のアドバイスに従っていれば、レスポンシブなプロトタイプができ上がっていることでしょう。
これはブラウザにおけるタイポグラフィの説明とデモの両方をおこない、貴重なコミュニケーションツールになってくれます。
プロトタイプの中身はCSSです。
コードやコメントが適切であれば、CSSこそがタイポグラフィの最終仕様となり得ます。
プロトタイプがタイポグラフィに関するすべての決断の集合体であるなら、そのCSSには組版に必要なすべての寸法、値、プロポーション、それに異なるビューポートにどう適応するかが定義されているからです。
理論的には、あなたの書いたCSSさえ見れば、開発者はあなたがデザインしたタイポグラフィックシステムに関して知るべきすべての情報を入手できるはずです。

もちろんこの開発者はあなた自身である可能性もありますが(デザイナーと開発者を兼任することもあります)、すべてのデザイナーがコーディングをできるわけでも、それが必要なわけでもありません。
デザイナーと開発者がパートナー関係、つまりデザイナーはコーディングから解放され、開発者はデザインセンスの限界に悩むことがなくなる共生的な関係にある場合もあります。
運よくこのようなパートナー関係にある場合は、おそらくエリック・シュピーカーマン(Erik Spiekermann)がタイポグラム(typogram)*1と呼ぶものの現代版が必要となるでしょう。

タイポグラムには、タイポグラフィの計画におけるすべてのパーツの詳細が包括的にリスト化されています。
次のページの図は、ある書籍の本文設定を細かく記したもので、書体、サイズ、行間、字間、マージン、ジャスティフィケーション、ハイフネーションの設定などが含まれています。

自分でCSSを記述しない場合、デザインを詳細に説明するために、使用されているすべての書体とその設定を細かくリスト化しておく必要があります。
この作業はソフトウェアが手伝ってくれることもあります。
たとえば、Sketch用オープンソースプラグインのSketch Measure*2は、デザイン内のすべての要素を1つずつインタラクティブに調査してくれます。
しかし一番のおすすめは生きたスタイルガイド*3、つまりコンポーネントパターン、タイポグラフィ仕様、ページレイアウト、サンプル、場合によってはフロントエンドのコードなどを含み、随時更新されるウェブサイトでしょう。
Website Style Guide Resources*4では、数々の実例を含むウェブサイトのスタイルガイドに関するリソースを見つけられます。

状況に応じてデザインを詳細かつ有効に伝えるのはあなたの仕事です。
これは極めて重要なことで、これをしなければ皆さんがそれまで積み上げたデザインが失われたり、間違って解釈されたり、忘れられてしまったりすることになるでしょう。
あなたの責務はテキストに敬意を払い、読み手に快適な環境を用意することです。
そのためにあなたが導き出したソリューションを誰かに伝えるのが、旅の最後の行程です。

*1
エリック・シュピーカーマンの著書『Rhyme & Reason: A Typographic Novel』(1987年)に掲載されています。

*2
Sketch用プラグインのSketch Measure
https://utom.design/measure.html

*3
Co-op Design Manualの「Typography」など
https://coop-design-system.herokuapp.com/archive/release-2/styles/typography.html#main

*4
Website Style Guide Resources
http://styleguides.io/

ほかはともかく、これだけは読んでほしい p303

活字があるところにはタイポグラフィがあり、そしてタイポグラフィがあるところでは小さなことが重要となります。

活字をどう組むかは、その良し悪しや慎重さにかかわらず、必ずテキストについて何かを語ることになります。
単語の判別しやすさや文章の読みやすさ、書体の選択によって演出された雰囲気など、すべてが組み合わさり読み手の体験を作り上げるのです。

タイポグラフィとは読む体験のデザインです。
おそらく他のどの分野よりも全体は部分の総和に勝るという考え方が当てはまります。
あなたが適切なものにししょうと努力しているディテールはときに平凡で、取るに足りないもののように思えあるかもしれませんが、それらが一体となったとき、読み手の体験を退屈なものから愉快なものへと押し上げられるのです。

優れたタイポグラファにはいくつか共通点があります。
美観に対するテイストやセンスの良さがその最たるものですが、それは謙虚な姿勢で仕事に臨むことによって鍛えられたものであるはずです。
また彼らはディテールを見る目と厳格さを求める忍耐強さを持っているので、仕事を確実に、そして正しくまっとうできます。
しかしいずれにしろ、タイポグラファは学習することに貪欲でなくてはいけません。
生まれつきタイポグラフィに精通している人はいません。
そこにはルールや慣習がありますが、それらの理由や効果を理解したり評価したりするのには長い時間が必要です。
本書のような書籍がその一部を紹介しようと試みていますが、実践してみない限り、タイポグラファとして真に成功することはできないでしょう。
ここで最後のアドバイスを1つ紹介しておきます。

コンピューターを信用しない p303

言い換えると、ブラウザのデフォルト設定ではなく、自分の判断を信用してほしいということです。
あなたが優れたタイポグラフィとはどのようなものかを知っていれば(本書を読み終える頃にはそうなると願っています)、ブラウザに頼らなくても優れた仕事ができるはずです。
デザイン関係のライターであるスティーブン・ヘラー(Steven Heller)は、1998年のインタビューの中で的確なコメントを残しています。

コンピューター以外の方法でデザインやタイポグラフィに取り組んだ経験が
ない人は、コンピューターで何が簡単にできるかということを中心に
あらゆる考えを組み立てていくものです。コンピューターによって決められた
スペースは正しいと多くの人が信じているため、これはタイポグラフィにとって
由々しき事態です。タイポグラファにはこれががまんなりません。

文字サイズ、行間、幅、マージン、色などのブラウザのデフォルト値が自分のデザインに影響を及ぼしていると思ったら、一度疑ってみてください。
それで正しいのかもしれませんし、少しずれているだけか、あるいはまるでふさわしくないかもしれません。