1. WEB TYPOGRAPHY
with Sean Gaffney and Matthew Smith
Monday, March 22, 2010 1
2. Sean Gaffney seangaffney.cc
Freelancing Developer working with
designers and agencies to make sure
details get communicated clearly
through technology on the web.
Monday, March 22, 2010 2
3. Matthew Smith squaredeye.com
Principal at Squared Eye
Creative Director & Designer
Squared Eye is focused on detailed
design that springs from a rich
understanding of our client’s business
goals and the communication strategies
needed to make them happen.
Monday, March 22, 2010 3
4. Web Typography & CSS3
Monday, March 22, 2010 4
What is it?
• Simple technique for allowing designers to use their own
fonts for display on the web, eliminating the constrictions
that currently exist.
• Introduced in CSS2, removed from the spec in CSS2.1,
reintroduced in CSS3
Monday, March 22, 2010 5
• More variety in fonts on the web! Yeehaw!
• Better adherence to style guidelines and branding
emphasis for groups that use typography as a major part
of their branding.
• Dynamic, selectable, printable text
• Implementation is simple (compared to sIFR, Image
Replacement, and Cufón)
Monday, March 22, 2010 6
• Easy to Abuse. Huge font libraries don’t make good
designs, good designers make good designs.
• End User License Agreements (EULAs) can be a difficult
hurdle for commercial fonts.
• Flash of Unstyled Text (FOUT)
• Rendering Issues on Microsoft Windows and Internet
Explorer due to font-aliasing techniques.
Monday, March 22, 2010 7
• Access to more fonts increases the need for us all to learn
typography, and web typography.
Monday, March 22, 2010 8
9. @font-face http://seedconference.com
• Great web typography is possible with the old guard of core fonts.
Monday, March 22, 2010 9
Monday, March 22, 2010 10
Monday, March 22, 2010 11
• Type Design is incredibly complicated and difficult. It is
worth paying for a great typeface or font.
• The EULA from some foundries allows for embedding
• The EULA from other foundries “technically” does not
allow for even sIFR embedding.
• The file referenced when using @font-face is easily found
on the server. If its free, no big deal. If it’s commercial then
you’re breaking your EULA.
Monday, March 22, 2010 12
What’s changing in the marketplace?
• Businesses like TypeKit, FontDeck, and Typotheque have
created obfuscation techniques and relationships with
foundries to bring commercial fonts to the web.
• Sites like Font Squirrel are popping up to showcase the
best of the free fonts for use with @font-face.
• More businesses like Fontspring will arise to help strong
small and middle range type designers and foundries
provide web designers with great fonts, with flexible
licenses at competitive prices.
Monday, March 22, 2010 13
What’s changing in the technology?
• There are currently a host of type formats for the web
including TrueType, OpenType, EOT, SVG, and WOFF.
• WOFF (Web Open Font Format) is a new web font format
developed by Mozilla in concert with Type Supply,
LettError, and other organizations.
• WOFF is a flexible format which allows for better font-
hinting and metadata attached to the font for different
systems, languages, browsers, etc.
Monday, March 22, 2010 14
What’s changing in the technology?
• WOFF is a web only format, unable to be used on the
desktop, and is therefore more appealing to the font
foundries as a viable format for commercial fonts.
• WOFF compresses the font data so that its less likely to
cause FOUT (Flash Of Unstyled Text) while web files are
Monday, March 22, 2010 15
• Commercial Font-serving Sites:
Typekit, Fontdeck, Typotheque, Webtype, Kernest
• Free (Font Squirrel)
• Mixed Use (Fontspring)
• Roll Your Own Obfuscation
Monday, March 22, 2010 16
• Do not place SCRIPT tags above @font-face declaration (IE
will not display page content until the font file is loaded)
• Gzipping fonts can result in up to 70% savings in filesize
(all formats except WOFF, which has built-in compression)
• Set far-future expires headers for font files
Monday, March 22, 2010 20
• Apple and Microsoft have different philosophies regarding
the way text should be rendered on the screen.
• Fonts rendered by OS X should all appear very smooth.
• Fonts rendered by Windows will vary based on the hinting
of the type and the rendering engine being used (none vs.
ClearType vs. DirectWrite). TrueType fonts appear
smoother. FontFont branded fonts also have better hinting
Monday, March 22, 2010 21
• Internet Explorer without ClearType
Monday, March 22, 2010 22
23. @font-face http://www.timoni.org
Monday, March 22, 2010 23
24. @font-face http://sxsw.beercamp.com
Monday, March 22, 2010 24
25. @font-face http://elliotjaystocks.com
Monday, March 22, 2010 25
26. @font-face http://forabeautifulweb.com
Monday, March 22, 2010 26
• Font as Service
Typekit : http://typekit.com
FontDeck : http://fontdeck.com (coming soon)
FontSpring : http://fontspring.com
Typotheque : http://typotheque.com
Webtype : http://webtype.com (coming soon)
Kernest : http://kernest.com
• Free @font-face sites
FontSquirrel : http://fontsquirrel.com
League of Moveable Type : http://www.theleagueofmoveabletype.com/
• @font-face generators
FontSquirrel : http://www.fontsquirrel.com/fontface/generator
Monday, March 22, 2010 27
• How to Use @font-face
• GZIP your @font-face files
• Font Hinting and Anti-Aliasing
• Recommended Reading
Lots of @font-face info, including a list of @font-face-ready fonts
Monday, March 22, 2010 28
29. CSS Text-Shadow
What is it?
• text-shadow is a simple technique of adding a dropshadow
or highlight to text in the web page.
• It can be used to create a lighting effect or a to create
dimension through use of multiple text-shadows.
Monday, March 22, 2010 29
30. CSS Text-Shadow
• Text-shadows can be used to create great looking text
effects to enhance the style of your typography.
• In some cases text-shadow can increase the legibility of
text by increasing the contrast of the type against the
• If your design requires a letter-press feel, you can easily
achieve this effect using text-shadow.
Monday, March 22, 2010 30
31. CSS Text-Shadow
• Not supported in Internet Explorer (scheduled for support
in IE9 with many other CSS3 features).
• If abused, can make text less legible.
Monday, March 22, 2010 31
32. CSS Text-Shadow
• text-shadow, like other type treatments for the web is
easily abused. Be gentle and subtle, don’t overdue it.
Monday, March 22, 2010 32
33. CSS Text-Shadow
• Increasing readability
Rogie King works out a nice
text-shadow hack to increase
readability of text in Safari for
light colored text on dark
Monday, March 22, 2010 33
37. CSS Text-Shadow
• Firefox 3.1+
• Safari 3+ (4+ has multiple text-shadow support)
• Chrome 2+
• Opera 9.5+
Monday, March 22, 2010 37
38. CSS Text-Shadow http://sxsw.beercamp.com
Monday, March 22, 2010 38
39. CSS Text-Shadow http://timvandamme.com
Monday, March 22, 2010 39
40. CSS Text-Shadow http://analog.coop
Monday, March 22, 2010 40
41. CSS Text-Shadow http://blog.squarespace.com
Monday, March 22, 2010 41
42. CSS Multi-Columns
What is it?
• The CSS multi-column module offers a method of allowing
long chunks of text to wrap to multiple columns in a
manner that formerly required server side scripting.
• This technique is widely popular in editorial design of
magazines and newspapers, but is rarely used on the web.
Monday, March 22, 2010 42
43. CSS Multi-Columns
• Large chunks of text can now be displayed in a shorter
vertical space and also sport properly sized column widths
that support better readability.
• Stylistically this effect can add nuance and typographical
care to a detailed design.
• This approach is far more semantic than other methods
that required additional markup to achieve similar ends.
Monday, March 22, 2010 43
44. CSS Multi-Columns
• Easy to abuse. The web is not static editorial design
platform. With a confined viewing port, designers will
make usability and readability mistakes with this technique
that can make a web experience extremely poor.
Monday, March 22, 2010 44
45. CSS Multi-Columns
• Wide columns of text are difficult to read because the
viewing distance from the end of one line to the beginning
of the next.
Monday, March 22, 2010 45
46. CSS Multi-Columns
• Multi-Column text helps the user read faster facilitating
Make sure the distance
from the top of the
column to the bottom
of the column is tight
enough for easy
Monday, March 22, 2010 46