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
140
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
87
JTF2018
cognitom
5
1.2k
Riot: changing on v3 and its companion tools
cognitom
0
110
LLoT Night - Riot.js
cognitom
1
870
Felt - a simple web server with the power of the future
cognitom
0
290
Riot: all about v2 to v3
cognitom
7
3.7k
Create A Small Studio in A Cafe
cognitom
2
860
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
570
Other Decks in Design
See All in Design
プロダクトデザインは子育て/Product design is parenting
medley
0
280
もち的デザイナーのキャリアデザイン新提言:副業起業家のすゝめ
mochitaro
0
1.3k
全社を巻き込んだコーポレートバリューの再定義に関するデザイナーの関わり方
sugiyama_sukedachi
0
170
意志と、デザインと、ときどきお金
transit_kix
2
2.2k
BtoB SaaS Design Conference 登壇資料 Cloudbase LT
narizuka
0
480
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
4.8k
今日から始めるDesignOpsのヒント
isaikaori
1
410
デザインシステムで解消するさまざまな分断
hirataaa0220
1
170
231206_Book-launch-event_kato
hjmkth
2
1.2k
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
2
410
Apple提供アプリのナビゲーションバーアイテムクイズ / 20231110-hig
uhooi
2
170
豊かな自然を守るための、 クラフトビール造りのプロジェクトとデザイン
kazuakiebe
0
450
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
A better future with KSS
kneath
231
16k
Building Applications with DynamoDB
mza
88
5.6k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
GitHub's CSS Performance
jonrohan
1023
450k
RailsConf 2023
tenderlove
2
530
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Statistics for Hackers
jakevdp
789
220k
Automating Front-end Workflow
addyosmani
1355
200k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
Optimizing for Happiness
mojombo
370
69k
Done Done
chrislema
178
15k
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