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
630
Other Decks in Design
See All in Design
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
800
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
130
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
880
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
1.7k
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
150
sachi_y_portfolio
sachi337
0
520
UXデザインはなぜ定着しないのか?
designstudiopartners
0
950
Bulletproof Design System with TypeScript
takanorip
7
4k
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
330
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
300
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
720
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
460
Featured
See All Featured
Context Engineering - Making Every Token Count
addyosmani
1
23
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
4 Signs Your Business is Dying
shpigford
184
22k
RailsConf 2023
tenderlove
30
1.2k
Site-Speed That Sticks
csswizardry
10
810
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Stop Working from a Prison Cell
hatefulcrawdad
271
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