web typography with css3
DESCRIPTION
A presentation for Carsonified by Sean Gaffney and Matthew Smith.TRANSCRIPT
WEB TYPOGRAPHY
CSS3&
with Sean Gaffney and Matthew Smith
1Monday, March 22, 2010
Sean GaffneyFreelancing Developer working with designers and agencies to make sure details get communicated clearly through technology on the web.
seangaffney.cc@seangaffney
2Monday, March 22, 2010
Matthew SmithPrincipal at Squared EyeCreative 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.
squaredeye.com@squaredeye
3Monday, March 22, 2010
Web Typography & CSS3@font-face
Text-Shadow
MultiColumn Text
4Monday, March 22, 2010
@font-face
• 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
What is it?
5Monday, March 22, 2010
@font-face
• 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)
Pros
6Monday, March 22, 2010
@font-face
• 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.
Cons
7Monday, March 22, 2010
@font-face
• Access to more fonts increases the need for us all to learn typography, and web typography.
Design Considerations
8Monday, March 22, 2010
@font-face
• Great web typography is possible with the old guard of core fonts.
Design Considerations
http://seedconference.com
9Monday, March 22, 2010
@font-faceLearn Typography
10Monday, March 22, 2010
@font-faceLearn Typography
http://webtypography.net/
11Monday, March 22, 2010
@font-face
• 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.
Licensing
12Monday, March 22, 2010
@font-face
• 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.
What’s changing in the marketplace?
13Monday, March 22, 2010
@font-face
• 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.
What’s changing in the technology?
14Monday, March 22, 2010
@font-face
• 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.
What’s changing in the technology?
15Monday, March 22, 2010
@font-faceImplementation Techniques
• Commercial Font-serving Sites:Typekit, Fontdeck, Typotheque, Webtype, Kernest
• Free (Font Squirrel)
• Mixed Use (Fontspring)
• Roll Your Own Obfuscation
16Monday, March 22, 2010
@font-faceBrowser 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)
17Monday, March 22, 2010
@font-faceCode@font-face { font-family: ‘GnuolaneRegular’; src: url(‘gnuolane_reg.ttf’) format(‘truetype’);}
h2 { font-family: ‘GnuolaneRegular’, Impact, sans-serif;}
18Monday, March 22, 2010
@font-faceCode - “Bulletproof”@font-face { font-family: 'GnuolaneReg'; src: url('gnuolane_reg.eot'); src: local('GnuolaneReg'), local('GnuolaneReg Web'), url("gnuolane_reg.woff") format("woff"), url("gnuolane_reg.otf") format("opentype"), url("gnuolane_reg.svg#gnuolane") format("svg");}
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
19Monday, March 22, 2010
@font-faceOptimization
• 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
20Monday, March 22, 2010
@font-faceRendering
• 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.
21Monday, March 22, 2010
@font-faceTesting
• Internet Explorer without ClearType
22Monday, March 22, 2010
@font-faceExample Usage
http://www.timoni.org
23Monday, March 22, 2010
@font-faceExample Usage
http://sxsw.beercamp.com
24Monday, March 22, 2010
@font-faceExample Usage
http://elliotjaystocks.com
25Monday, March 22, 2010
@font-faceExample Usage
http://forabeautifulweb.com
26Monday, March 22, 2010
@font-faceResources
• Font as ServiceTypekit : http://typekit.comFontDeck : http://fontdeck.com (coming soon)FontSpring : http://fontspring.comTypotheque : http://typotheque.comWebtype : http://webtype.com (coming soon)Kernest : http://kernest.com
• Free @font-face sitesFontSquirrel : http://fontsquirrel.comLeague of Moveable Type : http://www.theleagueofmoveabletype.com/
• @font-face generatorsFontSquirrel : http://www.fontsquirrel.com/fontface/generator
27Monday, March 22, 2010
@font-faceResources
• 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-Aliasinghttp://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 Readinghttp://webfonts.info/
Lots of @font-face info, including a list of @font-face-ready fonts
28Monday, March 22, 2010
CSS Text-Shadow
• 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.
What is it?
29Monday, March 22, 2010
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 background.
• If your design requires a letter-press feel, you can easily achieve this effect using text-shadow.
Pros
30Monday, March 22, 2010
CSS Text-ShadowCons
• Not supported in Internet Explorer (scheduled for support in IE9 with many other CSS3 features).
• If abused, can make text less legible.
31Monday, March 22, 2010
CSS Text-Shadow
• text-shadow, like other type treatments for the web is easily abused. Be gentle and subtle, don’t overdue it.
Design Considerations
32Monday, March 22, 2010
CSS Text-Shadow
• Increasing readability
Design Considerations
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/
33Monday, March 22, 2010
CSS Text-ShadowCodeh2 { text-shadow: x-offset y-offset blur-radius #000;}
h2 { text-shadow: 1px 1px 5px #000;}
34Monday, March 22, 2010
CSS Text-ShadowCode - Multiple Shadowsp { 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;}
35Monday, March 22, 2010
CSS Text-ShadowCode - Multiple Shadows
60px
32px
14px
36Monday, March 22, 2010
Browser Compatibility
CSS Text-Shadow
• Firefox 3.1+
• Safari 3+ (4+ has multiple text-shadow support)
• Chrome 2+
• Opera 9.5+
• MobileWebkit
37Monday, March 22, 2010
Example Usage
http://sxsw.beercamp.comCSS Text-Shadow
38Monday, March 22, 2010
Example Usage
http://timvandamme.comCSS Text-Shadow
39Monday, March 22, 2010
Example Usage
http://analog.coopCSS Text-Shadow
40Monday, March 22, 2010
Example Usage
http://blog.squarespace.comCSS Text-Shadow
41Monday, March 22, 2010
CSS Multi-Columns
• 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.
What is it?
42Monday, March 22, 2010
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.
Pros
43Monday, March 22, 2010
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.
Cons
44Monday, March 22, 2010
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.
Design Considerations
45Monday, March 22, 2010
CSS Multi-Columns
• Multi-Column text helps the user read faster facilitating better scanability.
Design Considerations
Make sure the distance from the top of the column to the bottom of the column is tight enough for easy scanning.
46Monday, March 22, 2010
CSS Multi-ColumnsCode - Column Countdiv.multicol { column-count: 3; column-gap: 15px; -moz-column-count: 3; -moz-column-gap: 15px; -webkit-column-count: 3; -webkit-column-gap: 15px;}
47Monday, March 22, 2010
CSS Multi-ColumnsCode - Column Count
48Monday, March 22, 2010
CSS Multi-ColumnsCode - Column Widthdiv.multicol { column-width: 200px; column-gap: 15px; -moz-column-width: 200px; -moz-column-gap: 15px; -webkit-column-width: 200px; -webkit-column-gap: 15px;}
49Monday, March 22, 2010
CSS Multi-ColumnsCode - Column Width
50Monday, March 22, 2010
CSS Multi-ColumnsCode - Column Rule (Webkit Only)div.multicol { column-width: 200px; column-gap: 15px; -moz-column-width: 200px; -moz-column-gap: 15px; -webkit-column-width: 200px; -webkit-column-gap: 15px; -webkit-column-rule-color: #000; -webkit-column-rule-style: dotted; -webkit-column-rule-width: 2px;}
51Monday, March 22, 2010
CSS Multi-Columns
column rule
Code - Column Rule (Webkit Only)
52Monday, March 22, 2010
CSS Multi-ColumnsBrowser Compatibility
• Firefox 1.5+
• Safari 3+
• Chrome 1+
• MobileWebkit
53Monday, March 22, 2010
CSS Multi-ColumnsBrowser Compatibility
• Browsers that do not support CSS3 columns degrade to a full width, standard text approach
54Monday, March 22, 2010
Example Usage
http://tweetcc.comCSS Multi-Columns
55Monday, March 22, 2010
Example Usage
http://desandro.comCSS Multi-Columns
56Monday, March 22, 2010
Example Usage
http://desandro.comCSS Multi-Columns
57Monday, March 22, 2010
THANK YOUWEB TYPOGRAPHY
CSS3&
with Sean Gaffney and Matthew Smith
for joining us for
58Monday, March 22, 2010