TypeTalks第10回「もっと知りたい！Webフォント」
72 likes12,938 views
2012年5月12日に青山ブックセンター本店で開催された欧文書体セミナーTypeTalks第10回「もっと知りたい！Webフォント」のスライドです。 ・・・ 【追記1】スライド10の「Arialは何と呼ぶ？」は、日本においてArialは色々な呼び方が流通しているという蛇足話で、正しい読み方を追求する意図はありません。統計データは当ブログのFacebookページで皆さんに行ったアンケート結果です。スライドのペラ1画像がひとり歩きしてしまっているため、この場で補足いたします。 【追記2】スライド62の「OpenTypeフォント機能に対応するブラウザ」は、現在Chromeも対応しています。 ・・・ 1. Webフォントとは？ 1-1. Webで使えるフォント 1-2. Webフォントサービス 1-3. 利用者にとってのメリット 1-4. 制作者にとってのメリット 2. Webフォントの今 2-1. Webフォントサービスの今 2-2. 付帯・補助サービスの紹介 2-3. OpenTypeフォント機能が実現 3. Webフォントの課題 3-1. Windows上の表示問題 3-2. 使いたいフォントが選べない？ 4. フォントブログのWebフォント 4-1. 現在使っているWebフォント 4-2. ロゴをWebフォント化 5. 本日のまとめ 5-1. 相性がよいサイトとは？ 5-2. Webタイポグラフィとは？ ・・・ ABCでabcを語ろう！ TypeTalks 第10回 「もっと知りたい！Webフォント Webフォントの基礎が分かる“これまで”と、海外の最新事情から知る“これから”」 http://www.aoyamabc.co.jp/culture/typetalks10/
TypeTalks第10回「もっと知りたい！Webフォント」
- 1. ABCで abc を語ろう ! TypeTalks 第10 回 「もっと知りたい！ Web フォント」 Web フォントの基礎が分かる“これまで” 海外の最新事情から知る と、 “これから” 2012年5月12日時点の内容ですのでご注意ください。
- 2. 自己紹介 • 1982年生まれ • Webデザイナー・ライター • フォントブログ運営 • TypeTalks第2回・第3回・第8回 • CSS Nite, LP21 • 名古屋トライデント専門学校
- 3. 他媒体でも寄稿しています
- 4. 本日のアジェンダ 1. Webフォントとは？ 2. Webフォントの今 3. Webフォントの課題 4. フォントブログのWebフォント 5. 本日のまとめ – 海外サイトのWebフォント考察
- 7. Webセーフフォント Arial Georgia Verdana Comic Sans Impact
- 8. Arial？ Arial
- 9. ArialはHelveticaのコピー書体？ Arial ABCDEFGabcdefg12345 Helvetica ABCDEFGabcdefg12345 Akzidenz Grotesk ABCDEFGabcdefg12345 Univers ABCDEFGabcdefg12345
- 10. Arialは何と呼ぶ？ Arial 4% 2% 5% 9% 46% アライアル アリアル 14% エリアル エイリアル アリエル 20% エアリアル その他 有効回答197名：フォントブログFacebookページ調べ
- 11. HelveticaはWebセーフフォントではない Helvetica
- 12. 複数フォント名を並べて記述 #sample1 { font-family: Helvetica, Arial, sans-serif; }
- 13. 日本語書体のWebセーフフォントは無い Osaka ヒラギノ角ゴ
- 14. 画像文字
- 15. Webフォントの簡単な仕組み Helvetica F Webサイト サーバ
- 17. Webフォントサービスの仕組み Helvetica F F F Futura Webサイト 月額・PV課金 Webフォントサービス 専用コードの発行 専用コードの挿入 CSSの設定 Webデザイナー
- 18. Webフォントサービスが存在する3つの理由 1. 面倒なフォーマットの分岐処理 .EOT .OTF .SVG .WOFF .TTF
- 19. Webフォントのフォーマット EOT =Embedded OpenType IE 4–8
- 20. Webフォントのフォーマット WOFF =Web Open Font Format Chrome Firefox Opera Safari 6+ 3.5+ 11+ 5.1+ IE 9+
- 21. 環境に応じた複数のフォーマットを配信している EOTのHelvetica Webサイト Windows+IE F F F WOFFのHelvetica Webサイト Mac+Safari Webフォントサービス 専用コードの発行 専用コードの挿入 CSSの設定 Webデザイナー
- 22. Webフォントサービスが存在する3つの理由 2. データの不正ダウンロード防止 F F F
- 23. Webフォントサービスが存在する3つの理由 3. フォント業界の新たなビジネスモデル Web
- 24. Webフォントサービスが存在する理由のまとめ .EOT .OTF .SVG .WOFF .TTF 1. 面倒なフォーマットの分岐処理 F F Web F 3. フォント業界の 2. データの不正ダウンロード防止 新たなビジネスモデル
- 25. 日本語フォントの容量 F あ Helvetica 新ゴ 60kb 5,000kb
- 26. ページ内で使われている文字だけのフォントファイルを生成 ダイナミック・サブセッティング
- 28. 利用者にとっての3つのメリット 1. 選択してコピー＆ペーストできる
- 29. 利用者にとっての3つのメリット 2. 拡大・縮小してもぼやけない 新ゴ 新ゴ
- 30. 利用者にとっての3つのメリット 3. 検索にひっかかりやすくなる
- 31. 利用者にとっての3つのメリットのまとめ 1. 選択してコピー＆ペーストできる 新ゴ 新ゴ 2. 拡大・縮小してもぼやけない 3. 検索にひっかかりやすくなる
- 33. 制作者にとっての3つのメリット 1. 作業を引き継げる・早く帰宅できる 0 75 150 225 300 画像文字 Webフォント 作業時間(秒)
- 34. Webデザイナーの修正フローを実演 “企業情報”→“コーポレート情報”に変更をしてください
- 36. Webデザイナーの修正フロー【画像文字編】 1. Photoshopなどの画像編集ソフトを立ち上げる 169px
- 37. Webデザイナーの修正フロー【画像文字編】 2. 任意のフォントで編集しスライスの幅を変更 245px
- 38. Webデザイナーの修正フロー【画像文字編】 3. Web用に画像を書き出し
- 39. Webデザイナーの修正フロー【画像文字編】 4. 画像の幅の値を変更する <img src="img/company_title.gif" width="169" ... /> <img src="img/company_title.gif" width="245" ... />
- 40. Webデザイナーの修正フロー【画像文字編】 5. altの値を変更する <img ... width="169" alt= "企業情報" ... /> <img ... width="245" alt= "コーポレート情報" ... />
- 42. Webデザイナーの修正フロー【Webフォント編】 <h2>企業情報</h2> <h2>コーポレート情報</h2> h2 { font-family: 新ゴ; }
- 43. 制作者にとっての3つのメリット 2. 画像ファイルが大幅に減る
- 44. 制作者にとっての3つのメリット 3. 様々な環境に対応可能 レスポンシブデザイン
- 48. 昨年はfonts.comとTypekitをメインに取り上げました 有名なフォントを使いたい人向け 個性派フォントを使いたい人向け
- 49. AdobeがTypekitを買収
- 51. コスト削減のため買取型も普及
- 52. 販売するデータのフォーマット EOT・WOFFフォーマットでの販売 .EOT .OTF .SVG .WOFF .TTF
- 54. Web Fonts Preview・FONTDROPPER 1000 どんなサイトでもWebフォントで確認できる
- 55. Typecast 複数のWebフォントサービスを一元管理できる
- 56. FontFont Subsetter 購入したWebフォントデータをサブセット化できる
- 58. OpenTypeフォントって何？
- 59. OpenTypeフォントって何？ • 最大 65,535文字収録 • 様々なデータを1つに集約 • 高機能なのに容量が少ない
- 60. OpenTypeフォント機能の代表例 fl ⅝ 246 ffi 合字 246 ライニング数字と 分数 （リガチャ） オールドスタイル数字
- 62. OpenTypeフォント機能に対応するブラウザ Firefox 4+ IE 10+
- 63. どんな場面でOpenTypeフォント機能を使うのか fl ⅝ 246 ffi 合字 246 ライニング数字と 分数 （リガチャ） オールドスタイル数字
- 70. OSやブラウザによりレンダリングが異なる MacOS X Windows XP Safari Internet Explorer Hairline Gothic Firmin Didot Proxima Nova Museo
- 71. OSやブラウザによりレンダリングが異なる リュウミンEH-KL 見出しミンMA31 MacOS X Safari 黎ミンY30 M リュウミンEH-KL 見出しミンMA31 Windows XP Internet Explorer 黎ミンY30 M
- 72. フォントサイズが大きければ問題はない？ Windows XP Internet Explorer リュウミンM-KL 75px/100px
- 73. Webフォントで注目を浴びるスラブセリフ体 HHHスラブセリフ ヘアラインセリフ ブラケテッドセリフ
- 74. よく使われるスラブセリフ体 Museo Slab by exljbris Font Foundry Clarendon by Various Foundries
- 75. Webフォントで注目を浴びるスラブセリフ体 Webタイポグラフィでは 文字の読みやすさが重要 ぼやけがちな細いセリフ部分の 骨格がしっかりとしているため 見出し部分に映える Fonts.com Blog – 10 Web Typography Trends to Watch in 2012
- 76. Evernoteはロゴ・サイトにスラブセリフ体 Evernote
- 78. 例えばDIN DIN Next™ FF DIN PF DIN Text Pro®
- 81. フォントブログで使われているWebフォント 筑紫A丸ゴシック Std M Adlle SemiBold Ratio Regular I-OTF新ゴシックPro M ソフトゴシック R Brevia Bold
- 82. MyFontsのここに注目 MyFontsトップページ MyFonts Webfonts Showcase
- 83. ここにもWebフォント PETITBOYS Regular
- 85. PETITBOYSロゴ
- 86. Glyphs Glyphs ¥26,000 Glyphs Mini ¥3,900
- 88. 必要な文字だけのOTFを生成
- 90. FontSquirrelの@font-face GeneratorでWebフォントファイルを生成 簡単に設置できるWebフォントキットが生成される
- 91. そのまま設置する 拡大してもぼやけない
- 92. ここにもWebフォント Part2 Adlle SemiBold & Bold
- 94. WebフォントはCSS3と組み合わせて使う #HeaderR_A { text-shadow: -1px -1px 0px #9f896a, 1px -1px 0px #9f896a, 1px 1px 0px #9f896a, -1px 1px 0px #9f896a; }
- 95. WebフォントはCSS3と組み合わせて使う #HeaderR_A { -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); -o-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); }
- 98. Webフォントと相性がよいサイトとは？ 1. スマートフォンやタブレット向けサイト Webフォントを最適に表示できる環境が整っている
- 99. Webフォントと相性がよいサイトとは？ 2. 動的・インタラクティブなサイト 文字を “テキスト” として扱うことができる
- 100. Webフォントと相性がよいサイトとは？ 3. 文字がデザインの中心となっているサイト
- 102. Webデザイン・Webタイポグラフィとは？ 環境によって姿やカタチを変える Webデザイン・Webタイポグラフィ 246 fl テキストの装飾や レンダリング レイアウト OpenTypeフォント機能
- 103. プログレッシブ・エンハンスメントとは？ プログレッシブ エンハンスメント ・ Progressive Enhancement 古い環境は最低限を維持しつつ、 最新環境にはより豊かな表現を実現
- 104. プログレッシブ・エンハンスメントとは？ Mac+Firefox12 Win+IE7
- 105. 本日のまとめ Webデザイン・Webタイポグラフィは、 決して紙媒体の延長ではない スマートフォン・タブレットの普及や Webフォントの登場から 改めてWeb上の文字について考えたい …でも書体の選択や欧文組版の基礎は十分生かせる
- 106. 本日はどうもありがとうございました Thank You! スライドで使ったフォント：Neo Sans / DIN Next Rounded / ヒラギノ角ゴシック