$30 off During Our Annual Pro Sale. View Details »

ウェブフォント今昔物語

takanorip
November 15, 2019

 ウェブフォント今昔物語

takanorip

November 15, 2019
Tweet

More Decks by takanorip

Other Decks in Technology

Transcript

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

    View Slide

  2. 自己紹介
    • 株式会社FOLIO フロントエンドエンジニア
    • React / Nuxt.js / Web Components / etc…
    • フォントとFigmaが好き
    • 好きなフォントは新ゴ、Futura、源柔ゴシック、
    機械彫刻用標準書体
    • ウェブフォントの本書いてます
    2

    View Slide

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

    View Slide

  4. 株式会社FOLIO
    4

    View Slide

  5. 株式会社FOLIO
    • 「ワクワクする投資、はじめよう!」
    • オンライン証券の会社
    • LINE Financial株式会社と共同で
    「LINEスマート投資」を運営
    • フロントエンドの技術スタックは
    React, Redux, Flow, etc…
    5

    View Slide

  6. 目次
    • ウェブフォントって何?
    • 3つの視点から考えるウェブフォントのあれこれ
    - ユーザー
    - デザイナー
    - エンジニア
    • まとめ
    6

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  14. 今の
    ウェブフォント
    • 日本語ウェブフォントはたしかに重いけど
    実装を工夫することでそれを回避できるようになっ
    てきた
    - 「エンジニア」のところで詳しく解説
    • 日本語フォントのバリエーションが格段に増えた
    - 日本語フォントを取り扱う
    ウェブフォント配信サービスの増加
    - Google Fonts、Adobe Fonts、
    TypeSquare、FONTPLUS、etc…
    14

    View Slide

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

    View Slide

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

    View Slide

  17. X
    ユーザー目線
    17

    View Slide

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

    View Slide

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

    View Slide

  20. ユーザー目線
    • 読み込みが遅い
    - ユーザーに遅さを感じさせない実装をする必要が
    ある、ごめん
    • フォントデータが重い
    - これはまじごめん致し方ない、これでも前より
    軽くなってる
    • ムダに通信量を消費しないでほしい
    - Google Fonts使えばユーザーの通信量を
    ムダにしない
    20

    View Slide

  21. ウェブフォントが
    ユーザーに
    提供できること
    • 可読性の向上
    - フォントと可読性は密接に関係している
    - ディスレクシア(読字障害)や弱視などの障害を持
    つ人にとって読みやすいフォントを選択する
    ことは非常に重要
    • 株式会社モリサワがいくつかレポート出してるので、
    興味がある人は読んでみて
    - https://www.morisawa.co.jp/fonts/udfont/
    study/
    21

    View Slide

  22. X
    デザイナー目線
    22

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  26. X
    エンジニア目線
    26

    View Slide

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

    View Slide

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

    View Slide

  29. ウェブフォントで
    使われる技術
    • WOFF2形式での圧縮
    • ダイナミックサブセット、ユニコードサブセット
    • Font Loading API
    • CSSのfont-displayプロパティ
    • Service Workerを用いたキャッシュ戦略

    29

    View Slide

  30. ウェブフォント圧縮形式の歴史
    30
    WOFF
    WebOpenFontFormat
    2009年に公開された
    ウェブフォント用の圧縮形式。
    zlibを使用して圧縮されている。
    TTF
    TrueTypeFont
    一般的なフォントファイル。
    自前で圧縮する必要がある。
    WOFF2
    WebOpenFontFormat2
    Brotliという圧縮アルゴリズムを
    使用した新しい圧縮形式。
    WOFFと比較して約30%軽い。

    View Slide

  31. Noto Sans CJK JP Regularのサイズ比較
    31
    TTF
    WOFF
    WOFF2
    ファイルサイズ
    0MB 5MB 10MB 15MB 20MB
    10.7MB
    13.7MB
    16.4MB

    View Slide

  32. ダイナミック
    サブセット
    • フォントを動的にサブセットする手法
    • メリット
    - そのページで使われてる文字しかダウンロード
    されないのでフォントデータを軽くできる
    • デメリット
    - ページ読み込み時にJavaScriptを実行するので
    環境によっては使えない可能性がある
    - SPAや動的に表示が変わるUIと相性が悪い
    32

    View Slide

  33. FOUTを抑止する方法
    33

    View Slide

  34. FOUT
    • Flash of Unstyled Text
    - ウェブフォントのスタイルがあたってない文字が
    チラ見えしてしまうこと
    • 対策を怠るとプロダクトの体験が悪くなる
    • デザイナーとコミュニケーションをとりベストな方
    法を探す!
    34

    View Slide

  35. FOUTの仕組み
    35
    リクエスト
    HTMLダウンロード
    DOM構築 CSSOM構築 ファーストペイント テキスト表示
    CSSダウンロード フォントダウンロード
    この間テキストにデバイスフォントが適用されて見える

    View Slide

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

    View Slide

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

    View Slide

  38. まとめ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  42. Thank you.

    View Slide