Webフォントの選び方：ビギナーズガイド by Googleフォント ～要約版～/Choosing Web Fonts: A Beginner’s Guide (abridged)

Googleフォントが公開しているWebフォントの選び方ガイドの要点を日本語でまとめた資料です。

"Choosing Web Fonts: A Beginner’s Guide ―Take the mystery out of font selection with our step-by-step guidance―" By Google Fonts
https://design.google/library/choosing-web-fonts-beginners-guide

Transcript

1. Webフォントの選び方：ビギナーズガイド by Googleフォント ～要約版～ 2018-05-21 avcdsld
2. このスライドは，下記の記事を元に作成しました． ⚠ 一部，内容の解釈が異なる部分があるかもしれません． Choosing Web Fonts: A Beginner’s Guide Take the mystery out of font selection with our step-by-step guidance By Google Fonts https://design.google/library/choosing-web-fonts-beginners-guide/
3. はじめに • 今日，webフォントは高い信頼性があり，選択肢も多い ◦ 人気：Proxima Nova，Helvetica，Museo，Futura，Brandon Grotesque ◦ 従来フォント：Arial，Times New Roman，Courier New， 　　　　　　　Helvetica，Times，Courier，Verdana，Georgia ◦ webフォント：Gibson，Gotham，Classic Grotesque，Montserrat • ユニークさを望むなら，定額サービスの利用もあり このガイドのような留意点がきちんと対応される あまり一般的でないフォントを探せる
4. Webフォントを選ぶ観点
5. プロジェクトの期間 • 長期 ― 雑誌など，数ヶ月～数年 ◦ 様々なウェイト，スタイル，スモールキャップ，合字などを含む 大きなフォントファミリーが良い．ブランディングも容易に． 例：Alegreya，Alegreya SC，Merriweather，Merriweather Sans， 　　Roboto，Roboto Condensed，Work Sans • 短期 ― ポスター・ロゴ・プレゼン資料など，一回だけ ◦ 豊富なウェイトやスタイルはなくても良い 例：Bubblegum Sans，Graduate，Scope One，Space Mono
6. テキストの量（１） • 見出しや小見出し ◦ 表現力豊かで独特なフォントが使える（∵ 高コントラストは目を引く） ◦ ディスプレイ / 装飾 / 手書き / スクリプト スタイルのフォント ◦ サンセリフの場合：太字や長体（∵ 通常のウェイトだと場違いに見える） ◦ セリフの場合：ヘアラインセリフ（Playfair Display や Rufina） （∵ ストローク（文字の骨格）のコントラストが高く，注意を引く）
7. テキストの量（２） • 中程度の長さのテキスト（3～4段落） ◦ 選択肢の幅は広い ◦ セリフの場合：オールド（Quattrocento）/ トランジショナル 　　　　　　　（Libre Baskerville）/ スラブ（Arvo） ◦ サンセリフの場合：ヒューマニスト（Cabin）/ グロテスク（Raleway）/ 　　　　　　　　　幾何学（Montserrat） • 長いテキスト（5段落～） ◦ セリフが良い（∵ 長い文章を目で追いやすい） ◦ オールド（EB Garamond）/ トランジショナル（Libre Baskerville） ◦ ヒューマニストサンセリフ も使えるがある種の賭け，セリフの方が無難
8. フォントのサイズ（１） • 小さい（～16pt） ◦ サンセリフが良い（Roboto，Montserrat，Raleway など） （∵ 高いエックスハイトのものが多く，小さいサイズで見やすい． 　　 また，コントラストが低く均一なので，「色」を目立たせやすい） • 中程度（16～24pt） ◦ 幾何学（Montserrat）/ グロテスク（Lato）/ ヒューマニスト（Quattrocento Sans） ◦ 極大・極小のウェイトは見にくくなるので使わない ◦ 現代的なセリフを使いたい場合： 高いストロークコントラストでないものが良い
9. フォントのサイズ（２） • 大きい（24pt～） ◦ ディスプレイフォント （大きいサイズ用のフォント．逆に小さいサイズでは読みにくい） ◦ フォントが引き起こす感情が，文脈に適しているかどうかが重要 ◦ 装飾フォント（Lobster）/ 異字体（Berkshire Swash） ◦ 合えば，幾何学，レトロも ◦ 大きいカウンター，高いエックスハイトのフォントは避ける （∵ これらは小さいサイズ用）
10. わかりやすい文章にする必要があるか • わかりやすい文章にしたい場合，下記（Comfortaa）のような曖昧な形の フォントではなく，Alegreya や Bellefair のような読みやすいものが良い． • 高い頻度で使われる文字 ‘a’，‘g’，数字 の形を見た方が良い． これらは大胆であると同時に，読みやすくなければならない． ‘v’，‘w’，‘x’，‘y’，‘z’ のような低い頻度の文字で，贅沢なデザインは作れる．
11. 読者が使う言語 • ブラウザの翻訳機能で，いまや多くの人がコンテンツを母国語で表示する • できるだけ多言語に対応したいなら Noto フォントが良い • ラテン系の場合： ◦ 拡張ラテン文字（特定のヨーロッパ言語で使われる）が含まれるか？ ◦ アクセント付き文字が含まれるか？（サーカンフレックス â， グレーブ á，ウムラウト ä，オーバーリング å，オゴネク ±） ◦ キリル文字、拡張キリル文字（セルビア語，ブルガリア語など）は？ ◦ 多くの文字・ウェイト・スタイルを持つスーパーフォントファミリー： Alegreya，Merriweather，Nunito，Roboto，Quattrocento • その他：アラビア語・ギリシャ語・ヘブライ語 / ベンガル語・デーバナガリ語・グジャラー ト語・タミール語などヒンディー語 / タイ語など東南アジアの言語
12. フォントの機能性とデザイン特性（１） • 機能性（functionality） ◦ フォントの外観を変更するスタイル： 　イタリック体，Thin～Black のウェイト ◦ 機能性が高いフォントの例：Barlow，Poppins，Libre Franklin • デザイン特性（design features） ◦ 特定の文字のバリエーション： 　スモールキャップ，Contextual alternates， 　筆記体・スクリプトフォント，数字
13. フォントの機能性とデザイン特性（２） （デザイン特性の続き） • スモールキャップ ◦ 多様性を追加し、視覚的な階層感を作る．タイトルやヘッダー向き 例：Carrois Gothic SC, Cormorant SC, Patrick Hand SC • Contextual alternates ―有用な多様性を追加する（Montserrat Alternates） • 筆記体・スクリプト ―手書きのようなフォント（Caveat，Sriracha） • 数字 ◦ オールドスタイルの数字：英文中で読みやすい ◦ 表形式の数字：同じ文字幅・同じ高さ ◦ 分数記号や，100以上の通貨記号を含むフォントもある 例：Alegreya, Exo, Montserrat, Roboto, Spectral, OpenTypeフォント
14. まだフォントを決められない？ • 検討しているフォントのリストを作って調査しよう ◦ オプションの文字，スタイル ◦ キリル文字を扱えるか？ ◦ タイ語でどのように見えるか？ ◦ デザイナーのための紹介文をみて， このフォントが過去にどう使われていたか • タイポグラフィは繊細な芸術で，思っているよりも難解だが， プロジェクトの組織，期間，読者などについて考えを持てば， 賢くタイポグラフィックを選択できる．
15. 補足
16. （補足） オールド / モダン / トランジショナル / スラブ 出展： https://raksul.com/magazine/column/101220-font/ http://typeandmusic.com/an-introduction-to-typographic-families/ ※オールドとモダンの中間 　- Garaldeはオールドの代表的フォント 　- Didoneはモダンスの代表的フォント
17. （補足） カウンター / エックスハイト（x-height） 出展： https://en.wikipedia.org/wiki/Counter_(typography) https://en.wikipedia.org/wiki/X-height The counter of the letter "p" shown in red