webフォントを120%活用するための基礎知識&最新動向

## webフォント/OpenTypeの仕様

- CSS Fonts Module Level 3
- https://www.w3.org/TR/css-fonts-3/
- OpenType Font Variations overview - Typography | Microsoft Docs
- https://docs.microsoft.com/ja-jp/typography/opentype/spec/otvaroverview
- svg - Scalable vector graphics table - Typography | Microsoft Docs
- https://docs.microsoft.com/ja-jp/typography/opentype/spec/svg

## コーポレートフォント

- 小林章×小林豊 | こちら、銀座 資生堂 センデン部｜資生堂グループ企業情報サイト
- https://www.shiseidogroup.jp/advertising/talk/6.html
- Introduction | IBM Plex
- https://www.ibm.com/plex/
- The Typekit Blog | A new face for Adobe
- https://blog.typekit.com/2009/05/05/a_new_face_for_1/
- Rebranding Project｜CyberAgent
- https://www.cyberagent.co.jp/special/rebranding/index.html
- Type Project | デンソー フィットフォントプロジェクト
- http://typeproject.com/projects/denso
- Sony Japan | SST Type Project
- https://www.sony.co.jp/SonyInfo/design/works/projects/sst-font/
- Hey! Say! JUMPがグループ名の「a」のためにフォントまで用意しているという話 - in between days
- https://mohritaroh.hateblo.jp/entry/2018/11/16/020000

## webフォント事例
- 小田原市公式ホームページ〜市民の力で未来を拓く希望のまち〜
- http://www.city.odawara.kanagawa.jp/
- 渋谷区公式サイト | 渋谷区公式サイト
- https://www.city.shibuya.tokyo.jp/

## Variable Fonts

- Introducing OpenType Variable Fonts – VariableFonts.io – Medium
- https://medium.com/variable-fonts/https-medium-com-tiro-introducing-opentype-variable-fonts-12ba6cd2369
- Variable Fonts
- https://v-fonts.com/
- #variablefontsハッシュタグ - Instagram
- https://www.instagram.com/explore/tags/variablefonts/

## Color Fonts (OpenType-SVG)

- Color fonts from Adobe Type
- https://color.typekit.com/
- Fontself - Make your own fonts in Illustrator & Photoshop CC. The easiest font maker fro all creatives!
- https://www.fontself.com/
- Trajan Color | Adobe Fonts
- https://fonts.adobe.com/fonts/trajan-color
- CSS での OpenType 機能の構文 - Adobe Fonts
- https://helpx.adobe.com/jp/fonts/using/open-type-syntax.html
- フォントデザインモスルデザイン会社 Schultzschultz - Facebookページ
- https://www.facebook.com/schultzschultzgrafik
- 貂明朝に新ファミリー書体、貂明朝テキストをリリース！カラー絵文字の追加も #AdobeFonts #貂明朝テキスト #AdobeMAXJapan - Adobe Blog
- https://blogs.adobe.com/japan/adobefonts-one-year-of-ten-mincho-colorful-updates-and-ten-mincho-text/

## Adobe のフォント活動

- Release Variable fonts version 1.010 · adobe-fonts/source-code-pro
- https://github.com/adobe-fonts/source-code-pro/releases/tag/variable-fonts
- adobe-fonts/adobe-blank: Adobe Blank
- https://github.com/adobe-fonts/adobe-blank
- Adobe Fonts
- https://github.com/adobe-fonts

Transcript

1. 松⽥直樹
2. দా௚थ CCO, Designer
4. あらためて、
 Webフォントのこと
5. CSS Fonts Module Level 3 W3C Recommendation 20 September 2018 https://www.w3.org/TR/css-fonts-3/
6. @font-face { font-family: Gentium; src: url(http://example.com/Gentium.woff); } p { font-family: Gentium, serif; }
7. font-variation-settings font-feature-settings * CSS Fonts Module Level 4 Working Draft CSSでのテキスト表現がさらに多彩に
8. 合字 • ⼀般的な合字∕標準合字（liga） • 前後関係に依存する字形（calt） • 任意の合字（dlig） ⽂字 • スモールキャップス（smcp） • ⼤⽂字のスモールキャップス（c2sc） • スワッシュ字形（swsh） • デザインのバリエーション（salt） 数値 • ライニング数字（lnum） • オールドスタイル数字（onum） • プロポーショナル数字（pnum） • 等幅数字（tnum） • 分数（frac） • 上付き序数表記（ordn） デザインのセット • デザインセット 01-20（ss##） 幅の異なる字形 • プロポーショナル字形（pwid） • プロポーショナルメトリクス（palt） • プロポーショナルかな（pkna） • 等幅全⾓字形（fwid） • 等幅半⾓字形（hwid） • 字幅半⾓メトリクス（halt） • 等幅三分字形（twid） • 等幅四分字形（qwid） ⽂化的に異なる字形 • JIS78 字形（jp78） • JIS83 字形（jp83） • JIS90 字形（jp90） • JIS2004 字形（jp04） • 旧字体（trad） • ルビ⽤字形（ruby） • 横組み⽤かな（hkna） • 印刷標準字体（nlck） • 修飾字形（nalt） • イタリック（ital） 縦書き機能 • 縦組みペアカーニング（vkrn） • 縦組み⽤字形（vert） • 縦組みプロポーショナルメトリクス（vpal） • 縦組み字幅半⾓メトリクス（vhal） • 縦組み⽤かな（vkna） その他 • カーニング（kern） • 字体組版∕分解（ccmp） • ローカライズの字形（locl） • 上付き⽂字（sups） • 下付き⽂字（subs）
9. font-feature-settings font-variation-settings * CSS Fonts Module Level 4 Working Draft
10. 今どきのフォント利⽤事情 重要性を増す書体表現
11. ⽇本語フォントのオープンソース化 Noto Sans CJK Noto Serif CJK 源ノ⾓ゴシック 源ノ明朝 Noto Sans CJK Noto Serif CJK 源ノ⾓ゴシック 源ノ明朝 Noto Sans CJK Noto Serif CJK 源ノ⾓ゴシック 源ノ明朝 Noto Sans CJK Noto Serif CJK 源ノ⾓ゴシック 源ノ明朝 Noto Sans CJK Noto Serif CJK 源ノ⾓ゴシック 源ノ明朝 Noto Sans CJK Noto Serif CJK 源ノ⾓ゴシック 源ノ明朝 Noto Sans CJK Noto Serif CJK 源ノ⾓ゴシック 源ノ明朝
12. コーポレートフォントで魅せる Adobe Clean
14. Ҿ༻ɿIUUQTNPISJUBSPIIBUFCMPKQFOUSZ
15. ⽇本語フォントを扱うサービスの充実 Adobe Fonts
18. 進化する
 Webフォントと表現
19. Open Typeフォントの進化 デジタルデバイスでこそ性能発揮する新機能
20. Variable Fonts Color Fonts
 (OpenType-SVG)
21. Variable Fonts Color Fonts
 (OpenType-SVG)
22. Variable Fonts 変幻⾃在。ひとつのフォントに可変のバリエーション
23. 単独のフォントファイルで、
 グリフの幅, 太さ, 傾斜などの特性を
 可変させることができる Variable Fonts とは
24. 4社による共同開発
25. IUUQTEPDTNJDSPTPGUDPNKBKQUZQPHSBQIZPQFOUZQFTQFDPUWBSPWFSWJFX
26. 従来のフォント A A A A 200 400 700 900 Variable Fonts A A A A A A A A A A A A A A A A A A A 200 260 300 500 600 760 800 400 700 900
27. 太さ 字幅 傾斜 Weight Width Slant
30. Weight Width Optical IUUQTNFEJVNDPNWBSJBCMFGPOUTIUUQTNFEJVNDPNUJSPJOUSPEVDJOHPQFOUZQFWBSJBCMFGPOUTCBDE Design space
 of a 3-axis 3軸以上の可変特性を
 持たせることも可能
31. IUUQTWGPOUTDPN
32. p { font-family: "Variable Font"; font-variation-settings: "wght" 432, "wdth" 321, "slnt" 289, "ital" 100, "opsz" 126; } 太さ 字幅 傾斜 * CSS Fonts Module Level 4 Working Draft イタリック コントラスト
33. IUUQTWGPOUTDPN
34. IUUQTXXXJOTUBHSBNDPNFYQMPSFUBHTWBSJBCMFGPOUT
35. Color Fonts (OpenType-SVG) Open Typeの中にSVGの表現⼒を
36. グリフをSVGで定義することで、
 単独のフォントファイルの中に
 カラーや字形を複数持つことができる Color Fonts (OpenType-SVG) とは
37. 2011年、 Adobeが提案
38. IUUQTDPMPSUZQFLJUDPN
39. Trajan Color EmojiOne Gustolle Display
40. ちなみに、Color Fonts は数種類存在する SVG COLR CBDT SBIX Vector Vector Bitmap Bitmap
41. IUUQTEPDTNJDSPTPGUDPNKBKQUZQPHSBQIZPQFOUZQFTQFDTWH
42. SVG capability requirements and restrictions Most SVG 1.1 capabilities are supported in OpenType, and should be supported in all OpenType applications that support the SVG table. Some SVG 1.1 capabilities are not required and may be optionally supported in applications. SVG — The SVG (Scalable Vector Graphics) table IUUQTEPDTNJDSPTPGUDPNKBKQUZQPHSBQIZPQFOUZQFTQFDTWH
44. Ai で作れるらしい
45. default ss02 ss04 ss11 ss13 ss19
46. .Trajan-gold { font-family: 'Trajan Color Concept'; font-feature-settings: "ss01"; } * CSS Fonts Module Level 3 デザインセットの指定 （00〜20）
47. .ten-mincho-text { font-family: 'ten-mincho-text'; font-feature-settings: "palt" 1, "ss01"; } * CSS Fonts Module Level 3 プロポーショナルメトリクス
 有効化
48. IUUQTIFMQYBEPCFDPNKQGPOUTVTJOHPQFOUZQFTZOUBYIUNM
49. Color Fonts (OpenType-SVG) Variable Fonts +
51. IUUQTDIVMU[TDIVMU[DPN
52. どれにする？ 4⼤Webフォント
 サービス⽐較
53. Adobe Fonts
54. ⽇本語フォントを選びたいなら ⽇本のフォントは⽇本のサービスに
55. ೔ຊޠ 179ॻମ • ໿1,000ॻମ • ͔ͳॻମ͕๛෋ • MORISAWAύεϙʔτϓϥϯ ೔ຊޠ 310ॻମ • ໿500ॻମ • ਓؾͷஜࢵγϦʔζ • MonotypeԤจॻମ
56. ೔ຊޠ 179ॻମ ೔ຊޠ 310ॻମ ϑΥϯτΛϩʔΧϧʹμ΢ϯϩʔυͰ͖ͳ͍ • ໿1,000ॻମ • ͔ͳॻମ͕๛෋ • MORISAWAύεϙʔτϓϥϯ • ໿500ॻମ • ਓؾͷஜࢵγϦʔζ • MonotypeԤจॻମ
57. ローカルでもWebでも使いたいなら このフォントがない... からの脱却
58. ೔ຊޠ 10ॻମ • ໿900ॻମ • ͢΂ͯΦʔϓϯιʔεɺແྉ ೔ຊޠ 98ॻମ • ໿1,604ॻମ • ಉظແ੍ݶɺPVɾυϝΠϯແ੍ݶ Adobe Fonts
59. IUUQTGPOUTHPPHMFDPN TVCTFUKBQBOFTF
60. ೔ຊޠ 10ॻମ • ໿900ॻମ • ͢΂ͯΦʔϓϯιʔεɺແྉ ೔ຊޠ 98ॻମ • ໿1,604ॻମ • ಉظແ੍ݶɺPVɾυϝΠϯແ੍ݶ Adobe Fonts ೔ຊޠগͳ͍ ऑ఺ͳ͠ʁ
61. Adobe Fonts ໿1,000ॻମ ͏ͪ೔ຊޠ179ॻମ ໿500ॻମ ͏ͪ೔ຊޠ310ॻମ ໿900ॻମ ͏ͪ೔ຊޠ10ॻମ ໿1,604ॻମ ͏ͪ೔ຊޠ98ॻମ ৽ΰɺώϥΪϊͳͲ
 ఆ൪ϑΥϯτ͕๛෋ MORISAWAύεϙʔ τϓϥϯ͋Γ ਓؾͷஜࢵγϦʔζ ໢ཏ υϝΠϯແ੍ݶ ֹ݄¥1,080ʙ Φʔϓϯιʔεŋແྉ CSSಡΈࠐΈ͚ͩͰ ར༻Մೳ ಉظແ੍ݶ PVɾυϝΠϯແ੍ݶ ଞϕϯμʔϑΥϯτ΋ औΓѻ͍ͬͯΔ ϩʔΧϧʹϑΥϯτΛ μ΢ϯϩʔυෆՄ ͪΐͬͱ͓ߴΊ ϩʔΧϧʹϑΥϯτΛ μ΢ϯϩʔυෆՄ ॻମ਺গͳΊ ೔ຊޠॻମগͳ͍ μΠφϛοΫαϒηοτ ඇରԠ CCϓϥϯඞਢ ϝ Ϧ ο τ σ ϝ Ϧ ο τ
62. Noto Sans CJK / 源ノ⾓ゴシック
 使うならどっち？ VS Adobe Fonts
63. Noto Sans CJK 吾輩は猫である。名前はまだ無い。
 どこで⽣れたかとんと⾒当がつかぬ。 何でも薄暗いじめじめした所でニャー ニャー泣いていた事だけは記憶してい る。吾輩はここで始めて⼈間というも のを⾒た。 ݯϊ֯ΰγοΫ Adobe Fonts 吾輩は猫である。名前はまだ無い。
 どこで⽣れたかとんと⾒当がつかぬ。 何でも薄暗いじめじめした所でニャー ニャー泣いていた事だけは記憶してい る。吾輩はここで始めて⼈間というも のを⾒た。 =
65. 11627จࣈ 983छྨ
67. Adobe Fonts
68. Load: 138ms Load: 65ms Adobe Fonts DOMContentLoaded: 13ms DOMContentLoaded: 13ms
69. Adobe Fonts άϦϑͷαϒηοτํ͕ࣜҟͳΔ͔Β Load: 138ms Load: 65ms DOMContentLoaded: 13ms DOMContentLoaded: 13ms
70. Adobe Fonts unicode-range サブセット ダイナミックサブセット 全グリフを約130個単位に分割し、
 フォントファイルを分ける⽅法。 全部で118のファイルになるが、
 表⽰される⽂字が含まれるファイルのみ 読み込まれる。 ページ内に使われている⽂字種類を
 JSで解析し、
 必要なグリフだけを含んだ
 フォントファイルを動的⽣成する⽅法。
71. Adobe Fonts • ⽂字数、 ⽂字の種類が多い 場合に速い • 固定のサブセットなので キャッシュが効く • HTTP2対応 • ⽂字1,000種類程度まで だと爆速 • FOUT（FlashOfUnstyled Text）対応しやすい • HTTP2対応
72. Adobe Fonts を
 選ぶ理由
73. 寛容 利⽤する上での制限が少ない
74. 他ベンダーの⼈気フォントも
75. PV ・ ドメイン ローカル・Web フォント同期 無制限 無制限 全フォント 利⽤可能 Adobe Fonts
76. Webフォントを顧客のWebサイ トに 使⽤することはできますか。 Q.
77. できません。 が、980円/⽉のCCフォトプランでも
 Adobe Fonts は利⽤可能なので、
 顧客にそれを契約してもらいましょう。
78. ワークフローをシームレスに デザインしたものをそのまま実装・表現
79. 祇園精舎の鐘の声、諸⾏無常の響き あり。沙羅双樹の花の⾊、盛者必衰 の理をあらはす。おごれる⼈も久し からず。ただ春の夜の夢のごとし。 たけき者も遂にはほろびぬ、ひとへ に⾵の前の塵に同じ。遠くの異朝を とぶらえば、普の趙⾼、漢の王莽、 祇園精舎の鐘の声、諸⾏無常の響き ·΅Ζ͠ͷॻళ
    ͜͜ʹ
 ͋Γ 祇園精舎の鐘の声、諸⾏無常の響 きあり。沙羅双樹の花の⾊、盛者 必衰の理をあらはす。おごれる⼈ も久しからず。ただ春の夜の夢の ごとし。たけき者も遂にはほろび ぬ、ひとへに⾵の前の塵に同じ。 遠くの異朝をとぶらえば、普の趙 ⾼、漢の王莽、梁の周伊、唐の禄 ⼭、これらは皆、旧主先皇の政に も従はず、楽しみを極め、諫めを も思ひ⼊れず、天下の乱れんこと ᷫԂਫ਼ࣷͷ৊ͷ੠ɺॾߦແৗͷڹ͖ ͋Γɻࠫཏ૒थͷՖͷ৭ɺ੝ऀඞਰ ͷཧΛ͋Β͸͢ɻ͓͝ΕΔਓ΋ٱ͠ ͔Βͣɻͨͩय़ͷ໷ͷເͷ͝ͱ͠ɻ ͚͖ͨऀ΋਱ʹ͸΄Ζͼ͵ɺͻͱ΁ ʹ෩ͷલͷਖʹಉ͡ɻԕ͘ͷҟேΛ ͱͿΒ͑͹ɺීͷ᪅ߴɺ׽ͷԦ᣸ɺ ᷫԂਫ਼ࣷͷ৊ͷ੠ɺॾߦແৗͷڹ͖ まぼろしの書店 ここに
 あり ᷫԂਫ਼ࣷͷ৊ͷ੠ɺॾߦແৗͷڹ ͖͋Γɻࠫཏ૒थͷՖͷ৭ɺ੝ऀ ඞਰͷཧΛ͋Β͸͢ɻ͓͝ΕΔਓ ΋ٱ͔͠Βͣɻͨͩय़ͷ໷ͷເͷ ͝ͱ͠ɻ͚͖ͨऀ΋਱ʹ͸΄Ζͼ ͵ɺͻͱ΁ʹ෩ͷલͷਖʹಉ͡ɻ ԕ͘ͷҟேΛͱͿΒ͑͹ɺීͷ᪅ ߴɺ׽ͷԦ᣸ɺྊͷपҏɺ౜ͷ࿣ ࢁɺ͜ΕΒ͸օɺچओઌߖͷ੓ʹ ΋ै͸ͣɺָ͠ΈΛۃΊɺᨠΊΛ ΋ࢥͻೖΕͣɺఱԼͷཚΕΜ͜ͱ デザインカンプ 実装サイト フォントが異なる...
80. ｢そのフォントがない」がなくなる Adobe Fonts
81. フォントがなくてもその場で同期
82. すべて、 同期・Webフォント使⽤可能
83. 設計から実装までシームレス Direction Prototype Design Develop
84. 設計から実装までシームレス Direction Prototype Design Develop
85. DW先⽣の次回作にご期待ください...？
86. 新仕様・技術をいち早く 新しいものを率先して導⼊
87. IUUQTGPOUTBEPCFDPNGPOUTUSBKBODPMPS
88. 貂明朝テキス ト IUUQTGPOUTBEPCFDPNGPOUTUFONJODIPUFYU
89. 貂明朝テキス ト IUUQTGPOUTBEPCFDPNGPOUTUFONJODIPUFYU
90. IUUQTHJUIVCDPNBEPCFGPOUTTPVSDFDPEFQSPSFMFBTFTUBHWBSJBCMFGPOUT
91. IUUQTHJUIVCDPNBEPCFGPOUT
92. IUUQTHJUIVCDPNBEPCFGPOUTBEPCFCMBOL
93. 企画・Web・DTP・動画、クリエイティブを問わない Adobe Fonts フォント環境のエコシステム
94. さいごに
95. フォントの未来を担う企業
96. Variable Fonts, Color Fonts, Webフォント、これらの進化も
 もちろんうれしいのですが
97. これだけのメンツが揃ってたら
98. Noto Sans CJK Noto Serif CJK 源ノ⾓ゴシック 源ノ明朝 OSにシステムフォントとして⼊れてください。
 お願いです。
99. 現場からは以上です
100. 松⽥直樹 ありがとう
 ございました