もはや、フォントは「画像形式」のひとつです。アイコンやロゴをWebで表示するならば、シンボルフォント(アイコンフォント)を自作するのが一番。 前半で、シンボルフォントを取り巻く現状を、後半で実際の制作方法を紹介します。 ※このスライドは、2014年5月15日のCSS Niteで話した内容です。 http://cssnite.jp/afterdark/cpi/vol10/

1. 
河村 奨 (Tsutomu Kawamura)
 facebook.com/cognitom
シンボルフォント
̶それは、新しい画像形式̶

2. + + 色々

4. 東京で2軒目の
コワーキングスペース。
下北沢オープンソースCafe

5. 毎日、なにかしらイベント
部室いろいろ
プログラマの多く集まる場

6. 毎週日曜には、
小中学生向けの
コーダー道場も

7. オープンソース書籍多数。
気軽に、お立寄りください :-)

8. 主に、デザイナー
のはずです。
執筆・教育
マスター
デザイン
プログラミング

9. ボルダーです。

10. シンボルフォント?

11. 今日話すのは、コレ。

12. たとえば、
これ。

13. これも、

14. これも
フォント。

15. Webdings !"#$%&'
Wingdings !"#$%&'
Arial ABCDEFGHI
昔からおなじみ?

16. Webフォント
使ってますか?

17. こんなの

18. こんなの

19. こんなの

20. こんなの

21. これだけ。
<link!
rel="stylesheet"!
type="text/css"!
href="http://fonts.googleapis.com/css?!
family=Tangerine" />

22. TTF EOT WOFF SVG
IE
4 ✔
9~ ✔ ✔
Firefox
3.5 ✔
3.6~ ✔ ✔
Safari
3.1 ✔ ✔
5.1~ ✔ ✔ ✔
Chrome
4 ✔ ✔
6~ ✔ ✔ ✔
iOS
4 ✔
4.2 ✔ ✔
5.1~ ✔ ✔ ✔
Android
2.2 ✔
3.1 ✔ ✔
current ✔ ✔ ✔
ブラウザ
対応状況

23. シンボルフォント
+
Webフォント

24. コレです。

25. 
@font-face {
font-family: 'MyIcons';
src: url(‘MyIcons.ttf') format('truetype');
}
<span class=”mi mi-good”></span>
<i class=”mi mi-good”></i>
<i class=”mi”>good</i>
例1.
例2.
例3.

26. 何が美味しいの?
u

27. なめらか。Retina Ready :-)

28. CSSで色コントロール

29. サーバリクエスト減 = 速い
WOFF

30. シンボルフォントな
Webサイト

31. Octicons

34. ※Symbolsetを利用

35. Segoe UI Symbol

36. シンボルフォント
いろいろ

37. Font Awesome
• 人気です。どのくらい?
• GitHubで ★2.3万
• 参考まで…
• Bootstrap ★6.7万
• jQuery ★3万

38. 369 icons

39. open source!

40. GLYPHICONS
• Bootstrapに同梱
• 商用ライセンスなら、
ロイヤリティフリー!
• 混ぜても大丈夫

41. Foundation
Icon Fonts 3

42. http://symbolset.com http://icomoon.iohttp://kudakurage.com/ligature_symbols/

43. 多色刷りも

46. GIF
透
過
PNG
CSSス
プ
ラ
イ
ト
SVG?
W
ebフ
ォ
ン
ト
!PUAを
使
うLigature(合
字
)多
色
刷
り
ほ
か
* PUA = Private User Area
未来現在過去
アイコン利用の小歴史

47. レスポンシブ Web デザイン
モバイルファースト / Retina
フラットデザイン 2012
2011
2013フォントDIY
ここ数年のトレンド + α

48. と言ってたら
ほんとに来た !
※日本以外…

49. でも、フォントなんて
どうやって作るの?
S

50. そう。それが、
今日のテーマです。
u

51. シンボルフォント
の 作り方

52. Aコース Bコース Cコース
Sketch
Grunt
Adobe IllustratorGlyphs Mini
FontPrep
OTF SVG SVG

53. Aコース Bコース Cコース
Sketch 3
gulp
Adobe IllustratorGlyphs Mini
FontPrep
OTF SVG SVG

54. Glyphs Mini - ¥4,500 FontPrep - ¥0
OTF
TTF
SVG
EOT
WOFF出力 変換
Webフォント
GUIアプリだけで完結。フォント好き向けA コース

55. Illustrator - ¥26,160 / 年 (単体)
TTF
SVG
EOT
WOFF出力 変換
Webフォント + CSS
使い慣れたIllustratorではじめる、フォントライフB コース
SVG CSS
IcoMoon - ¥0∼

56. Sketch 3 - ¥7,800
TTF
SVG
EOT
WOFF出力 変換
Webフォント + CSS
イチオシ、完全自動化アイコン制作環境C コース
CSS
gulp - ¥0

57. Illustrator による
アイコンフォント制作
B コース

58. Recipe • Mac / Windows
• Adobe Illustrator
• IcoMoon (Webアプリ)
• HTML / CSS の基礎知識
グリッド ベジェ曲線

59. アイコン作成 ❶
Recipe
icons/512x512.ait

60. アイコン作成 ❷
Recipe
フランクフルトを描く マスタードを描く 型抜き
簡単なアイコンの例
※一色で作図する必要があります。

61. アイコン作成 ❸
Recipe
SVG形式で保存 SVGのオプション

63. IcoMoon ❶
Recipe
アイコンをインポート ファイル選択

64. IcoMoon ❷
Recipe
グリフの一括選択 設定変更・ダウンロード

65. IcoMoon ❸
Recipe
設定変更
• IcoMoon → anne-library
• icon- → ai-
• Class Selector → .ai
IcoMoonのデフォルトの書き方
<i class= icon-eat ></i>
FontAwesome的な書き方
<i class= ai ai-eat ></i>

66. IcoMoon ❹
Recipe
ダウンロード!
EOT (Embedded OpenType)
TTF (TrueType Font)
SVGフォント
WOFF (Web Open Font Format)
CSS

67. SVG出力して、変換。
これだけ。
B コース

68. デモサイト

69. こんなの
作ってみました。

70. PCTabletPhone

71. Anne Frank Micro Library Project
http://annelibrary.github.io/
読み返してみて
考えよう
公立図書館に
借りにいこう
読んで、友達に
贈ろう
フランクフルトを
片手に語り合おう！
お店に、オフィスに。
自宅の本棚に。
ライブラリーの開き方
アクションをおこす
451
「アンネ・フランク・ライブラリー」は、誰でも参加でき
るプロジェクトです。合言葉は「読むこともライブラリー、
借りるのもライブラリー、本を置くのも語り合うのも
ライブラリー」。詳しくはこちらまで。
元にしたポスター
シンプル。フラット。
テーマ毎のアイコン
この辺は、Font Awesome
水平線もアイコン
題字はTypeSquare
イラストも
背景も

72. girl emblem
borrow buy
diary related
books leaned pot grinderstacked
eatread
Font Awesome

73. 誤解を恐れずに言うなら、
フォントは、
画像形式のひとつになった。

74. GIF JPEG PNG SVG フォント
写真 × ◎ △ × ×
イラスト × △ ○ ◎ ×
ロゴ △ × ○ ○ ◎
アイコン △ × △ △ ◎
画像 or フォント?

75. シンボルフォント
の 使い方

76. ファイル配置 ❶
Recipe
フォントを fonts へ。CSSは anne-library.css にリネームして css へ。
IcoMoonから
ダウンロードしたファイル

77. ファイル配置 ❷
Recipe
ここでは、 fonts/ → ../fonts/ に置換 (環境に合わせて)

78. HTMLの編集 ❶
Recipe
アイコン追加前の
HTMLはこんな感じ。

79. HTMLの編集 ❷
Recipe <link href="css/anne-library.css" rel="stylesheet">
<i class="ai ai-girl"></i>
<i class="fa fa-twitter"></i>
参考 : Font Awesome (上)、Glyphicon (下)
<i class="glyphicon glyphicon-cloud"></i>

81. HTMLの編集 ❸
Recipe <i class="ai ai-girl"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="ai ai-read"></i>
<i class="ai ai-borrow"></i>
<i class="ai ai-buy"></i>
<i class="ai ai-eat"></i>

82. <i class="ai ai-girl"></i>
<i class="fa fa-twitter"></i>
<i> タグ?
HTML5的には、セーフ
※気になる人は、<span>タグで
アイコンであることを示す モジュール性を確保

83. CSSのアイデア ❶
Recipe !
.title > i {
font-size: 800%;
background: #fff;
border-radius: .5em;
width: 1em;
}
800%
= 128px
r = 0.5em
1em
丸囲み

84. CSSのアイデア ❷
Recipe
.title-hr {
border-top: 3px solid #423933;
}
600%
= 96px
-0.5em
水平線
.title-hr > i {
font-size: 600%;
margin: -.5em 0;
}

85. 色の変更
Recipe 例えば青系に。これを、

87. 後からの調整に、
マジで強い。
r

89. 先週、
こんなの作りました。
おまけ

90. Sketch用
フォントテンプレート

92. SketchTool
gulp-sketch gulp-iconfont
gulp-consolidate
SVG

93. さくさく
フォントが作れます

94. $ gulp symbols ↵

95. https://github.com/cognitom/symbols-for-sketch

97. シンボルフォント
まとめ

98. 意外と作るのカンタン

99. 後からの調整に
マジで強い

100. もはや、フォントは、
画像形式のひとつ

101. 選択肢いろいろ
全部作らなくてもOK!

102. 使わない手はない。
【結論】


103. Thank you.

104. https://github.com
/cognitom/symbol-font-in-web/
「シンボルフォント in Web (仮)」
 facebook.com/cognitom