Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ウェブフォント今昔物語
Search
takanorip
November 15, 2019
Technology
5
4.5k
ウェブフォント今昔物語
takanorip
November 15, 2019
Tweet
Share
More Decks by takanorip
See All by takanorip
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
670
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.1k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.5k
早わかり W3C Community Group
takanorip
0
410
Ubieとアクセシビリティのこれからを考える
takanorip
0
390
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.7k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k
デザインシステム運用とOKRの良い関係
takanorip
0
1.9k
Other Decks in Technology
See All in Technology
OCI 運用監視サービス 概要
oracle4engineer
PRO
0
4.8k
iOSチームとAndroidチームでブランチ運用が違ったので整理してます
sansantech
PRO
0
120
EventHub Startup CTO of the year 2024 ピッチ資料
eventhub
0
110
マルチモーダル / AI Agent / LLMOps 3つの技術トレンドで理解するLLMの今後の展望
hirosatogamo
37
12k
Application Development WG Intro at AppDeveloperCon
salaboy
0
180
CysharpのOSS群から見るModern C#の現在地
neuecc
1
3k
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
460
サイバーセキュリティと認知バイアス:対策の隙を埋める心理学的アプローチ
shumei_ito
0
380
社内で最大の技術的負債のリファクタリングに取り組んだお話し
kidooonn
1
540
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
1
1.6k
Taming you application's environments
salaboy
0
180
[FOSS4G 2024 Japan LT] LLMを使ってGISデータ解析を自動化したい!
nssv
1
210
Featured
See All Featured
Music & Morning Musume
bryan
46
6.2k
Designing for humans not robots
tammielis
250
25k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
BBQ
matthewcrist
85
9.3k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Done Done
chrislema
181
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
Building an army of robots
kneath
302
43k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Transcript
ウェブフォント今昔物語 2019.11.16 Takanori Oki @フロントエンドカンファレンス福岡2019 Copyright © 2019 FOLIO, Ltd.
All Rights Reserved.
自己紹介 • 株式会社FOLIO フロントエンドエンジニア • React / Nuxt.js / Web
Components / etc… • フォントとFigmaが好き • 好きなフォントは新ゴ、Futura、源柔ゴシック、 機械彫刻用標準書体 • ウェブフォントの本書いてます 2
誰でもつかえる! ウェブフォント 実践マニュアル 3
株式会社FOLIO 4
株式会社FOLIO • 「ワクワクする投資、はじめよう!」 • オンライン証券の会社 • LINE Financial株式会社と共同で 「LINEスマート投資」を運営 •
フロントエンドの技術スタックは React, Redux, Flow, etc… 5
目次 • ウェブフォントって何? • 3つの視点から考えるウェブフォントのあれこれ - ユーザー - デザイナー -
エンジニア • まとめ 6
今回みなさんに伝えたいこと
X ウェブフォントはこわくない! 8
ウェブフォントって何?
X 10 ここに書いてあるよ!
What is “Web Font”? 11 サーバーに フォントデータを アップロード サーバーから フォントデータを
取得して表⽰
昔の ウェブフォント 12 フォントデータが重い 日本語フォントの バリエーションが少ない
日本語フォントが 重い理由 • 文字数が多い • グリフが複雑 13
今の ウェブフォント • 日本語ウェブフォントはたしかに重いけど 実装を工夫することでそれを回避できるようになっ てきた - 「エンジニア」のところで詳しく解説 • 日本語フォントのバリエーションが格段に増えた
- 日本語フォントを取り扱う ウェブフォント配信サービスの増加 - Google Fonts、Adobe Fonts、 TypeSquare、FONTPLUS、etc… 14
3つの視点から考える ウェブフォントのあれこれ
3つの視点 16 エンジニア ユーザー デザイナー
X ユーザー目線 17
X よくあるユーザーの声 18
ユーザー目線 「読み込みが遅い、フォントデータが重い、 ムダに通信量を消費しないでほしい」 19
ユーザー目線 • 読み込みが遅い - ユーザーに遅さを感じさせない実装をする必要が ある、ごめん • フォントデータが重い - これはまじごめん致し方ない、これでも前より
軽くなってる • ムダに通信量を消費しないでほしい - Google Fonts使えばユーザーの通信量を ムダにしない 20
ウェブフォントが ユーザーに 提供できること • 可読性の向上 - フォントと可読性は密接に関係している - ディスレクシア(読字障害)や弱視などの障害を持 つ人にとって読みやすいフォントを選択する
ことは非常に重要 • 株式会社モリサワがいくつかレポート出してるので、 興味がある人は読んでみて - https://www.morisawa.co.jp/fonts/udfont/ study/ 21
X デザイナー目線 22
デザイナー目線 • デザインの幅が広がる - フォントで全体の印象が大きく変わる - 全体のデザインを考える上で欠かせない要素 • デバイスやOSに関係なく同じデザインを提供できる -
そもそも、特定のOSにしか搭載されてないフォント でデザイン考えるのおかしくない? 23
デザイナー目線 デザイナーにメリットしかない! 24
注意点 • ライセンスでウェブフォントとしての利用が 禁止されてる場合があるので注意が必要 • ライセンス周りはかなりややこしいので 配信サービスを使うのが安全 • ウェブフォントとして使うには 「フォントの改変」「再配布」の許可が必要
25
X エンジニア目線 26
エンジニア目線 「重い。ちらつく。なんかよくわからない。 時間かけたくない。必要あるの?」 27
エンジニア目線 Googleが書いている 「ウェブフォントの最適化」を実践する https://developers.google.com/web/fundamentals/ performance/optimizing-content-efficiency/webfont- optimization?hl=ja 28
ウェブフォントで 使われる技術 • WOFF2形式での圧縮 • ダイナミックサブセット、ユニコードサブセット • Font Loading API
• CSSのfont-displayプロパティ • Service Workerを用いたキャッシュ戦略 • <link rel=“preload"> 29
ウェブフォント圧縮形式の歴史 30 WOFF WebOpenFontFormat 2009年に公開された ウェブフォント用の圧縮形式。 zlibを使用して圧縮されている。 TTF TrueTypeFont 一般的なフォントファイル。
自前で圧縮する必要がある。 WOFF2 WebOpenFontFormat2 Brotliという圧縮アルゴリズムを 使用した新しい圧縮形式。 WOFFと比較して約30%軽い。
Noto Sans CJK JP Regularのサイズ比較 31 TTF WOFF WOFF2 ファイルサイズ
0MB 5MB 10MB 15MB 20MB 10.7MB 13.7MB 16.4MB
ダイナミック サブセット • フォントを動的にサブセットする手法 • メリット - そのページで使われてる文字しかダウンロード されないのでフォントデータを軽くできる •
デメリット - ページ読み込み時にJavaScriptを実行するので 環境によっては使えない可能性がある - SPAや動的に表示が変わるUIと相性が悪い 32
FOUTを抑止する方法 33
FOUT • Flash of Unstyled Text - ウェブフォントのスタイルがあたってない文字が チラ見えしてしまうこと •
対策を怠るとプロダクトの体験が悪くなる • デザイナーとコミュニケーションをとりベストな方 法を探す! 34
FOUTの仕組み 35 リクエスト HTMLダウンロード DOM構築 CSSOM構築 ファーストペイント テキスト表示 CSSダウンロード フォントダウンロード
この間テキストにデバイスフォントが適用されて見える
主な解決策 • Font Loading APIでフォントの読み込みを監視、 読み込み完了するまでローディング画面を 表示するなどの制御を加える • CSSのfont-displayプロパティで表示の タイミングをコントロールする
36
Font Loading APIでフォントのロードを監視 37
まとめ
X ウェブフォントはユーザーに とってメリットがある 39
X 最新の技術を使って 使いにくさ、表示の問題を解決できる 仕組みが整いつつある 40
X 日本語ウェブフォントを 広めていきましょう! 41
Thank you.