yuheijotaki.com

【読書メモ】ウェブタイポグラフィ - 美しく効果的でレスポンシブな欧文タイポグラフィの設計

前回の オブジェクト指向UIデザイン に続いて、同じ時期に話題になっていたウェブタイポグラフィを読みました。

ウェブタイポグラフィ─美しく効果的でレスポンシブな欧文タイポグラフィの設計

ウェブタイポグラフィ─美しく効果的でレスポンシブな欧文タイポグラフィの設計

目次

  • はじめに：わたしたちは皆タイポグラファ
  • 1章:読まれるための組版
  • 2章:タイポグラフィのディテール
  • 3章:フォントの選択と使用
  • おわりに

章立てはシンプルですが各章でボリュームあります。
対象としてはIAやデザイナー、エンジニアということで、HTMLやCSSに関してはある程度の基礎が分かっていると楽しく読み進められるかなと感じるレベルかなと思います。

ポイント

はじめに

ウェブですばらしいのは、さまざまな形を取れること、そして読み手がニーズに合わせてそれを形づくれることです。これは弱みではなく強みであり、バグではなく機能です。

ウェブデザイナーには柔軟性が求められるのです。ウェブデザインは読み手の緩急王に順応するものであるべきで、読み手がニーズに合わせてデザインを調整することが不可欠です。

これは特にタイポグラフィに限った話ではなくウェブのプレゼンテーション全体の話だと思うのですが、自分もこういう考え方で良い妥協点を見つけれる人がウェブのデザインがうまい人かなと思っています。

1章:読まれるための組版

読むということ

インタフェースデザインの心理学 にもあったサッカードなどの話。
ただそれよりも詳しい内容 中心視では一度に4、5文字しか読めないが脳はすべてのテキストに焦点が合っている。

フォントサイズの単位

主に em rem ch px がある。

ただし基本的には、ページと一緒に要素を拡大縮小したい場合は rem を使用し（グローバルなサイズ設定）、コンポーネント内で拡大縮小したい場合は em を使用します（ローカルサイズ設定）。

段落のデザイン

可読性のバランスを支えるのは以下の3つ。

  • カラム幅（行の長さ）
  • 文字サイズ
  • 行間
カラム幅

一般的な印刷物は1行45〜75文字で設定されている。
画面で読むには行が長め（最大100文字）でも悪影響は出ない。ただし読み手は短めの行を好む。
スマホは1行で42文字がおおむねちょうどよい。
（和文の場合はこれらの文字数の半分強を目安にする）

文字サイズ

段落にはデフォルトの文字サイズを使用する。
各デバイスメーカーは適切な初期サイズとして16pxを採用。
アクセント付きの文字をベースにデザインしたフォントはxハイトが低いので、同じ16pxでも他のフォントに比べて小さめになる場合も。

行間

行の高さは文字サイズとカラム幅に合わせる。
line-height: は単位無しで指定する（自分は単位無し= em で指定だと勘違いしていました）
フォントによって調整が必要だが1.4を設定するところからスタートする。（和文は1.7程度から）

快適な行間を設定するにはカラーのの均一化とカラーに対して心地よい黒みの量にすることを目指す。

  • フォントのストロークが太い => カラーが濃くなりがち => 行間をやや広げて重さを減らす
  • 幅が広く隙間がある、xハイトが小さい => カラーは薄くなりがち => 行間をやや狭めて重みをもたす

レスポンシブな段落

目からテキストまでの距離と適正フォントサイズ
Size Calculator

  • 本 => 35cm
  • ノートPCやタブレット => 45cm => 18〜19px
  • デスクトップ => 最大60cm => 22px
  • スマートフォン => 30cmかそれ以下 => 16px

とはいえテキストは過度に大きすぎても読みにくくなるのでプロトタイプをなるべく作りましょう/プロトタイプのコンテンツもできるだけ実際のデータ（に近いもの）をいれた上で行いましょう

2章:タイポグラフィのディテール

記号、符号、アクセント

  • さまざまなスペース
    • ノーブレーク   /ヘア   /シンスペース   がある
  • アクセント記号を勝手に消さない
    • 特に人の名前は礼儀を欠くことになる
  • 適切な約物を使用する
    • ダッシュの代わりにハイフンを使用しない
      • enダッシュ – と emダッシュ —
      • 正しいマイナスは −
  • その他
    • エリプシスは3つのピリオドではなく …
    • 乗算記号はアルファベットの x ではなく ×

階層とスケール

タイプスケール（あらかじめ定義された文字サイズのセット）を意識する。選択肢が制限されるため、組版に規律と一貫性をもたらすことができる。

  1. レファレンス（小） => 注釈など
  2. リーディング（中） => 本文
  3. ディスプレイ（大） => 見出しなど

最も小さいサイズを先に決めてから大きいサイズを選ぶ。
Modularscale や Simple Scale を使うとかんたんに試せる

デフォルトの文字サイズの場合、スマートフォンでは問題ないが、PCなど大きな画面ではコントラストとインパクトが減少してしまう
この場合、別のスケールセットをつくるのではなく、メディアクエリを使用して端末サイズをemで分岐してあげる

意味とセマンティクス

見出し

見出しの強調はスペーシングだけでそれなりにうまくできるはず。足りない場合にスタイルやウェイトの違いをもたす
CSSではh1〜h6までスタイルを指定する。デザインにない場合（h5やh6）にもh4と同じスタイルを当てておく。
レディング（行間）は狭くする

テキストまわり
  • はじまりを明確にする
    • 空白スペースやドロップキャップ
  • リードはリードらしく大きな文字にしたりする
  • リスト項目が少なく数行だけの場合は、項目感のスペーシングを防ぐ
  • アンダーラインでは強調しない
    • リンクと慣習上リンクとみなされるため
  • リンクは明確かつ控えめにする
    • アンダーラインを第一選択肢に
    • アンダーラインなしの場合は周囲とのコントラスト比を3:1にする（かなり明らかにする必要性）

テーブル

p.144 に実際のサンプルがあるが、たしかに見やすく感じる

  • テーブルは引き伸ばさない
  • 装飾や色付けは最小限に留める
  • テキストは左揃え、数字は右揃え、見出しはデータに揃える
  • 余白を利用してグループ化と分離を行う
  • 数値にテーブル用ライニング数字と一貫した精度を適用し、繰り返す（$マークなど）を省略する

トラッキングとカーニング

  • レタースペーシングは慎重かつ例外的に
    • 特別に理由がない限りは小文字をレタースペーシングしない
      • 読み手が単語として把握するのが難しくなる
    • 大文字や数字が連続する場合はレタースペーシングする
    • 大きいボールドの幅広フォントは軽く詰める
    • 字間を広げる場合は合字を無効に

見出しとインパクト

タイポグラフィの2つの役割

  • 小説 => 没頭させること => 読む
  • 広告看板 => 割り込むこと => 見る

ディスプレイテキストはまず見られてから読まれるテキスト

バーティカルリズムを適用する

参考： なぜタイポグラフィにおいてVertical Rhythm（バーティカルリズム）は重要な手法なのか？ | POSTD

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

配置と構成

モバイルファーストの哲学を採用する
画面が小さいので必然的に優先順位と階層の扱いが大事になる

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

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

3章:フォントの選択と使用

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

画面はピクセルと呼ばれる極めて小さい光の点の面滅を放射します。

ラップトップやデスクトップの多くは、約140ppiの画面解像度を備えています。アップルのRetinaディスプレイなどの高解像度画面でも400ppi以下です。一方のプリンターは、比較的安価なレーザープリンターでも600dpiの解像度があり、プロ仕様のデジタルプリンターではx2,438dpiもあります。

各オペレーティングシステムにはテキストレンダリングエンジンが備わっていて（複数備えていることもあります）、それぞれのウェブブラウザがどのレンダリングエンジンを使用するかをコントロールしています。

→ つまり同じOSでもブラウザによってテキストの見た目が大きく異る可能性がある。

フォントはベクターでデザインされラスタライズされて表示される。ラスタライズされるときにエイリアス/グレースケールスムージング/サブピクセルアンチエイリアスのアンチエイリアス処理がある。
ただこのそれぞれの処理には何らかの欠点があったり、向いてない端末が出てきてしまう。
そのときに使うのがヒンティング。
参考） ヒンティング - 印刷用語集
Verdana、Geogia、Arialなどの主要なウェブ用のフォントはすべてのサイズで可読性が高くなるようにヒンティングの調整がされている。

  • ヒンティングを使用するのはWindowsのみ
  • 携帯端末（iOSやAndroidデバイス）はサブピクセルアンチエイリアスではなくグレースケールスムージングが使用される

マイクロソフトは正確さよりも鮮明さを優先させるというスタンス（へぇ〜となりました）

ウェブデザイン全般に言えることですが、デバイス間ですべてが同じようにレンダリングされることを期待してはいけません。自分の選択をベースに、何かがただ違って見えるだけなのか、または質が低下しているのかを評価します。

実際的及び実用的考慮事項

  • すぐにフォントを選択しない
    • どのフォントを使用するかは、特定の要件、文脈、成約、信頼性、そして最後は好みで決まる。
      • 美的判断より実用的な要件を先に考慮する。
  • ウェブサイトの性質をよく理解する
    • 今後複雑な機能を要求されるか
    • 読み手を没頭させるのか、流し読みで十分なのか
  • 必要な文字が揃っている書体を選択する
    • アクセント、約物が用意されているか
  • 必要なスタイルが書体に備わっているか
  • フォントのパフォーマンスを考慮する
    • レンダリング
    • ファイルサイズ
  • ブランド要件に対して現実的に対応する

本文書体の決定

  • 読み手とテキスト感の摩擦を取り除く
    • 堅牢な書体の選択
      • 高コントラスト高コントラストと独特のスタイルは本文を読みにくくする
    • アクティブなテクスチャとむらのないカラーでスムーズに読めるようにする
      • 読み手が長い朗読の聞き手だとすると、好奇心をそそりながらも、うんざりさせない程度に声に変化をつけた朗読（この朗読者の声のバリエーション = 書体のテクスチャ = 書体のコントラスト、フロー、サイズ）
      • Museo Sans と FS Emeric の例。わかりやすかった。
    • テキストに沿った書体を選ぶ
      • 文章の特徴をつかみ、テキストが醸し出す雰囲気をうまく表す言葉と考え、その感じやムードをデザインに取り込む必要がある
    • 自分の好みを信じる（！）

ディスプレイテキストの書体を選ぶ

  • かしこまらず、押しつけず、ありふれたものにせず
    • 書体を通じて感覚に働きかける
      • ディスプレイテキストは「読む」前に「見る」
      • 信頼性やトーン、コンテンツに対する先入観を刺激する
      • モフモフの子猫が大好き
    • さまざまなディスプレイ書体を試す
      • 働き者、個性派。柔軟性よりも個性を重視する
    • ディスプレイテキストにディスプレイスタイルを使用する

ウェブフォントを使用する

ペイロードとレンダリングタイミングの2点を最適化する必要がある。

  • WOFF は TTFとOTFのラッパー。WOFF2は圧縮最適化した新しいフォーマットだがすべての環境でサポートされていないのでフォールバックを用意する。
  • @font-face でWebフォント指定していても、フォントは必要なときのみ（該当するセレクタが存在するときのみ）ダウンロードされる。
  • ペイロードの軽減
    • 使用するフォント数の制限（特にアジア圏のフォント）
    • 必ずWOFF2オプションを提供（平均30%の節約）
  • ページのレンダリングタイミングを最適化する
    • FOIT = flash of invisible text = 見えないテキストによるちらつき
    • FOUT = flash of unstyled text = スタイリング前のテキストによるちらつき
    • font-display: を使用してブラウザの振る舞いを調整
  • 重要なフォントはプリロードする
  • フォントイベントでウェブフォント戦略を微調整する

感想

ウェブのタイポグラフィでも、古いときから使われている技術やルールをかなり大事にするべきなのだなと感じた。ウェブはウェブなので、、が通じるとこがもっと多いと思ってました。
自分の悪い癖だと思うのですが、文字をひとつのデザインや見せ方として捉えている部分があって、そういう手癖でやっていたこと（本文でわりとレタースペーシング入れる、テーブルの横幅100%など）は見づらいよと書かれており反省しました。。

最初に入った会社で朗文堂通ってたタイポグラフィ詳しい方にWebだけではなく文字周りの知識をある程度は教えて頂いたのですが、最近は特にデザインもする機会もなく忘れかけていた分野だったので若干なつかしさを覚えました。
結構この分野って知識の他に日々文字を眺める機会が誰でもあると思うのですが、それを見てどう感じてということの繰り返しで身につける系のスキルかなとも思っていて、文字詰めとかも最初はなんとなくでやっていたけど、やっていくにつれて覚えていけた感があります。
本書で触れている行間の設定なども結局デザイナーの目がものをいう部分も多々にあるんだなと思いつつ、カラーなどの概念を知らないでなんとなくいい感じを脱するためには学んだほうが良い知識が揃っていました。

イギリスの リチャード・ラターさん が著者で、監訳は 鈴木丈さん が行っていますが、日本語の場合はうんぬんかんぬんも補足しないといけないこともあるのでタイポグラフィ関係の翻訳めちゃ大変そうだな・・・と思いました。

この本に関してではないですが、やっぱり和文で扱い方が全く異なることもあると思うので、そこにフォーカスした本も読んでみたいなと思いました。
ただ ウェブ × タイポグラフィ でも割と狭い世界な印象なのでなかなか難しいのかなとも思います。

ほか参考