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
「UXとUIの違い」v2
shirasu3
0
250
DESIGNEAST 2025 A-3
_kotobuki_
0
100
Goodpatch Tour💙 / We are hiring!
goodpatch
31
900k
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
330
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
akatsuki174
1
270
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
160
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
2k
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
kinomidesign
0
120
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
510
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか?
fuwarisprit
3
1.5k
Portfolio 齋藤明敏 Hiroyuki Saito
crearedesign
0
120
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.7k
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Producing Creativity
orderedlist
PRO
347
40k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
How GitHub (no longer) Works
holman
315
140k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Side Projects
sachag
455
43k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
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