ウェブフォント今昔物語

Transcript

1. ウェブフォント今昔物語 2019.11.16 Takanori Oki @フロントエンドカンファレンス福岡2019 Copyright © 2019 FOLIO, Ltd.

   All Rights Reserved.

2. 自己紹介 • 株式会社FOLIO フロントエンドエンジニア • React / Nuxt.js / Web

   Components / etc… • フォントとFigmaが好き • 好きなフォントは新ゴ、Futura、源柔ゴシック、 機械彫刻用標準書体 • ウェブフォントの本書いてます 2

3. 誰でもつかえる! ウェブフォント 実践マニュアル 3

4. 株式会社FOLIO 4

5. 株式会社FOLIO • 「ワクワクする投資、はじめよう！」 • オンライン証券の会社 • LINE Financial株式会社と共同で 「LINEスマート投資」を運営 •

   フロントエンドの技術スタックは React, Redux, Flow, etc… 5

6. 目次 • ウェブフォントって何？ • 3つの視点から考えるウェブフォントのあれこれ - ユーザー - デザイナー -

   エンジニア • まとめ 6

7. 今回みなさんに伝えたいこと

8. X ウェブフォントはこわくない！ 8

9. ウェブフォントって何？

10. X 10 ここに書いてあるよ！

11. What is “Web Font”? 11 サーバーに フォントデータを アップロード サーバーから フォントデータを

    取得して表⽰

12. 昔の ウェブフォント 12 フォントデータが重い 日本語フォントの バリエーションが少ない

13. 日本語フォントが 重い理由 • 文字数が多い • グリフが複雑 13

14. 今の ウェブフォント • 日本語ウェブフォントはたしかに重いけど 実装を工夫することでそれを回避できるようになっ てきた - 「エンジニア」のところで詳しく解説 • 日本語フォントのバリエーションが格段に増えた

    - 日本語フォントを取り扱う ウェブフォント配信サービスの増加 - Google Fonts、Adobe Fonts、 TypeSquare、FONTPLUS、etc… 14

15. 3つの視点から考える ウェブフォントのあれこれ

16. 3つの視点 16 エンジニア ユーザー デザイナー

17. X ユーザー目線 17

18. X よくあるユーザーの声 18

19. ユーザー目線 「読み込みが遅い、フォントデータが重い、 ムダに通信量を消費しないでほしい」 19

20. ユーザー目線 • 読み込みが遅い - ユーザーに遅さを感じさせない実装をする必要が ある、ごめん • フォントデータが重い - これはまじごめん致し方ない、これでも前より

    軽くなってる • ムダに通信量を消費しないでほしい - Google Fonts使えばユーザーの通信量を ムダにしない 20

21. ウェブフォントが ユーザーに 提供できること • 可読性の向上 - フォントと可読性は密接に関係している - ディスレクシア（読字障害）や弱視などの障害を持 つ人にとって読みやすいフォントを選択する

    ことは非常に重要 • 株式会社モリサワがいくつかレポート出してるので、 興味がある人は読んでみて - https://www.morisawa.co.jp/fonts/udfont/ study/ 21

22. X デザイナー目線 22

23. デザイナー目線 • デザインの幅が広がる - フォントで全体の印象が大きく変わる - 全体のデザインを考える上で欠かせない要素 • デバイスやOSに関係なく同じデザインを提供できる -

    そもそも、特定のOSにしか搭載されてないフォント でデザイン考えるのおかしくない？ 23

24. デザイナー目線 デザイナーにメリットしかない！ 24

25. 注意点 • ライセンスでウェブフォントとしての利用が 禁止されてる場合があるので注意が必要 • ライセンス周りはかなりややこしいので 配信サービスを使うのが安全 • ウェブフォントとして使うには 「フォントの改変」「再配布」の許可が必要

    25

26. X エンジニア目線 26

27. エンジニア目線 「重い。ちらつく。なんかよくわからない。 時間かけたくない。必要あるの？」 27

28. エンジニア目線 Googleが書いている 「ウェブフォントの最適化」を実践する https://developers.google.com/web/fundamentals/ performance/optimizing-content-efficiency/webfont- optimization?hl=ja 28

29. ウェブフォントで 使われる技術 • WOFF2形式での圧縮 • ダイナミックサブセット、ユニコードサブセット • Font Loading API

    • CSSのfont-displayプロパティ • Service Workerを用いたキャッシュ戦略 • <link rel=“preload"> 29

30. ウェブフォント圧縮形式の歴史 30 WOFF WebOpenFontFormat 2009年に公開された ウェブフォント用の圧縮形式。 zlibを使用して圧縮されている。 TTF TrueTypeFont 一般的なフォントファイル。

    自前で圧縮する必要がある。 WOFF2 WebOpenFontFormat2 Brotliという圧縮アルゴリズムを 使用した新しい圧縮形式。 WOFFと比較して約30%軽い。

31. Noto Sans CJK JP Regularのサイズ比較 31 TTF WOFF WOFF2 ファイルサイズ

    0MB 5MB 10MB 15MB 20MB 10.7MB 13.7MB 16.4MB

32. ダイナミック サブセット • フォントを動的にサブセットする手法 • メリット - そのページで使われてる文字しかダウンロード されないのでフォントデータを軽くできる •

    デメリット - ページ読み込み時にJavaScriptを実行するので 環境によっては使えない可能性がある - SPAや動的に表示が変わるUIと相性が悪い 32

33. FOUTを抑止する方法 33

34. FOUT • Flash of Unstyled Text - ウェブフォントのスタイルがあたってない文字が チラ見えしてしまうこと •

    対策を怠るとプロダクトの体験が悪くなる • デザイナーとコミュニケーションをとりベストな方 法を探す！ 34

35. FOUTの仕組み 35 リクエスト HTMLダウンロード DOM構築 CSSOM構築 ファーストペイント テキスト表示 CSSダウンロード フォントダウンロード

    この間テキストにデバイスフォントが適用されて見える

36. 主な解決策 • Font Loading APIでフォントの読み込みを監視、 読み込み完了するまでローディング画面を 表示するなどの制御を加える • CSSのfont-displayプロパティで表示の タイミングをコントロールする

    36

37. Font Loading APIでフォントのロードを監視 37

38. まとめ

39. X ウェブフォントはユーザーに とってメリットがある 39

40. X 最新の技術を使って 使いにくさ、表示の問題を解決できる 仕組みが整いつつある 40

41. X 日本語ウェブフォントを 広めていきましょう！ 41

42. Thank you.