【読書メモ】オンスクリーン タイポグラフィ 事例と論説から考えるウェブの文字表現
先日、オンラインの発売記念イベント にも参加した「オンスクリーン タイポグラフィ」を一通り読んだのでメモしておきます。
目次
- 01_ オンスクリーンタイポグラフィの本文 | 文・伊藤庄平
- 02_ Webで紙のようなレイアウトを実装するには | 文・佐藤好彦
- 03_ オンスクリーンタイポグラフィの夜は明けたか | 文・守友彩子
- 04_ Webアクセシビリティとタイポグラフィ[前半] | 文・桝田草一
- 05_ Webアクセシビリティとタイポグラフィ[後半] | 文・カワセタケヒロ
- 06_ プロダクトのアイデンティティを表現する文字 | 文・ハマダナヲミ
- 07_ 「読みやすさ」の不思議 | 文・きむみんよん
- 08_ 日本語Webフォントの過去、現在、未来 | 文・関口浩之
- 09_ Webタイポグラフィの変遷と現代的常識 | 文・生明義秀
構成はWeb Typograpy, Accessibility, Web Font, Historical Changesの大項目からなり、上記の各10ページ前後のコラム文、それらに関する10例程度の事例を画面キャプチャ付きで掲載されています。 コラムもビジュアル多めなので文章を読む感覚はさほどなく、めくりやすい本だと感じました。
ポイント
気になった点などのメモです。
01_ オンスクリーンタイポグラフィの本文
- 文字サイズはPCで16px相当が2020年現在で最も読みやすいサイズといえる
- 行帳は全角35〜45文字がひとつの目安
- サイズ指定は相対指定で
- 書体は基本的にユーザはデフォルト書体が読みやすいのでは。しかしそこでデザイナーが思考停止するのも良しとは言えない。
- Webフォントも日本語の場合デメリットがフォーカスされがちだが、書体開発など業界のこと考えるとそこも尊重すべき選択があって良い。
- コントラスト的に黒は#111〜#333がベター、#000は少し強く感じる。
- 文字詰めは主要ニュースサイトで本文で
font-feature-settingsを適用しているサイトはなし。 - 各環境での最善を尽くしつつ、ユーザーの自由度を奪わないデザインを心がけるべき。
事例の選定、イトイ新聞とTHE FASHION POST、Yahoo！ニュースのピックアップでらしいなあと思った。
02_ Webで紙のようなレイアウトを実装するには
- 見出しの文字詰めを実現するには
font-feature-settings,letter-spacingを使うことが代表例だが、イラレからアキ情報取って使うことも可能（getKerning） - 本文の約物が続いた場合の処理はアキを自動調整するフォントを使う方法がある（約猫）
text-align: justifyにすると欧文の長めの単語が入ると前の行が不自然に開くときも。 そのときはhyphes: autoに- その他、行間を基準にしたグリッド設計、箱組みのためのfloatボックスの活用など
03_ オンスクリーンタイポグラフィの夜は明けたか
デジタルメディアの特徴や課題として、
リリース後ほぼ変わらないコンテンツを最大限に魅力的につくろうとする取り組みとは逆に、どんな内容でも見やすい状態を提供する可視・可読性のためのフォーマット設計の方を重視すべき場面も多い。
とありますが、自分も最もデジタルで考えるのはその点。うまいデザイナーの定義あげるとするとその点がうまい人がWebのデザインがうまい人と思ってます。
また乗り越えておきたい課題として、「実装者を評価する」をあげています。
デジタルメディアのエンジニアは、視覚的な完成度や意味、文書構造、情報構造などに対する興味が薄い場合がある。プログラム的素養を高めるほうが業界での年収が上がりやすい一方で、視覚的な再現はエンジニアリングを介さずとも実現できる仕組みづくりが活発になってきているため、目標とし難いのが実情なのであろう。 ... プログラムしたものを伝わる、使える形に転換できる。そんな実装者を評価し、よきパートナーとなることもクオリティ改善の一助となるであろう。
こちらも深くうなずきたい部分で、デザインの再現性や汲み取りする能力をエンジニアは評価されづらいと思う。（or そもそも評価軸がない。）それはエンジニアの評価はエンジニアが行うというのも大きいように感じていて、より良いものが世の中に出回るようにデザイナーや視覚性を大事にしている人がもっとフックアップ的なことをすることも大事なのかなと思っています。
04_ Webアクセシビリティとタイポグラフィ[前半]
- Webのメディア特性として、特徴的な点はユーザー自身が見た目を変更できる点がある。
- コンテンツ側はよいデフォルトを提供し、ユーザーはユーザースタイルシートなどを活用しコンテンツとユーザーが協力した形でよいタイポグラフィが実現できる。
- WCAG2.1達成基準例
- テキストは支援技術なしで200%までサイズ変更できる
- 使用している技術で意図した視覚的提示が可能である場合、文字画像ではなくテキストが使われる
- テキストブロックブロックでは利用者が全景と背景色を選択できる。幅が80字を超えない（全角の場合は40字）
05_ Webアクセシビリティとタイポグラフィ[後半]
- 文字サイズは実機で評価する
- サービスのターゲットに合わせて適切な文字サイズを選択する
- 視野は個々人により異なる。重要な要素ほど中央寄りに集める
- 疑似ボールドは意図しない潰れの原因になるので使用しない
06_ プロダクトのアイデンティティを表現する文字
Apple, Google, Uber, Dropbox, Atlassian, Facebook, Twitter, Figma, 楽天, メルカリの書体選定や使用例。
確かにAppleのSan Franciscoなど自社開発でのフォントが増えるなか、TwitterはHelvetica Neueを使用していて普遍性を強調しているのが印象的です。最近、Chirp フォントが出回っているので、そのようにサービスに組み込まれるかも楽しみです。
07_ 「読みやすさ」の不思議
- 「読みやすさ」の指標はさまざま。道路標識と書物では異なる視点でのフォント選びが必要
- オンスクリーンでの「読みやすさ」は「バックライトによる文字のアウトラインのぼけを考慮したフォントを選ぶこと」
- ふところの広い書体
- 縦線と横線のコントラストが低い
- スクリーン向きのフォントの例にオンスクリーン用にリデザインされた Benton Sans RE などは使ってみてよいのでは
- 各UD書体、オールドスタイルでも丸明オールド、明朝で3種類のコントラストが用意されているTP明朝もオンスクリーンに適している
08_ 日本語Webフォントの過去、現在、未来
- Webフォントの変遷（2009年〜）
- 日本語環境ならではの配信技術（ダイナミック・サブセッティング）
- セルフホスティングでの配信
- 日本語Webフォントの文字詰め機能
- Webフォントのサイズはサンセリフ体よりセリフ体のほうが基本は軽くなる。（アンカーポイントが少ないため）
日本語環境におけるWebフォントの課題について、Webフォントを導入すると重くなる、は必ずしも正解ではなく、さまざまな配信技術やレンダリングの方法があるのでそれを使っていきましょうという方向性の話でした。
表示が遅く感じる理由は、システムフォントが表示された後に、Webフォントの表示が開始されることに起因していることが多い。つまり、この画面がチラつく挙動が遅さを感じさせてしまうのである。
確かに盲目的にWebフォントは遅いっていうイメージにとらわれている感は否めないので、きちんと切り分けして考えないとなと思いました。
09_ Webタイポグラフィの変遷と現代的常識
- Webの歴史とともにWebタイポグラフィはどのように変遷してきたか
感想
この本に掲載されているような文字周りのCSSって、ボックスをレイアウトしたりするCSSとはまた別で、そこの対象範囲で興味を広げないと今のブラウザでできることやスタンダートなことを捉えるのがなかなか難しかったりすると思っているのですが、今回この本を通してそのあたりはインプットできた印象があります。
ただもっと大枠の選定の話とか、先日のイベントの際にも感じましたがここ数年追えていない感が残っていて、たづがね角ゴシックは結構使いやすいと言われてる書体なんだなとか、そんな程度なのでもうちょっと追いついておきたいなあという焦りも持ちました。
オンスクリーンに絞ったタイポグラフィ系の書籍は ウェブタイポグラフィ もありますが、今回のオンスクリーンタイポグラフィも初学者が読むには敷居が高めな印象もあるので（基礎的な内容もあるが発展系への展開もある部分で）、もう少し大衆的な雰囲気のあるベーシック部分をカバーした書籍も今後出るともっと裾野が広がるというか興味を持ったり意識を持ちながら仕事をする人が増えるのかなと感じます。
決して教科書的なこうしなさいというやり方を教える成分は弱めかなと思います。こういう考え方がありますよの提示的要素の強い本だなという印象です。
ともかく久しぶりに発売が楽しみな本があって、それを予約して届いて読んで、執筆陣も個性豊かでとてもお気に入りの本になりました。