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
130
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
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
860
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
150
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
680
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
490
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
4.2k
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
430
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
860
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
210
harutaka Vision Deck
zenkigenforrecruit
0
250
Ana Cortes Visual Development Portfolio 2025
haruanleb
0
120
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
150
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
160
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
4k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Code Reviewing Like a Champion
maltzj
525
40k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
A better future with KSS
kneath
239
17k
Documentation Writing (for coders)
carmenintech
75
5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Context Engineering - Making Every Token Count
addyosmani
5
210
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