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

Slide 1

Slide 1 text

松⽥直樹

Slide 2

Slide 2 text

দా௚थ CCO, Designer

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

あらためて、  Webフォントのこと

Slide 5

Slide 5 text

CSS Fonts Module Level 3 W3C Recommendation 20 September 2018 https://www.w3.org/TR/css-fonts-3/

Slide 6

Slide 6 text

@font-face { font-family: Gentium; src: url(http://example.com/Gentium.woff); } p { font-family: Gentium, serif; }

Slide 7

Slide 7 text

font-variation-settings font-feature-settings * CSS Fonts Module Level 4 Working Draft CSSでのテキスト表現がさらに多彩に

Slide 8

Slide 8 text

合字 • ⼀般的な合字∕標準合字（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）

Slide 9

Slide 9 text

font-feature-settings font-variation-settings * CSS Fonts Module Level 4 Working Draft

Slide 10

Slide 10 text

今どきのフォント利⽤事情重要性を増す書体表現

Slide 11

Slide 11 text

⽇本語フォントのオープンソース化 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 源ノ⾓ゴシック源ノ明朝

Slide 12

Slide 12 text

コーポレートフォントで魅せる Adobe Clean

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Ҿ༻ɿIUUQTNPISJUBSPIIBUFCMPKQFOUSZ

Slide 15

Slide 15 text

⽇本語フォントを扱うサービスの充実 Adobe Fonts

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

進化する  Webフォントと表現

Slide 19

Slide 19 text

Open Typeフォントの進化デジタルデバイスでこそ性能発揮する新機能

Slide 20

Slide 20 text

Variable Fonts Color Fonts  (OpenType-SVG)

Slide 21

Slide 21 text

Variable Fonts Color Fonts  (OpenType-SVG)

Slide 22

Slide 22 text

Variable Fonts 変幻⾃在。ひとつのフォントに可変のバリエーション

Slide 23

Slide 23 text

単独のフォントファイルで、  グリフの幅, 太さ, 傾斜などの特性を  可変させることができる Variable Fonts とは

Slide 24

Slide 24 text

4社による共同開発

Slide 25

Slide 25 text

IUUQTEPDTNJDSPTPGUDPNKBKQUZQPHSBQIZPQFOUZQFTQFDPUWBSPWFSWJFX

Slide 26

Slide 26 text

従来のフォント 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

Slide 27

Slide 27 text

太さ字幅傾斜 Weight Width Slant

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Weight Width Optical IUUQTNFEJVNDPNWBSJBCMFGPOUTIUUQTNFEJVNDPNUJSPJOUSPEVDJOHPQFOUZQFWBSJBCMFGPOUTCBDE Design space  of a 3-axis 3軸以上の可変特性を  持たせることも可能

Slide 31

Slide 31 text

IUUQTWGPOUTDPN

Slide 32

Slide 32 text

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 イタリックコントラスト

Slide 33

Slide 33 text

IUUQTWGPOUTDPN

Slide 34

Slide 34 text

IUUQTXXXJOTUBHSBNDPNFYQMPSFUBHTWBSJBCMFGPOUT

Slide 35

Slide 35 text

Color Fonts (OpenType-SVG) Open Typeの中にSVGの表現⼒を

Slide 36

Slide 36 text

グリフをSVGで定義することで、  単独のフォントファイルの中に  カラーや字形を複数持つことができる Color Fonts (OpenType-SVG) とは

Slide 37

Slide 37 text

2011年、 Adobeが提案

Slide 38

Slide 38 text

IUUQTDPMPSUZQFLJUDPN

Slide 39

Slide 39 text

Trajan Color EmojiOne Gustolle Display

Slide 40

Slide 40 text

ちなみに、Color Fonts は数種類存在する SVG COLR CBDT SBIX Vector Vector Bitmap Bitmap

Slide 41

Slide 41 text

IUUQTEPDTNJDSPTPGUDPNKBKQUZQPHSBQIZPQFOUZQFTQFDTWH

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

Ai で作れるらしい

Slide 45

Slide 45 text

default ss02 ss04 ss11 ss13 ss19

Slide 46

Slide 46 text

.Trajan-gold { font-family: 'Trajan Color Concept'; font-feature-settings: "ss01"; } * CSS Fonts Module Level 3 デザインセットの指定（00〜20）

Slide 47

Slide 47 text

.ten-mincho-text { font-family: 'ten-mincho-text'; font-feature-settings: "palt" 1, "ss01"; } * CSS Fonts Module Level 3 プロポーショナルメトリクス  有効化

Slide 48

Slide 48 text

IUUQTIFMQYBEPCFDPNKQGPOUTVTJOHPQFOUZQFTZOUBYIUNM

Slide 49

Slide 49 text

Color Fonts (OpenType-SVG) Variable Fonts +

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

IUUQTDIVMU[TDIVMU[DPN

Slide 52

Slide 52 text

どれにする？ 4⼤Webフォント  サービス⽐較

Slide 53

Slide 53 text

Adobe Fonts

Slide 54

Slide 54 text

⽇本語フォントを選びたいなら⽇本のフォントは⽇本のサービスに

Slide 55

Slide 55 text

೔ຊޠ 179ॻମ • ໿1,000ॻମ • ͔ͳॻମ͕๛෋ • MORISAWAύεϙʔτϓϥϯ ೔ຊޠ 310ॻମ • ໿500ॻମ • ਓؾͷஜࢵγϦʔζ • MonotypeԤจॻମ

Slide 56

Slide 56 text

೔ຊޠ 179ॻମ ೔ຊޠ 310ॻମ ϑΥϯτΛϩʔΧϧʹμ΢ϯϩʔυͰ͖ͳ͍ • ໿1,000ॻମ • ͔ͳॻମ͕๛෋ • MORISAWAύεϙʔτϓϥϯ • ໿500ॻମ • ਓؾͷஜࢵγϦʔζ • MonotypeԤจॻମ

Slide 57

Slide 57 text

ローカルでもWebでも使いたいならこのフォントがない... からの脱却

Slide 58

Slide 58 text

೔ຊޠ 10ॻମ • ໿900ॻମ • ͢΂ͯΦʔϓϯιʔεɺແྉ ೔ຊޠ 98ॻମ • ໿1,604ॻମ • ಉظແ੍ݶɺPVɾυϝΠϯແ੍ݶ Adobe Fonts

Slide 59

Slide 59 text

IUUQTGPOUTHPPHMFDPN TVCTFUKBQBOFTF

Slide 60

Slide 60 text

೔ຊޠ 10ॻମ • ໿900ॻମ • ͢΂ͯΦʔϓϯιʔεɺແྉ ೔ຊޠ 98ॻମ • ໿1,604ॻମ • ಉظແ੍ݶɺPVɾυϝΠϯແ੍ݶ Adobe Fonts ೔ຊޠগͳ͍ ऑ఺ͳ͠ʁ

Slide 61

Slide 61 text

Adobe Fonts ໿1,000ॻମ ͏ͪ೔ຊޠ179ॻମ ໿500ॻମ ͏ͪ೔ຊޠ310ॻମ ໿900ॻମ ͏ͪ೔ຊޠ10ॻମ ໿1,604ॻମ ͏ͪ೔ຊޠ98ॻମ ৽ΰɺώϥΪϊͳͲ  ఆ൪ϑΥϯτ͕๛෋ MORISAWAύεϙʔ τϓϥϯ͋Γ ਓؾͷஜࢵγϦʔζ ໢ཏ υϝΠϯແ੍ݶ ֹ݄¥1,080ʙ Φʔϓϯιʔεŋແྉ CSSಡΈࠐΈ͚ͩͰ ར༻Մೳ ಉظແ੍ݶ PVɾυϝΠϯແ੍ݶ ଞϕϯμʔϑΥϯτ΋ औΓѻ͍ͬͯΔ ϩʔΧϧʹϑΥϯτΛ μ΢ϯϩʔυෆՄ ͪΐͬͱ͓ߴΊ ϩʔΧϧʹϑΥϯτΛ μ΢ϯϩʔυෆՄ ॻମ਺গͳΊ ೔ຊޠॻମগͳ͍ μΠφϛοΫαϒηοτ ඇରԠ CCϓϥϯඞਢ ϝ Ϧ ο τ σ ϝ Ϧ ο τ

Slide 62

Slide 62 text

Noto Sans CJK / 源ノ⾓ゴシック  使うならどっち？ VS Adobe Fonts

Slide 63

Slide 63 text

Noto Sans CJK 吾輩は猫である。名前はまだ無い。  どこで⽣れたかとんと⾒当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて⼈間というものを⾒た。 ݯϊ֯ΰγοΫ Adobe Fonts 吾輩は猫である。名前はまだ無い。  どこで⽣れたかとんと⾒当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて⼈間というものを⾒た。 =

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

11627จࣈ 983छྨ

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

Adobe Fonts

Slide 68

Slide 68 text

Load: 138ms Load: 65ms Adobe Fonts DOMContentLoaded: 13ms DOMContentLoaded: 13ms

Slide 69

Slide 69 text

Adobe Fonts άϦϑͷαϒηοτํ͕ࣜҟͳΔ͔Β Load: 138ms Load: 65ms DOMContentLoaded: 13ms DOMContentLoaded: 13ms

Slide 70

Slide 70 text

Adobe Fonts unicode-range サブセットダイナミックサブセット全グリフを約130個単位に分割し、  フォントファイルを分ける⽅法。全部で118のファイルになるが、  表⽰される⽂字が含まれるファイルのみ読み込まれる。ページ内に使われている⽂字種類を  JSで解析し、  必要なグリフだけを含んだ  フォントファイルを動的⽣成する⽅法。

Slide 71

Slide 71 text

Adobe Fonts • ⽂字数、⽂字の種類が多い場合に速い • 固定のサブセットなのでキャッシュが効く • HTTP2対応 • ⽂字1,000種類程度までだと爆速 • FOUT（FlashOfUnstyled Text）対応しやすい • HTTP2対応

Slide 72

Slide 72 text

Adobe Fonts を  選ぶ理由

Slide 73

Slide 73 text

寛容利⽤する上での制限が少ない

Slide 74

Slide 74 text

他ベンダーの⼈気フォントも

Slide 75

Slide 75 text

PV ・ドメインローカル・Web フォント同期無制限無制限全フォント利⽤可能 Adobe Fonts

Slide 76

Slide 76 text

Webフォントを顧客のWebサイトに使⽤することはできますか。 Q.

Slide 77

Slide 77 text

できません。が、980円/⽉のCCフォトプランでも  Adobe Fonts は利⽤可能なので、  顧客にそれを契約してもらいましょう。

Slide 78

Slide 78 text

ワークフローをシームレスにデザインしたものをそのまま実装・表現

Slide 79

Slide 79 text

祇園精舎の鐘の声、諸⾏無常の響きあり。沙羅双樹の花の⾊、盛者必衰の理をあらはす。おごれる⼈も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへに⾵の前の塵に同じ。遠くの異朝をとぶらえば、普の趙⾼、漢の王莽、祇園精舎の鐘の声、諸⾏無常の響き ·΅Ζ͠ͷॻళ ͜͜ʹ  ͋Γ 祇園精舎の鐘の声、諸⾏無常の響きあり。沙羅双樹の花の⾊、盛者必衰の理をあらはす。おごれる⼈も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへに⾵の前の塵に同じ。遠くの異朝をとぶらえば、普の趙⾼、漢の王莽、梁の周伊、唐の禄⼭、これらは皆、旧主先皇の政にも従はず、楽しみを極め、諫めをも思ひ⼊れず、天下の乱れんこと ᷫԂਫ਼ࣷͷ৊ͷ੠ɺॾߦແৗͷڹ͖ ͋Γɻࠫཏ૒थͷՖͷ৭ɺ੝ऀඞਰ ͷཧΛ͋Β͸͢ɻ͓͝ΕΔਓ΋ٱ͠ ͔Βͣɻͨͩय़ͷ໷ͷເͷ͝ͱ͠ɻ ͚͖ͨऀ΋਱ʹ͸΄Ζͼ͵ɺͻͱ΁ ʹ෩ͷલͷਖʹಉ͡ɻԕ͘ͷҟேΛ ͱͿΒ͑͹ɺීͷ᪅ߴɺ׽ͷԦ᣸ɺ ᷫԂਫ਼ࣷͷ৊ͷ੠ɺॾߦແৗͷڹ͖ まぼろしの書店ここに  あり ᷫԂਫ਼ࣷͷ৊ͷ੠ɺॾߦແৗͷڹ ͖͋Γɻࠫཏ૒थͷՖͷ৭ɺ੝ऀ ඞਰͷཧΛ͋Β͸͢ɻ͓͝ΕΔਓ ΋ٱ͔͠Βͣɻͨͩय़ͷ໷ͷເͷ ͝ͱ͠ɻ͚͖ͨऀ΋਱ʹ͸΄Ζͼ ͵ɺͻͱ΁ʹ෩ͷલͷਖʹಉ͡ɻ ԕ͘ͷҟேΛͱͿΒ͑͹ɺීͷ᪅ ߴɺ׽ͷԦ᣸ɺྊͷपҏɺ౜ͷ࿣ ࢁɺ͜ΕΒ͸օɺچओઌߖͷ੓ʹ ΋ै͸ͣɺָ͠ΈΛۃΊɺᨠΊΛ ΋ࢥͻೖΕͣɺఱԼͷཚΕΜ͜ͱ デザインカンプ実装サイトフォントが異なる...

Slide 80

Slide 80 text

｢そのフォントがない」がなくなる Adobe Fonts

Slide 81

Slide 81 text

フォントがなくてもその場で同期

Slide 82

Slide 82 text

すべて、同期・Webフォント使⽤可能

Slide 83

Slide 83 text

設計から実装までシームレス Direction Prototype Design Develop

Slide 84

Slide 84 text

設計から実装までシームレス Direction Prototype Design Develop

Slide 85

Slide 85 text

DW先⽣の次回作にご期待ください...？

Slide 86

Slide 86 text

新仕様・技術をいち早く新しいものを率先して導⼊

Slide 87

Slide 87 text

IUUQTGPOUTBEPCFDPNGPOUTUSBKBODPMPS

Slide 88

Slide 88 text

貂明朝テキスト IUUQTGPOUTBEPCFDPNGPOUTUFONJODIPUFYU

Slide 89

Slide 89 text

貂明朝テキスト IUUQTGPOUTBEPCFDPNGPOUTUFONJODIPUFYU

Slide 90

Slide 90 text

IUUQTHJUIVCDPNBEPCFGPOUTTPVSDFDPEFQSPSFMFBTFTUBHWBSJBCMFGPOUT

Slide 91

Slide 91 text

IUUQTHJUIVCDPNBEPCFGPOUT

Slide 92

Slide 92 text

IUUQTHJUIVCDPNBEPCFGPOUTBEPCFCMBOL

Slide 93

Slide 93 text

企画・Web・DTP・動画、クリエイティブを問わない Adobe Fonts フォント環境のエコシステム

Slide 94

Slide 94 text

さいごに

Slide 95

Slide 95 text

フォントの未来を担う企業

Slide 96

Slide 96 text

Variable Fonts, Color Fonts, Webフォント、これらの進化も  もちろんうれしいのですが

Slide 97

Slide 97 text

これだけのメンツが揃ってたら

Slide 98

Slide 98 text

Noto Sans CJK Noto Serif CJK 源ノ⾓ゴシック源ノ明朝 OSにシステムフォントとして⼊れてください。  お願いです。