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

76b389efeca4c8c53721161abb316b6d?s=47 Naoki Matsuda
November 21, 2018

 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

76b389efeca4c8c53721161abb316b6d?s=128

Naoki Matsuda

November 21, 2018
Tweet

Transcript

  1. 松⽥直樹

  2. দా௚थ CCO, Designer

  3. None
  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

  13. None
  14. Ҿ༻ɿIUUQTNPISJUBSPIIBUFCMPKQFOUSZ

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

  16. None
  17. None
  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

  28. None
  29. None
  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
  43. None
  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 +

  50. None
  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 吾輩は猫である。名前はまだ無い。
 どこで⽣れたかとんと⾒当がつかぬ。 何でも薄暗いじめじめした所でニャー ニャー泣いていた事だけは記憶してい る。吾輩はここで始めて⼈間というも のを⾒た。 =
  64. None
  65. 11627จࣈ 983छྨ

  66. None
  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. 松⽥直樹 ありがとう
 ございました