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.7k
ウェブフォント今昔物語
takanorip
November 15, 2019
Tweet
Share
More Decks by takanorip
See All by takanorip
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
430
Bulletproof Design System with TypeScript
takanorip
6
3.9k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
160
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
920
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
7.4k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
2k
早わかり W3C Community Group
takanorip
0
500
Ubieとアクセシビリティのこれからを考える
takanorip
0
470
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
4k
Other Decks in Technology
See All in Technology
メルカリIBIS:AIが拓く次世代インシデント対応
0gm
2
510
Goでマークダウンの独自記法を実装する
lag129
0
200
夢の印税生活 / Life on Royalties
tmtms
0
270
GitHub Copilot coding agent を推したい / AIDD Nagoya #1
tnir
2
4.1k
広島発!スタートアップ開発の裏側
tsankyo
0
190
我々は雰囲気で仕事をしている / How can we do vibe coding as well
naospon
2
200
信頼できる開発プラットフォームをどう作るか?-Governance as Codeと継続的監視/フィードバックが導くPlatform Engineeringの進め方
yuriemori
1
400
Android Studio の 新しいAI機能を試してみよう / Try out the new AI features in Android Studio
yanzm
0
240
第64回コンピュータビジョン勉強会@関東(後編)
tsukamotokenji
0
220
AIは変更差分からユニットテスト_結合テスト_システムテストでテストすべきことが出せるのか?
mineo_matsuya
5
3.1k
歴代のWeb Speed Hackathonの出題から考えるデグレしないパフォーマンス改善
shuta13
6
580
Amazon Bedrock AgentCore でプロモーション用動画生成エージェントを開発する
nasuvitz
6
370
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Raft: Consensus for Rubyists
vanstee
140
7.1k
BBQ
matthewcrist
89
9.8k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Code Review Best Practice
trishagee
70
19k
Unsuck your backbone
ammeep
671
58k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
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.