Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Why not DIY Symbol Fonts?
Search
Tsutomu Kawamura
April 25, 2013
Design
4
160
Why not DIY Symbol Fonts?
No more CSS Sprites!
Tsutomu Kawamura
April 25, 2013
Tweet
Share
More Decks by Tsutomu Kawamura
See All by Tsutomu Kawamura
Connect your library to the world
cognitom
0
120
JTF2018
cognitom
5
1.3k
Riot: changing on v3 and its companion tools
cognitom
0
130
LLoT Night - Riot.js
cognitom
1
1k
Felt - a simple web server with the power of the future
cognitom
0
320
Riot: all about v2 to v3
cognitom
7
3.8k
Create A Small Studio in A Cafe
cognitom
2
920
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
640
Other Decks in Design
See All in Design
エンジニアでも捗る デザイナー的思考入門
tinykitten
1
1.2k
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
140
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
480
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
340
CMS管理画面のアクセシビリティ
magi1125
8
2.5k
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
150
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
810
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.5k
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
620
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
1.8k
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
140
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
BBQ
matthewcrist
89
9.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Gamification - CAS2011
davidbonilla
81
5.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Become a Pro
speakerdeck
PRO
29
5.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Building Applications with DynamoDB
mza
96
6.6k
Agile that works and the tools we love
rasmusluckow
330
21k
Transcript
No more CSS Sprites! Why not DIY Symbol Fonts?
Tsutomu Kawamura facebook.com/cognitom
Tsutomu Kawamura facebook.com/cognitom 0QFO4PVSDF$BGF 4IJNPLJUB[BXB -JCSJ[FDPOOFDUZPVSMJCSBSZUPUIFXPSME $PXPSLJOHDPPQ +BQBO
$PHOJ5PN"DBEFNJD%FTJHO#PPL1SFTT+BQBO0QFO#VTJOFTT 4PGUXBSF"TTPDJBUJPODPODUFU+BQBO$PEFS%PKP5PLZP
)FMMP
-FU`TUBMLBCPVUUIFTF
4ZNCPMGPOUT icon fonts?
'PSFY UIJT
"OEUIJT
"MTPUIJTJT '0/5
Webdings Wingdings Arial ABCDEFGHI 8F`ELOPXOUIFNXFMM
8FC'POUT
-JLFUIJT
BOEUIJT
%FBEMZFBTZ <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css? family=Tangerine" />
TTF EOT WOFF SVG IE 4 ✔ IE 9 ✔
✔ FireFox 3.5 ✔ FireFox 3.6 ✔ ✔ Safari 3.1 ✔ ✔ Safari 5.1 ✔ ✔ ✔ Chrome 4 ✔ ✔ Chrome 6 ✔ ✔ ✔ iOS 4.0 ✔ iOS 4.2 ✔ ✔ iOS 5.1 ✔ ✔ ✔ Android 2.2 ✔ Android 3.1 ✔ ✔ Android current ✔ ✔ ✔ #SPXTFS 4VQQPSUT
icon fonts met web.
@font-face { font-family: 'Symbols'; src: url('Symbols.ttf') format('truetype'); } <span
class=”symbol-good”></span> <span class=”symbol”>good</span> <i class=”symbol-good”></i> FY FY FY
4NPPPPPUI3FUJOB3FBEZ
$PMPS$POUSPMCZ$44
Octicons Font Awesome
send him an iMac
http://symbolset.com http://icomoon.io http://kudakurage.com/ligature_symbols/
•G IF •Transparent PN G •CSS Sprites •SVG ? •W
eb Font • Use PUA • Ligature • ???
Responsive Web Design Mobile Support / Retina Flat Design Trend
2012 2011 2013 Font DIY
FontAwesome, ...etc. Need some extra original icon FontAwesome + Extra
PNG Icon Double standards DIY Fonts Why not DIY?
0I)PXUPNBLF TVDIBGPOU
FontForge was great, but...
Glyphs mini ¥3,900
%FTJHOFSTEPFTO`UHFUNBE JOFWFSZEBZVTF
OTF TTF WOFF EOT SVG 5IJOL $SFBUF $POWFSU $IFDL
$IFDLPVS5FNQMBUF PO(JU)VC github.com/cognitom/symbols
$PODMVTJPO
CSS Sprites? Icon Fonts! ?
-JNJUFEHFFLT NBEFGPOUT "MMXFCEFTJHOFST NBLFGPOUT 1BTU 'SPNOPX
5IBOLZPV