�ݺ�ߣ

WEB TYPOGRAPHY
&

CSS3
with Sean Gaffney and Matthew Smith

Monday, March 22, 2010 1

Sean Gaffney seangaffney.cc
@seangaffney

Freelancing Developer working with
designers and agencies to make sure
details get communicated clearly
through technology on the web.


Matthew Smith squaredeye.com
@squaredeye

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.


Web Typography & CSS3
@font-face
Text-Shadow
MultiColumn Text


@font-face
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


@font-face
Pros
• 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)


@font-face
Cons
• 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.


@font-face
Design Considerations
• Access to more fonts increases the need for us all to learn
typography, and web typography.


@font-face http://seedconference.com

• Great web typography is possible with the old guard of core fonts.


@font-face
Learn Typography


@font-face
Learn Typography

http://webtypography.net/


@font-face
Licensing
• 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.


@font-face
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.


@font-face
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.


@font-face
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
downloading.


@font-face
Implementation Techniques
• Commercial Font-serving Sites:
Typekit, Fontdeck, Typotheque, Webtype, Kernest

• Free (Font Squirrel)

• Mixed Use (Fontspring)

• Roll Your Own Obfuscation


@font-face
Browser Compatibility
• Firefox 3.5+ (TTF, OTF) since 3.6+ (WOFF)

• Safari 3.1+ (TTF, OTF)

• Chrome 4+ (TTF, OTF, SVG)

• Opera 10+ (TTF, OTF, SVG)

• IE 4+ (EOT)

• MobileWebkit (SVG)


@font-face
Code
@font-face {
font-family: ‘GnuolaneRegular’;
src: url(/slideshow/web-typography-with-css3/3510852/‘gnuolane_reg.ttf’) format(‘truetype’);
}

h2 {
font-family: ‘GnuolaneRegular’, Impact, sans-serif;
}


@font-face
Code - “Bulletproof”
@font-face {
font-family: 'GnuolaneReg';
src: url(/slideshow/web-typography-with-css3/3510852/&);
src: local('GnuolaneReg'), local('GnuolaneReg Web'),
url(/slideshow/web-typography-with-css3/3510852/"gnuolane_reg.woff") format("woff"),
url(/slideshow/web-typography-with-css3/3510852/"gnuolane_reg.otf") format("opentype"),
url(/slideshow/web-typography-with-css3/3510852/"gnuolane_reg.svg) format("svg");
}

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/


@font-face
Optimization
• Javascript and CSS techniques exist to minimize FOUT

• 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


@font-face
Rendering
• 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
for Windows.


@font-face
Testing
• Internet Explorer without ClearType


@font-face http://www.timoni.org

Example Usage


@font-face http://sxsw.beercamp.com

Example Usage


@font-face http://elliotjaystocks.com

Example Usage


@font-face http://forabeautifulweb.com

Example Usage


@font-face
Resources
• 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


@font-face
Resources
• How to Use @font-face
http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

• GZIP your @font-face files
http://www.phpied.com/gzip-your-font-face-files/

• Font Hinting and Anti-Aliasing
http://szafranek.net/works/articles/font-smoothing-explained/
http://readableweb.com/font-hinting-explained-by-a-font-design-master/
http://www.thomasphinney.com/2009/12/browser-choice-vs-font-rendering/

• Recommended Reading
http://webfonts.info/
Lots of @font-face info, including a list of @font-face-ready fonts


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.


CSS Text-Shadow
Pros
• 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
background.

• If your design requires a letter-press feel, you can easily
achieve this effect using text-shadow.


CSS Text-Shadow
Cons
• Not supported in Internet Explorer (scheduled for support
in IE9 with many other CSS3 features).

• If abused, can make text less legible.


CSS Text-Shadow
• text-shadow, like other type treatments for the web is
easily abused. Be gentle and subtle, don’t overdue it.


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
backgrounds.

http://www.komodomedia.com/blog/2009/03/safari-
text-shadow-anti-aliasing-css-hack/


CSS Text-Shadow
Code
h2 {
text-shadow: x-offset y-offset blur-radius #000;
}

h2 {
text-shadow: 1px 1px 5px #000;
}


CSS Text-Shadow
Code - Multiple Shadows
p{
margin: 0 0 1em;
font-size: 60px;
font-weight: bold;
color: #ccc;
letter-spacing: 1px;
text-shadow: -1px -1px 0px #333, 1px 1px 1px #fff;
}


CSS Text-Shadow
Code - Multiple Shadows

60px

32px

14px


CSS Text-Shadow
• Firefox 3.1+

• Safari 3+ (4+ has multiple text-shadow support)

• Chrome 2+

• Opera 9.5+

• MobileWebkit


CSS Text-Shadow http://sxsw.beercamp.com

Example Usage


CSS Text-Shadow http://timvandamme.com

Example Usage


CSS Text-Shadow http://analog.coop

Example Usage


CSS Text-Shadow http://blog.squarespace.com

Example Usage


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.


CSS Multi-Columns
Pros
• 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.


CSS Multi-Columns
Cons
• 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.


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.


CSS Multi-Columns
• Multi-Column text helps the user read faster facilitating
better scanability.
Make sure the distance
from the top of the
column to the bottom
of the column is tight
enough for easy
scanning.


CSS Multi-Columns
Code - Column Count
div.multicol {
column-count: 3;
column-gap: 15px;
-moz-column-count: 3;
-moz-column-gap: 15px;
-webkit-column-count: 3;
-webkit-column-gap: 15px;
}


CSS Multi-Columns
Code - Column Count


CSS Multi-Columns
Code - Column Width
div.multicol {
column-width: 200px;
column-gap: 15px;
-moz-column-width: 200px;
-webkit-column-width: 200px;
}


CSS Multi-Columns
Code - Column Width


CSS Multi-Columns
Code - Column Rule (Webkit Only)
div.multicol {
column-width: 200px;
column-gap: 15px;
-moz-column-width: 200px;
-webkit-column-width: 200px;
-webkit-column-rule-color: #000;
-webkit-column-rule-style: dotted;
-webkit-column-rule-width: 2px;
}


CSS Multi-Columns
Code - Column Rule (Webkit Only)

column rule

CSS Multi-Columns
• Firefox 1.5+

• Safari 3+

• Chrome 1+

• MobileWebkit


CSS Multi-Columns
• Browsers that do not support CSS3 columns degrade to a
full width, standard text approach


CSS Multi-Columns http://tweetcc.com

Example Usage


CSS Multi-Columns http://desandro.com

Example Usage


THANK YOU for joining us for

WEB TYPOGRAPHY
&

CSS3
with Sean Gaffney and Matthew Smith


�ݺ�ߣ

Web Typography with CSS3

Recommended

More Related Content

Similar to Web Typography with CSS3 (20)

Recently uploaded (20)

Web Typography with CSS3