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
740
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.7k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.7k
早わかり W3C Community Group
takanorip
0
450
Ubieとアクセシビリティのこれからを考える
takanorip
0
410
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.7k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k
デザインシステム運用とOKRの良い関係
takanorip
0
2k
Other Decks in Technology
See All in Technology
月間60万ユーザーを抱える 個人開発サービス「Walica」の 技術スタック変遷
miyachin
1
140
信頼されるためにやったこと、 やらなかったこと。/What we did to be trusted, What we did not do.
bitkey
PRO
0
2.2k
I could be Wrong!! - Learning from Agile Experts
kawaguti
PRO
8
3.4k
Reactフレームワークプロダクトを モバイルアプリにして、もっと便利に。 ユーザに価値を届けよう。/React Framework with Capacitor
rdlabo
0
130
Azureの開発で辛いところ
re3turn
0
240
RubyでKubernetesプログラミング
sat
PRO
4
160
AWSサービスアップデート 2024/12 Part3
nrinetcom
PRO
0
140
コロプラのオンボーディングを採用から語りたい
colopl
5
1.2k
【NGK2025S】動物園(PINTO_model_zoo)に遊びに行こう
kazuhitotakahashi
0
230
深層学習と3Dキャプチャ・3Dモデル生成(土木学会応用力学委員会 応用数理・AIセミナー)
pfn
PRO
0
460
新卒1年目、はじめてのアプリケーションサーバー【IBM WebSphere Liberty】
ktgrryt
0
120
Bring Your Own Container: When Containers Turn the Key to EDR Bypass/byoc-avtokyo2024
tkmru
0
850
Featured
See All Featured
Six Lessons from altMBA
skipperchong
27
3.6k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7.1k
Agile that works and the tools we love
rasmusluckow
328
21k
The Cost Of JavaScript in 2023
addyosmani
46
7.2k
A Tale of Four Properties
chriscoyier
157
23k
It's Worth the Effort
3n
183
28k
The Cult of Friendly URLs
andyhume
78
6.1k
Producing Creativity
orderedlist
PRO
343
39k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
960
Raft: Consensus for Rubyists
vanstee
137
6.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
A designer walks into a library…
pauljervisheath
205
24k
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.