Web Typography with CSS3

58
WEB TYPOGRAPHY CSS3 & with Sean Gaffney and Matthew Smith 1 Monday, March 22, 2010

description

A presentation for Carsonified by Sean Gaffney and Matthew Smith.

Transcript of Web Typography with CSS3

Page 1: Web Typography with CSS3

WEB TYPOGRAPHY

CSS3&

with Sean Gaffney and Matthew Smith

1Monday, March 22, 2010

Page 2: Web Typography with CSS3

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

Page 3: Web Typography with CSS3

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

Page 4: Web Typography with CSS3

Web Typography & CSS3@font-face

Text-Shadow

MultiColumn Text

4Monday, March 22, 2010

Page 5: Web Typography with CSS3

@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

Page 6: Web Typography with CSS3

@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

Page 7: Web Typography with CSS3

@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

Page 8: Web Typography with CSS3

@font-face

• Access to more fonts increases the need for us all to learn typography, and web typography.

Design Considerations

8Monday, March 22, 2010

Page 9: Web Typography with CSS3

@font-face

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

Design Considerations

http://seedconference.com

9Monday, March 22, 2010

Page 10: Web Typography with CSS3

@font-faceLearn Typography

10Monday, March 22, 2010

Page 11: Web Typography with CSS3

@font-faceLearn Typography

http://webtypography.net/

11Monday, March 22, 2010

Page 12: Web Typography with CSS3

@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

Page 13: Web Typography with CSS3

@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

Page 14: Web Typography with CSS3

@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

Page 15: Web Typography with CSS3

@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

Page 16: Web Typography with CSS3

@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

Page 17: Web Typography with CSS3

@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

Page 18: Web Typography with CSS3

@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

Page 19: Web Typography with CSS3

@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

Page 20: Web Typography with CSS3

@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

Page 21: Web Typography with CSS3

@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

Page 22: Web Typography with CSS3

@font-faceTesting

• Internet Explorer without ClearType

22Monday, March 22, 2010

Page 23: Web Typography with CSS3

@font-faceExample Usage

http://www.timoni.org

23Monday, March 22, 2010

Page 24: Web Typography with CSS3

@font-faceExample Usage

http://sxsw.beercamp.com

24Monday, March 22, 2010

Page 25: Web Typography with CSS3

@font-faceExample Usage

http://elliotjaystocks.com

25Monday, March 22, 2010

Page 26: Web Typography with CSS3

@font-faceExample Usage

http://forabeautifulweb.com

26Monday, March 22, 2010

Page 27: Web Typography with CSS3

@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

Page 28: Web Typography with CSS3

@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

Page 29: Web Typography with CSS3

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

Page 30: Web Typography with CSS3

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

Page 31: Web Typography with CSS3

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

Page 32: Web Typography with CSS3

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

Page 33: Web Typography with CSS3

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

Page 34: Web Typography with CSS3

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

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

34Monday, March 22, 2010

Page 35: Web Typography with CSS3

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

Page 36: Web Typography with CSS3

CSS Text-ShadowCode - Multiple Shadows

60px

32px

14px

36Monday, March 22, 2010

Page 37: Web Typography with CSS3

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

Page 38: Web Typography with CSS3

Example Usage

http://sxsw.beercamp.comCSS Text-Shadow

38Monday, March 22, 2010

Page 39: Web Typography with CSS3

Example Usage

http://timvandamme.comCSS Text-Shadow

39Monday, March 22, 2010

Page 40: Web Typography with CSS3

Example Usage

http://analog.coopCSS Text-Shadow

40Monday, March 22, 2010

Page 41: Web Typography with CSS3

Example Usage

http://blog.squarespace.comCSS Text-Shadow

41Monday, March 22, 2010

Page 42: Web Typography with CSS3

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

Page 43: Web Typography with CSS3

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

Page 44: Web Typography with CSS3

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

Page 45: Web Typography with CSS3

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

Page 46: Web Typography with CSS3

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

Page 47: Web Typography with CSS3

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

Page 48: Web Typography with CSS3

CSS Multi-ColumnsCode - Column Count

48Monday, March 22, 2010

Page 49: Web Typography with CSS3

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

Page 50: Web Typography with CSS3

CSS Multi-ColumnsCode - Column Width

50Monday, March 22, 2010

Page 51: Web Typography with CSS3

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

Page 52: Web Typography with CSS3

CSS Multi-Columns

column rule

Code - Column Rule (Webkit Only)

52Monday, March 22, 2010

Page 53: Web Typography with CSS3

CSS Multi-ColumnsBrowser Compatibility

• Firefox 1.5+

• Safari 3+

• Chrome 1+

• MobileWebkit

53Monday, March 22, 2010

Page 54: Web Typography with CSS3

CSS Multi-ColumnsBrowser Compatibility

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

54Monday, March 22, 2010

Page 55: Web Typography with CSS3

Example Usage

http://tweetcc.comCSS Multi-Columns

55Monday, March 22, 2010

Page 56: Web Typography with CSS3

Example Usage

http://desandro.comCSS Multi-Columns

56Monday, March 22, 2010

Page 57: Web Typography with CSS3

Example Usage

http://desandro.comCSS Multi-Columns

57Monday, March 22, 2010

Page 58: Web Typography with CSS3

THANK YOUWEB TYPOGRAPHY

CSS3&

with Sean Gaffney and Matthew Smith

for joining us for

58Monday, March 22, 2010