SlideShare a Scribd company logo

Web Typography with CSS3

•
Matthew Smith, profile picture
Matthew Smith

- The document provides an overview of web typography techniques using CSS3, including @font-face, text-shadow, and multi-column text. - @font-face allows using custom fonts on the web by linking to font files, text-shadow adds shadows to text for effects, and multi-column text wraps content into multiple columns for easier reading of long passages. - Examples and browser support for each technique are discussed, along with best practices for implementation and design considerations. Code samples are also included.

Design
1 of 58
Downloaded 851 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
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. Monday, March 22, 2010 2
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. Monday, March 22, 2010 3
Web Typography & CSS3 @font-face Text-Shadow MultiColumn Text Monday, March 22, 2010 4
@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 Monday, March 22, 2010 5
@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) Monday, March 22, 2010 6
@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. Monday, March 22, 2010 7
@font-face Design Considerations • Access to more fonts increases the need for us all to learn typography, and web typography. Monday, March 22, 2010 8
@font-face http://seedconference.com Design Considerations • Great web typography is possible with the old guard of core fonts. Monday, March 22, 2010 9
@font-face Learn Typography Monday, March 22, 2010 10
@font-face Learn Typography http://webtypography.net/ Monday, March 22, 2010 11
@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. Monday, March 22, 2010 12
@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. Monday, March 22, 2010 13
@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. Monday, March 22, 2010 14
@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. Monday, March 22, 2010 15
@font-face Implementation Techniques • Commercial Font-serving Sites: Typekit, Fontdeck, Typotheque, Webtype, Kernest • Free (Font Squirrel) • Mixed Use (Fontspring) • Roll Your Own Obfuscation Monday, March 22, 2010 16
@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) Monday, March 22, 2010 17
@font-face Code @font-face { font-family: ‘GnuolaneRegular’; src: url(‘gnuolane_reg.ttf’) format(‘truetype’); } h2 { font-family: ‘GnuolaneRegular’, Impact, sans-serif; } Monday, March 22, 2010 18
@font-face Code - “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/ Monday, March 22, 2010 19
@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 Monday, March 22, 2010 20
@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. Monday, March 22, 2010 21
@font-face Testing • Internet Explorer without ClearType Monday, March 22, 2010 22
@font-face http://www.timoni.org Example Usage Monday, March 22, 2010 23
@font-face http://sxsw.beercamp.com Example Usage Monday, March 22, 2010 24
@font-face http://elliotjaystocks.com Example Usage Monday, March 22, 2010 25
@font-face http://forabeautifulweb.com Example Usage Monday, March 22, 2010 26
@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 Monday, March 22, 2010 27
@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 Monday, March 22, 2010 28
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
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. Monday, March 22, 2010 30
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. Monday, March 22, 2010 31
CSS Text-Shadow Design Considerations • 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
CSS Text-Shadow Design Considerations • 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/ Monday, March 22, 2010 33
CSS Text-Shadow Code h2 { text-shadow: x-offset y-offset blur-radius #000; } h2 { text-shadow: 1px 1px 5px #000; } Monday, March 22, 2010 34
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; } Monday, March 22, 2010 35
CSS Text-Shadow Code - Multiple Shadows 60px 32px 14px Monday, March 22, 2010 36
CSS Text-Shadow Browser Compatibility • Firefox 3.1+ • Safari 3+ (4+ has multiple text-shadow support) • Chrome 2+ • Opera 9.5+ • MobileWebkit Monday, March 22, 2010 37
CSS Text-Shadow http://sxsw.beercamp.com Example Usage Monday, March 22, 2010 38
CSS Text-Shadow http://timvandamme.com Example Usage Monday, March 22, 2010 39
CSS Text-Shadow http://analog.coop Example Usage Monday, March 22, 2010 40
CSS Text-Shadow http://blog.squarespace.com Example Usage Monday, March 22, 2010 41
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
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. Monday, March 22, 2010 43
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. Monday, March 22, 2010 44
CSS Multi-Columns Design Considerations • 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
CSS Multi-Columns Design Considerations • 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. Monday, March 22, 2010 46
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; } Monday, March 22, 2010 47
CSS Multi-Columns Code - Column Count Monday, March 22, 2010 48
CSS Multi-Columns Code - Column Width div.multicol { column-width: 200px; column-gap: 15px; -moz-column-width: 200px; -moz-column-gap: 15px; -webkit-column-width: 200px; -webkit-column-gap: 15px; } Monday, March 22, 2010 49
CSS Multi-Columns Code - Column Width Monday, March 22, 2010 50
CSS Multi-Columns Code - 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; } Monday, March 22, 2010 51
CSS Multi-Columns Code - Column Rule (Webkit Only) column rule Monday, March 22, 2010 52
CSS Multi-Columns Browser Compatibility • Firefox 1.5+ • Safari 3+ • Chrome 1+ • MobileWebkit Monday, March 22, 2010 53
CSS Multi-Columns Browser Compatibility • Browsers that do not support CSS3 columns degrade to a full width, standard text approach Monday, March 22, 2010 54
CSS Multi-Columns http://tweetcc.com Example Usage Monday, March 22, 2010 55
CSS Multi-Columns http://desandro.com Example Usage Monday, March 22, 2010 56
CSS Multi-Columns http://desandro.com Example Usage Monday, March 22, 2010 57
THANK YOU for joining us for WEB TYPOGRAPHY & CSS3 with Sean Gaffney and Matthew Smith Monday, March 22, 2010 58

More Related Content

PDF
Better Typography
markboultondesign
 
PDF
Elegant Web Typography
jeff_croft
 
PPTX
Design Concepts and Web Design
Mindy McAdams
 
PDF
The Art of Web Design, 101
kellyhousholder
 
PDF
Don't Make Me Scroll
The New School's Journalism + Design Program
 
PDF
Design for developers (april 25, 2017)
Thinkful
 
PDF
The future of typography in Web design
elfinsilhouette83
 
PDF
With Great Power, a lecture on web typography
Erika Tarte
 
Better Typography
markboultondesign
 
Elegant Web Typography
jeff_croft
 
Design Concepts and Web Design
Mindy McAdams
 
The Art of Web Design, 101
kellyhousholder
 
Don't Make Me Scroll
The New School's Journalism + Design Program
 
Design for developers (april 25, 2017)
Thinkful
 
The future of typography in Web design
elfinsilhouette83
 
With Great Power, a lecture on web typography
Erika Tarte
 

Similar to Web Typography with CSS3 (20)

PDF
Tool twist newsletter 2010
Aravind Naidu
 
PDF
Fonts on the Web - a guide to web fonts
Prototype Interactive
 
PDF
The Type We Want
Jonathan Snook
 
PDF
Web Typography & Drupal: Putting Arial Out to Pasture
Jason Pamental
 
PPT
Website design2
robclarkson
 
KEY
Principles Of Web Design Workshop
Gavin Elliott
 
PDF
WOFF and emerging technology of web fonts
Vladimir Levantovsky
 
PDF
The State of Web Type
Matthew Buchanan
 
PDF
The Trouble With Type
elliotjaystocks
 
PDF
Webfonts: Demystified
Mel Choyce
 
PDF
The type revolutionary's cookbook
Four Kitchens
 
PDF
Webfonts and Web Typography
Jan Wilson
 
PPT
Web font services: March 2011
RZasadzinski
 
PDF
new fonts for the web
Marc Tobias Kunisch
 
KEY
Typography online
Jake Smith
 
KEY
Geek Meet: Web Typography and sIFR 3
Mark Wubben
 
PDF
Progressive Enhancement & Intentional Degradation 2
elliotjaystocks
 
PDF
The State of Web Typography
Derek Bender
 
PDF
Extensis Web Typography Workshop | WebVisions Portland
Extensis
 
PDF
Web Fonts
Juan Medina
 
Tool twist newsletter 2010
Aravind Naidu
 
Fonts on the Web - a guide to web fonts
Prototype Interactive
 
The Type We Want
Jonathan Snook
 
Web Typography & Drupal: Putting Arial Out to Pasture
Jason Pamental
 
Website design2
robclarkson
 
Principles Of Web Design Workshop
Gavin Elliott
 
WOFF and emerging technology of web fonts
Vladimir Levantovsky
 
The State of Web Type
Matthew Buchanan
 
The Trouble With Type
elliotjaystocks
 
Webfonts: Demystified
Mel Choyce
 
The type revolutionary's cookbook
Four Kitchens
 
Webfonts and Web Typography
Jan Wilson
 
Web font services: March 2011
RZasadzinski
 
new fonts for the web
Marc Tobias Kunisch
 
Typography online
Jake Smith
 
Geek Meet: Web Typography and sIFR 3
Mark Wubben
 
Progressive Enhancement & Intentional Degradation 2
elliotjaystocks
 
The State of Web Typography
Derek Bender
 
Extensis Web Typography Workshop | WebVisions Portland
Extensis
 
Web Fonts
Juan Medina
 
Ad

Recently uploaded (20)

PPTX
The birth & Rise of python.pptx vaibhavd
vaibhavdobariyal79
 
PDF
Kitchen_Aluminium_Doors_Prices_Presentation.pdf
Royal Matrixs
 
PPTX
Blended Wing Body y jet engines Aircrafts.pptx
anshul9051
 
PDF
Shayna Andrieze Yjasmin Goles - Your VA!
shaynagoles31
 
PPTX
3. Introduction to Materials and springs.pptx
YESIMSMART
 
DOCX
Amplopxxxxxxxxxvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
Lm Hardin 'Idin'
 
PDF
Unlimited G+12 Dubai DM exam questions for contractor
saniyashaik2089
 
PPTX
Aldol_Condensation_Presentation (1).pptx
mahatosandip1888
 
PDF
SS27 Women's Fashion Trend Book Peclers Paris
Peclers Paris
 
PDF
Dunes.pdf, Durable and Seamless Solid Surface Countertops
tranquil01
 
PDF
Hossain Kamyab on Mixing and Matching Furniture.pdf
Hossain Kamyab
 
PDF
First-Aid.pdfjavaghavavgahavavavbabavabba
meitohehe
 
PPTX
Time_Management_Presenuuuuuuutation.pptx
Rajni Goyal
 
PPTX
Mini-Project description of design of expert project
peter349484
 
PDF
SS27 Environments & Design Trend Book Peclers Paris
Peclers Paris
 
PDF
Line Sizing presentation about pipe sizes
anniebuzzfeed
 
PPTX
Economics Reforms of Alauddin Khilji.pptx
Kritisharma797381
 
PPTX
700315768-Linguistic-Connnnnnnnnntext.pptx
rossanthonytan1
 
PPTX
Engagement for marriage life ethics b.pptx
SyedBabar19
 
PDF
Fashion project1 kebaya reimagined slideshow
reysultane
 
The birth & Rise of python.pptx vaibhavd
vaibhavdobariyal79
 
Kitchen_Aluminium_Doors_Prices_Presentation.pdf
Royal Matrixs
 
Blended Wing Body y jet engines Aircrafts.pptx
anshul9051
 
Shayna Andrieze Yjasmin Goles - Your VA!
shaynagoles31
 
3. Introduction to Materials and springs.pptx
YESIMSMART
 
Amplopxxxxxxxxxvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
Lm Hardin 'Idin'
 
Unlimited G+12 Dubai DM exam questions for contractor
saniyashaik2089
 
Aldol_Condensation_Presentation (1).pptx
mahatosandip1888
 
SS27 Women's Fashion Trend Book Peclers Paris
Peclers Paris
 
Dunes.pdf, Durable and Seamless Solid Surface Countertops
tranquil01
 
Hossain Kamyab on Mixing and Matching Furniture.pdf
Hossain Kamyab
 
First-Aid.pdfjavaghavavgahavavavbabavabba
meitohehe
 
Time_Management_Presenuuuuuuutation.pptx
Rajni Goyal
 
Mini-Project description of design of expert project
peter349484
 
SS27 Environments & Design Trend Book Peclers Paris
Peclers Paris
 
Line Sizing presentation about pipe sizes
anniebuzzfeed
 
Economics Reforms of Alauddin Khilji.pptx
Kritisharma797381
 
700315768-Linguistic-Connnnnnnnnntext.pptx
rossanthonytan1
 
Engagement for marriage life ethics b.pptx
SyedBabar19
 
Fashion project1 kebaya reimagined slideshow
reysultane
 
Ad

Web Typography with CSS3

  • 1. WEB TYPOGRAPHY & CSS3 with Sean Gaffney and Matthew Smith Monday, March 22, 2010 1
  • 2. Sean Gaffney seangaffney.cc @seangaffney 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 @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. Monday, March 22, 2010 3
  • 4. Web Typography & CSS3 @font-face Text-Shadow MultiColumn Text Monday, March 22, 2010 4
  • 5. @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 Monday, March 22, 2010 5
  • 6. @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) Monday, March 22, 2010 6
  • 7. @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. Monday, March 22, 2010 7
  • 8. @font-face Design Considerations • 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 Design Considerations • Great web typography is possible with the old guard of core fonts. Monday, March 22, 2010 9
  • 10. @font-face Learn Typography Monday, March 22, 2010 10
  • 11. @font-face Learn Typography http://webtypography.net/ Monday, March 22, 2010 11
  • 12. @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. Monday, March 22, 2010 12
  • 13. @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. Monday, March 22, 2010 13
  • 14. @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. Monday, March 22, 2010 14
  • 15. @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. Monday, March 22, 2010 15
  • 16. @font-face Implementation Techniques • Commercial Font-serving Sites: Typekit, Fontdeck, Typotheque, Webtype, Kernest • Free (Font Squirrel) • Mixed Use (Fontspring) • Roll Your Own Obfuscation Monday, March 22, 2010 16
  • 17. @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) Monday, March 22, 2010 17
  • 18. @font-face Code @font-face { font-family: ‘GnuolaneRegular’; src: url(‘gnuolane_reg.ttf’) format(‘truetype’); } h2 { font-family: ‘GnuolaneRegular’, Impact, sans-serif; } Monday, March 22, 2010 18
  • 19. @font-face Code - “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/ Monday, March 22, 2010 19
  • 20. @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 Monday, March 22, 2010 20
  • 21. @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. Monday, March 22, 2010 21
  • 22. @font-face Testing • Internet Explorer without ClearType Monday, March 22, 2010 22
  • 23. @font-face http://www.timoni.org Example Usage Monday, March 22, 2010 23
  • 24. @font-face http://sxsw.beercamp.com Example Usage Monday, March 22, 2010 24
  • 25. @font-face http://elliotjaystocks.com Example Usage Monday, March 22, 2010 25
  • 26. @font-face http://forabeautifulweb.com Example Usage Monday, March 22, 2010 26
  • 27. @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 Monday, March 22, 2010 27
  • 28. @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 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 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. Monday, March 22, 2010 30
  • 31. 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. Monday, March 22, 2010 31
  • 32. CSS Text-Shadow Design Considerations • 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 Design Considerations • 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/ Monday, March 22, 2010 33
  • 34. CSS Text-Shadow Code h2 { text-shadow: x-offset y-offset blur-radius #000; } h2 { text-shadow: 1px 1px 5px #000; } Monday, March 22, 2010 34
  • 35. 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; } Monday, March 22, 2010 35
  • 36. CSS Text-Shadow Code - Multiple Shadows 60px 32px 14px Monday, March 22, 2010 36
  • 37. CSS Text-Shadow Browser Compatibility • Firefox 3.1+ • Safari 3+ (4+ has multiple text-shadow support) • Chrome 2+ • Opera 9.5+ • MobileWebkit Monday, March 22, 2010 37
  • 38. CSS Text-Shadow http://sxsw.beercamp.com Example Usage Monday, March 22, 2010 38
  • 39. CSS Text-Shadow http://timvandamme.com Example Usage Monday, March 22, 2010 39
  • 40. CSS Text-Shadow http://analog.coop Example Usage Monday, March 22, 2010 40
  • 41. CSS Text-Shadow http://blog.squarespace.com Example Usage 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 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. Monday, March 22, 2010 43
  • 44. 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. Monday, March 22, 2010 44
  • 45. CSS Multi-Columns Design Considerations • 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 Design Considerations • 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. Monday, March 22, 2010 46
  • 47. 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; } Monday, March 22, 2010 47
  • 48. CSS Multi-Columns Code - Column Count Monday, March 22, 2010 48
  • 49. CSS Multi-Columns Code - Column Width div.multicol { column-width: 200px; column-gap: 15px; -moz-column-width: 200px; -moz-column-gap: 15px; -webkit-column-width: 200px; -webkit-column-gap: 15px; } Monday, March 22, 2010 49
  • 50. CSS Multi-Columns Code - Column Width Monday, March 22, 2010 50
  • 51. CSS Multi-Columns Code - 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; } Monday, March 22, 2010 51
  • 52. CSS Multi-Columns Code - Column Rule (Webkit Only) column rule Monday, March 22, 2010 52
  • 53. CSS Multi-Columns Browser Compatibility • Firefox 1.5+ • Safari 3+ • Chrome 1+ • MobileWebkit Monday, March 22, 2010 53
  • 54. CSS Multi-Columns Browser Compatibility • Browsers that do not support CSS3 columns degrade to a full width, standard text approach Monday, March 22, 2010 54
  • 55. CSS Multi-Columns http://tweetcc.com Example Usage Monday, March 22, 2010 55
  • 56. CSS Multi-Columns http://desandro.com Example Usage Monday, March 22, 2010 56
  • 57. CSS Multi-Columns http://desandro.com Example Usage Monday, March 22, 2010 57
  • 58. THANK YOU for joining us for WEB TYPOGRAPHY & CSS3 with Sean Gaffney and Matthew Smith Monday, March 22, 2010 58