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/

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フォント考察

5. 1. Webフォントとは？
Webフォントの仕組みとメリット

6. 1. Webフォントとは？
1-1. 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サイト
サーバ

16. 1. Webフォントとは？
1-2. 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. ページ内で使われている文字だけのフォントファイルを生成
ダイナミック・サブセッティング

27. 1. Webフォントとは？
1-3. 利用者にとってのメリット

28. 利用者にとっての3つのメリット
1. 選択してコピー＆ペーストできる

29. 利用者にとっての3つのメリット
2. 拡大・縮小してもぼやけない
新ゴ 新ゴ

30. 利用者にとっての3つのメリット
3. 検索にひっかかりやすくなる

31. 利用者にとっての3つのメリットのまとめ
1. 選択してコピー＆ペーストできる
新ゴ
新ゴ
2. 拡大・縮小してもぼやけない 3. 検索にひっかかりやすくなる

32. 1. Webフォントとは？
1-4. 制作者にとってのメリット

33. 制作者にとっての3つのメリット
1. 作業を引き継げる・早く帰宅できる
0 75 150 225 300
画像文字
Webフォント
作業時間(秒)

34. Webデザイナーの修正フローを実演
“企業情報”→“コーポレート情報”に変更をしてください

35. 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= "コーポレート情報" ... />

41. Webデザイナーの修正フロー
Webフォント編

42. Webデザイナーの修正フロー【Webフォント編】
<h2>企業情報</h2>
<h2>コーポレート情報</h2>
h2 { font-family: 新ゴ; }

43. 制作者にとっての3つのメリット
2. 画像ファイルが大幅に減る

44. 制作者にとっての3つのメリット
3. 様々な環境に対応可能 レスポンシブデザイン

45. 2. Webフォントの今
Webフォント・Webフォントサービスの最新事情

46. 2. Webフォントの今
2-1. Webフォントサービスの今

47. 日本語Webフォントサービスが続々オープン

48. 昨年はfonts.comとTypekitをメインに取り上げました
有名なフォントを使いたい人向け 個性派フォントを使いたい人向け

49. AdobeがTypekitを買収

50. Adobe Creative Cloudの一部に

51. コスト削減のため買取型も普及

52. 販売するデータのフォーマット
EOT・WOFFフォーマットでの販売
.EOT .OTF .SVG
.WOFF .TTF

53. 2. Webフォントの今
2-2. 付帯・補助サービスの紹介

54. Web Fonts Preview・FONTDROPPER 1000
どんなサイトでもWebフォントで確認できる

55. Typecast
複数のWebフォントサービスを一元管理できる

56. FontFont Subsetter
購入したWebフォントデータをサブセット化できる

57. 2. Webフォントの今
2-3. OpenTypeフォント機能が実現

58. OpenTypeフォントって何？

59. OpenTypeフォントって何？
• 最大 65,535文字収録
• 様々なデータを1つに集約
• 高機能なのに容量が少ない

60. OpenTypeフォント機能の代表例
fl
⅝
246
ffi
合字
246
ライニング数字と
分数
（リガチャ） オールドスタイル数字

61. PhotoshopやIllustratorの設定パネル

62. OpenTypeフォント機能に対応するブラウザ
Firefox 4+ IE 10+

63. どんな場面でOpenTypeフォント機能を使うのか
fl
⅝
246
ffi
合字
246
ライニング数字と
分数
（リガチャ） オールドスタイル数字

64. どんな場面でOpenTypeフォント機能を使うのかを知る良書

65. FontShopのOpenType User Guideが便利

66. FontShopのOpenType User Guideが便利

67. iPadのiBooksアプリで管理すると便利

68. 3. Webフォントの課題
いいことだけではない？Webフォントの課題

69. 3. Webフォントの課題
3-1. Windows上の表示問題

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

77. 3. Webフォントの課題
3-2. 使いたいフォントが選べない？

78. 例えばDIN
DIN Next™ FF DIN PF DIN Text Pro®

79. 4. フォントブログのWebフォント
散々Webフォントについて語ってるけどどうなの？

80. 4. フォントブログのWebフォント
4-1. 現在使っているWebフォント

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

84. 4. フォントブログのWebフォント
4-2. ロゴをWebフォント化

85. PETITBOYSロゴ

86. Glyphs
Glyphs ¥26,000 Glyphs Mini ¥3,900

87. Glyphs Miniにペーストしてフォントデータを作成

88. 必要な文字だけのOTFを生成

89. FontSquirrelの@font-face GeneratorでWebフォントファイルを生成

90. FontSquirrelの@font-face GeneratorでWebフォントファイルを生成
簡単に設置できるWebフォントキットが生成される

91. そのまま設置する
拡大してもぼやけない

92. ここにもWebフォント Part2
Adlle SemiBold & Bold

93. WebフォントはCSS3と組み合わせて使う

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);
}

96. 5. 本日のまとめ
Webフォント・Webタイポグラフィの特性

97. 5. 本日のまとめ
5-1. 相性がよいサイトとは？

98. Webフォントと相性がよいサイトとは？
1. スマートフォンやタブレット向けサイト
Webフォントを最適に表示できる環境が整っている

99. Webフォントと相性がよいサイトとは？
2. 動的・インタラクティブなサイト
文字を “テキスト” として扱うことができる

100. Webフォントと相性がよいサイトとは？
3. 文字がデザインの中心となっているサイト

101. 5. 本日のまとめ
5-2. Webタイポグラフィとは？

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 / ヒラギノ角ゴシック