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
Say Hello to Octicons
Search
Jon Rohan
July 21, 2012
Programming
105
7.2k
Say Hello to Octicons
Cameron McEfee and Jon Rohan talk about GitHub's icons.
Jon Rohan
July 21, 2012
Tweet
Share
More Decks by Jon Rohan
See All by Jon Rohan
GitHub's CSS Performance
jonrohan
1031
460k
Other Decks in Programming
See All in Programming
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.4k
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
210
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
1
710
技術同人誌をMCP Serverにしてみた
74th
1
680
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
11
6.6k
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
460
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
150
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
3
410
生成AI時代のコンポーネントライブラリの作り方
touyou
1
260
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
710
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
Featured
See All Featured
It's Worth the Effort
3n
185
28k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Designing for humans not robots
tammielis
253
25k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
RailsConf 2023
tenderlove
30
1.1k
Transcript
Cam & Rohan Making Icons @JONROHAN @CAMERONMCEFEE Saturday, July 21,
12
OCTICONS Say Hello To Saturday, July 21, 12
FAMFAMFAM Say Goodbye To Saturday, July 21, 12
ZOOMED Saturday, July 21, 12
Saturday, July 21, 12
Saturday, July 21, 12
Saturday, July 21, 12
SOME FACTS Saturday, July 21, 12
11% 22% 67% BROWSERS Chrome Firefox Safari Saturday, July 21,
12
SCREENS Saturday, July 21, 12
SCREENS 2000px 6% 1600px 42% 1440px 14% 1280px 30% Saturday,
July 21, 12
6 MILLION PAGE VIEWS Saturday, July 21, 12
1,469MS PAGE LOAD TIMES Saturday, July 21, 12
30+ HTTP REQUESTS Saturday, July 21, 12
MOSTLY ICONS Saturday, July 21, 12
ICON METHODS Saturday, July 21, 12
Images ICON METHODS Saturday, July 21, 12
Image Sprites Images ICON METHODS Saturday, July 21, 12
Image Sprites Images SVG ICON METHODS Saturday, July 21, 12
WHY CUSTOM ICONS? Saturday, July 21, 12
UNIQUE METAPHORS • Octocat • Repo • Issue • Fork
• Commit • Pull Request • Push • Submodule • Gist • Etc. Saturday, July 21, 12
OLD METAPHORS • Octocat • Repo • Issue • Fork
• Commit • Pull Request • Push • Submodule • Gist • Etc. Saturday, July 21, 12
NEW METAPHORS • Octocat • Repo • Issue • Fork
• Commit • Pull Request • Push • Submodule • Gist • Etc. Saturday, July 21, 12
CONSISTENCY Saturday, July 21, 12
SPRITES Saturday, July 21, 12
SPRITES Saturday, July 21, 12
SPRITES Saturday, July 21, 12
SPRITES Saturday, July 21, 12
SPRITES Saturday, July 21, 12
SPRITES Saturday, July 21, 12
SPRITES Saturday, July 21, 12
SPRITES Saturday, July 21, 12
SPRITES Saturday, July 21, 12
SPRITES Saturday, July 21, 12
SPRITES Saturday, July 21, 12
SPRITES Saturday, July 21, 12
SPRITES Saturday, July 21, 12
SPRITES Saturday, July 21, 12
SPRITES Saturday, July 21, 12
SPRITES Saturday, July 21, 12
SPRITES Saturday, July 21, 12
SPRITES SPRITE HELL Saturday, July 21, 12
Saturday, July 21, 12
Octicons
Saturday, July 21, 12
LET’S GET TECHNICAL Saturday, July 21, 12
STRATEGY Saturday, July 21, 12
METAPHORS Saturday, July 21, 12
METAPHORS Saturday, July 21, 12
FLEXIBLE SIZES Saturday, July 21, 12
FLEXIBLE SIZES 16px 32px Saturday, July 21, 12
FLEXIBLE SIZES • 16px: Optimized for 16px. Never scaled •
32px: Optimized for n*32px. Scaled when necessary. Saturday, July 21, 12
CRISPNESS Saturday, July 21, 12
CRISPNESS IS KEY Helve cons Pictos Oc cons Saturday, July
21, 12
CRISPNESS IS KEY Saturday, July 21, 12
RESIZING = BAD Saturday, July 21, 12
RESIZING = BAD Redesigned Scaled Saturday, July 21, 12
DESIGN > Saturday, July 21, 12
PHOTOSHOP TRICKS Saturday, July 21, 12
PHOTOSHOP TRICKS ILLUSIONS Saturday, July 21, 12
2-UP VIEW Saturday, July 21, 12
2-UP VIEW • Window > Application Frame • Window >
Arrange > New Window for …psd • Window > Arrange > 2-Up Vertical Saturday, July 21, 12
PIXEL GRID View > Show > Pixel Grid Saturday, July
21, 12
PIXEL SNAPPING Saturday, July 21, 12
BOXED ICONS Saturday, July 21, 12
SOURCE FILE Saturday, July 21, 12
GLYPHS PRIMER Saturday, July 21, 12
SKIPPING AHEAD Saturday, July 21, 12
THE BASICS Mx Cap-height X-height M-width Saturday, July 21, 12
MATH 32 16 = 2 32 32 = 1 Saturday,
July 21, 12
OUR “LOGICAL” SETUP 32 points 32 points Saturday, July 21,
12
THE MAGIC 2048 2048 16 = 128 2048 32 =
56 Saturday, July 21, 12
BASICALLY THE SAME width Saturday, July 21, 12
BASICALLY THE SAME height Saturday, July 21, 12
BASICALLY THE SAME resolu on (sort of) Saturday, July 21,
12
FILE SIZE IS WEIRD Size Grid Quality File Size (kb)
512 4 Meh 28 512 8 Meh 27 1024 0 Good 37 1024 32 Meh 29 1024 64 Bad 2048 32 Good 33 2048 64 Good 33 2048 128 Good 33 Saturday, July 21, 12
OUR FINAL FILE • Cap-height/x-height = 2048 points • Units
per em = 2048 points • Grid spacing = 32 Saturday, July 21, 12
MAKE THE FONT Saturday, July 21, 12
ALIGNMENT IS HARD Saturday, July 21, 12
ALIGNMENT IS HARD Saturday, July 21, 12
THE GRID (0,0) Glyphs Illustrator (0,X) (X,0) (0,-X) (0,0) (X,0)
Saturday, July 21, 12
STAGE IT (0,0) 2 grid square baseline shift 2048pts 256pts
Saturday, July 21, 12
STAGE IT paste at 16pts Saturday, July 21, 12
STAGE IT Saturday, July 21, 12
STAGE IT delete this copy this Saturday, July 21, 12
IT’S A FONT Saturday, July 21, 12
IT’S A FONT Saturday, July 21, 12
TO THE CLOUD Saturday, July 21, 12
OPENTYPE Saturday, July 21, 12
OTF > WEB FONT FONT QUIR L .otf .eot .svg
.ttf .woff Saturday, July 21, 12
PRIVATE USE UNICODE Saturday, July 21, 12
SUBSET FOR VICTORY Saturday, July 21, 12
@font-face { font-family: 'Octicons Regular'; src: font-url('octicons.eot'); src: font-url('octicons.eot#iefix') format('embedded-opentype'),
font-url('octicons.woff') format('woff'), font-url('octicons.ttf') format('truetype'), font-url('octicons.svg#newFontRegular') format('svg'); font-weight: normal; font-style: normal; } @FONT-FACE Saturday, July 21, 12
CSS CLASSES <span class="mini-icon search"></span> .mini-icon { ... -webkit-font-smoothing: antialiased;
} .mini-icon.search:before { content: "\f02e"; } Saturday, July 21, 12
CSS ANTI-ALIASING Subpixel Saturday, July 21, 12
CSS ANTI-ALIASING Subpixel None An -aliased Saturday, July 21, 12
ANTI-ALIASING Without With Saturday, July 21, 12
Saturday, July 21, 12
WHAT WORKED Saturday, July 21, 12
ALL THE COLORS Saturday, July 21, 12
ALL THE COLORS Saturday, July 21, 12
ANY SIZE Saturday, July 21, 12
ANY SIZE Saturday, July 21, 12
Saturday, July 21, 12
Retina Timing Saturday, July 21, 12
Saturday, July 21, 12
Saturday, July 21, 12
WHAT DIDN’T WORK Saturday, July 21, 12
TOO COMPLEX Saturday, July 21, 12
UPDATES ARE TEDIOUS 1.Icon concept 2.Draw 2 icons 3.Copy into
Illustrator 4.Copy into Glyphs 5.Export font 6.Convert font 7.Update font 8.Deploy GitHub Saturday, July 21, 12
GLYPHS IS LIMITED Saturday, July 21, 12
CLEAR TYPE Saturday, July 21, 12
ACCESSIBILITY Saturday, July 21, 12
@FONT-FACE DISABLED Saturday, July 21, 12
MAKING THINGS BETTER Saturday, July 21, 12
GRAPHIC CHANGES Saturday, July 21, 12
CSS PERFORMANCE .mini-icon { font-icon: stuff; } .mini-icon.private-repo { font:
unicode; } Saturday, July 21, 12
20K+ CSS MATCHES PER PAGE Saturday, July 21, 12
BREAK UP data-icon=”f023” .mini-icon:before { content: attr(“data-icon”); } Saturday, July
21, 12
BREAK UP .mini-icon { font-icon: stuff; } .mini-icon-private-repo { font:
unicode; } Saturday, July 21, 12
THANKS @JONROHAN @CAMERONMCEFEE Saturday, July 21, 12
THANKS @JONROHAN @CAMERONMCEFEE
Saturday, July 21, 12