Designing with Web Fonts: Type, Responsively

hwdesignco.com | @jpamental | ARTIFACT | #artifactconf
Designing with Web Fonts:
Type, Responsively
Jason Pamental (@jpamental)
Co-founder of H+W Design
Tuesday, May 14, 13

A Bit About Me
+ Built ﬁrst website for
Mosaic & Netscape 1
+ Do not have a photo handy
+ But these are my reasons
to be
+ Like to give away what I
learn as much as possible
Tuesday, May 14, 13

A Dan Mall Moment
+ Met Dan Mall @ FOWD in 2010
+ Fell in love with web fonts with Lost
Worlds Fair http://lostworldsfairs.com
+ Met folks from Fonts.com in 2011 & asked
what I could do to help w/Drupal plugin
+ Asked in 2013 to design Fonts.com
OpenType demo page (cue: panic)
Tuesday, May 14, 13

What We’ll Cover
+ Our dark past: GIFs, sIFR, Cufon
+ Our pleasant present: @font-face
+ Our dirty detractions: yes, I mean IE
+ Our shiny future: WOFF, OpenType, CSS3
+ Loads of examples & resources
Tuesday, May 14, 13

On The Importance of Letters
+ Design is about communication
+ Tools of design: image, color, compostion,
language (prose) – & the typeface itself
+ Your design is 90% words. Don’t make the
other 10% do all the work
Tuesday, May 14, 13

Type is Important
+ The typefaces we choose become the
physical embodiment of the information we
convey with the sites we design
+ Words have meaning
+ But letters have emotion
+ Typeformsthebasisofyourvisualdesign
system.Thereisno‘content first’without type!
Tuesday, May 14, 13

A Concise History of Web Type
+ Prior to about 2009, it was simply the
CIRCLE of Hell that varied, not the
inevitability of your arrival there
+ Then it got better. We’ll start with that
+ @font-face, TypeKit, Fontdeck,
Fonts.com, Webtype.com & many more
+ It’s still got a ways to go, but it’s moving fast
Tuesday, May 14, 13

Format Finagling
+ One font, four formats
+ Alphabet Soup: EOT, SVG, TT, WOFF
+ One format to rule them all... almost
As of 13 May, 2013
Tuesday, May 14, 13

Finding Your Groov(y)
+ Services: One account, many choices
+ Open source: Google web fonts
(careful – you may get what you pay for)
+ Web–use licenses: MyFonts.com,
FontShop, Emigre, others
+ FontSquirrel: just... no.
Tuesday, May 14, 13

From There to Here
+ To Host or Not to Host... tis the question
+ Consider:
• Traﬃc & mileage, volume & dispersion
(license costs & content distribution)
• One site or many
(we use single subscription for multiple smaller sites)
• Platform performance & future forward
(when was the last time you downloaded a font update? right.)
Tuesday, May 14, 13

So What’s That Look Like?
+ Using a service:
<script type="text/javascript" src="http://fast.fonts.com/jsapi/
8d16be74-xxxx-xxxx-9073-4898ad8b49b2.js" /></script>
+ Self-hosting:
<style type="text/css">
@font-face{ font-family:"Fairbank W04 Regular";
src:url("fonts/fontfilename.eot?#iefix");
src:url("fonts/fontfilename.eot?#iefix") format("eot"),url("fonts/
fontfilename.woff") format("woff"),url("fonts/fontfilename.ttf")
format("truetype"),url("fonts/fontfilename.svg#fontfilename")
format("svg"); }
</style>
+ Be aware: you want <b>, you have to say so
Tuesday, May 14, 13

but there’s a catch
Tuesday, May 14, 13

Windows XP: Killing Good
Design Since 2001
+ According to MS, still 40% of installed base
+ Best case: IE8 w/ClearType enabled
+ Common: IE7 and Huh?
+ It’s rough, but you can (usually) make it
work, and work well
+ Windows in general: needs a Hint
Tuesday, May 14, 13

Firefox: displays page w/fallbacks ﬁrst, then
‘pops’ into web font
Webkit: draws page without rendering any
type until web font loads
Wait For It...
Tuesday, May 14, 13

FOUT the Giant Slayer
+ Don’t show your design to a client without
understanding why they will freak out
+ It takes time to load fonts. So only load
the ones you need
+ Don’t forget to manage the loading
process: control what you can
+ It’s not the change that bothers users –
it’s the perception of change
Tuesday, May 14, 13

Google & Typekit to the Rescue
+ Web Font Loader
https://developers.google.com/fonts/docs/webfont_loader
+ Can be used w/multiple services
+ Injects classes to help specify CSS during
the loading process
+ Use this to style your fallback fonts to
more closely match eventual design
http://bit.ly/jpfontfall1, http://bit.ly/jpfontfall2
Tuesday, May 14, 13

Now We’re Cooking
+ You can do
better. So do.
What you want to see: Web fonts loaded
Tuesday, May 14, 13

Now We’re Cooking
+ You can do
better. So do.
What your client sees: No web fonts, uncorrected
Tuesday, May 14, 13

Now We’re Cooking
+ You can do
better. So do.
No web fonts, corrected
Tuesday, May 14, 13

Now We’re Cooking
+ You can do
better. So do.
Web fonts loaded
Tuesday, May 14, 13

Type, Responsively
+ Yes, there really is a connection with
Responsive Web Design. A big one
+ Relative proportion (yes, size) matters
+ That means screen size & type size
(stop snickering)
+ Small screens mean less in view, so
proportions can be more subtle
Tuesday, May 14, 13

Relative Scale, Illustrated
Tuesday, May 14, 13

A Responsive Scale
Tuesday, May 14, 13

When an Em is Not All Relative
+ Sizing type in Ems can be tricky – they
are relative to their current context
+ REMs helps that, & you can almost count
on it working
• Learn more here: http://bit.ly/jpfontrems
• Polyﬁll here: http://bit.ly/jprempoly
+ Viewport Width as unit: http://bit.ly/jpfontvw
Tuesday, May 14, 13

Even More Awesome:
Icon Fonts
+ Declare your independence from
resolution dependence
+ Many out there, easy to make your own
+ Can be styled like any other font, layered
w/CSS to make all sorts of awesome
+ (Bonus: use SVG to replace other multi–
color vector graphics like logos)
Tuesday, May 14, 13

Icon Font examples, sources
+ Font Awesome (featured in Bootstrap)
http://fortawesome.github.io/Font-Awesome/
+ Symbolset
http://symbolset.com
+ Modern Pictograms
http://modernpictograms.com
+ The Noun Project (buy what you need)
http://thenounproject.com
+ Icomoon.io – build your own!
http://icomoon.io
Tuesday, May 14, 13

Even MORE Awesome:
OpenType Features
+ Thefutureishere,it’sjustunevenlydistributed
(thank you Mr. Gibson)
+ Ligatures, swashes, old–style ﬁgures,
alternate characters
+ CSS still evolving, some services support
more (see Fonts.com: http://bit.ly/fontcomdemo)
Tuesday, May 14, 13

+ Your type, only more beautiful:
OpenType: Ligatures
Standard Ligatures
Discretionary Ligatures
Tuesday, May 14, 13

OpenType Demo
Tuesday, May 14, 13

Super Fancy Tricks & Tips
+ Rotate. Just a little bit. (A few techniques to smooooth
across different browsers - thx @NikWilliamson!)
https://gist.github.com/dalethedeveloper/1846552
+ Some help for IE 7&8:
http://www.koodoz.com.au/klog/font-face-smoothing-in-internet-explorer/
p {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop);
zoom: 1;
}
+ Your code editor – nothing beats real type in
a real browser (sorry Photoshop)
Tuesday, May 14, 13

Design Tools
TypecastApp.com (@typecastapp)
Tuesday, May 14, 13

Design Tools
WebInk.com (@webink)
Tuesday, May 14, 13

Design Tools
Adobe Edge Reﬂow (@reﬂow)
Tuesday, May 14, 13

More Design Tools
+ Skyfonts (@skyfonts)
Rent fonts short-term on the desktop
+ Froont (@froontapp)
Web design tool building in real web fonts
+ Prototype, not promise: HTML5 & CSS3
Try something and develop your own approach that ﬁts your
unique team & projects
Tuesday, May 14, 13

Thank you!
Jason Pamental (@jpamental)
jason@hwdesignco.com
Tuesday, May 14, 13

Resources: Type Services
+ Typekit (Adobe): http://typekit.com
+ Fonts.com (Monotype): http://fonts.com
+ Fontdeck: http://fontdeck.com
+ Webtype (Font Bureau): http://www.webtype.com
+ WebInk (Extensis): http://webink.com
+ Google Web Fonts: http://google.com/fonts
Tuesday, May 14, 13

Cool Tools & Resources
+ Font Swapper (preview site w/your web fonts):
http://www.webtype.com/tools/swapper/
+ Typedia (it’s like Wikipedia...for type.Get it?):
http://typedia.com
+ FontsInUse http://fontsinuse.com
Tuesday, May 14, 13

Blogs & Beauty
+ Typekit Blog/‘Sites We Like’ http://blog.typekit.com
+ Fonts.com Blog http://blog.fonts.com
+ Fontdeck Blog http://blog.fontdeck.com
+ FontShop Blog http://blog.fontshop.com
+ Typecast Blog http://typecast.com/blog
+ Jason Santa Maria http://jasonsantamaria.com
+ Tim Brown http://nicewebtype.com
Tuesday, May 14, 13

Designing with Web Fonts: Type, Responsively

More Related Content

Viewers also liked (6)

Similar to Designing with Web Fonts: Type, Responsively (20)

More from Jason Pamental (11)

Recently uploaded (20)

Designing with Web Fonts: Type, Responsively