Web Typography with CSS3


Published on

A presentation for Carsonified by Sean Gaffney and Matthew Smith.

Published in: Design
  • awesome, thanks guys
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks for the presentation guys! Very insightful.
    Are you sure you want to  Yes  No
    Your message goes here
  • Just wanted to answer some of the questions we didn’t have time to answer from our presentation. :)


    Q: Are there any notable effects on performance when implementing @fontface for larger portions of text? (regardless of design issues of course)

    A: Once the file is loaded into the browser’s cache, it performs just as well as if the font were local to the visitor’s machine. Neither sIFR, FIR, Cufon, nor any other javascript technique can claim anything near that performance-wise.

    Q: How does one achieve the best typography without hyphenation and justification?

    A: Justification of text is available via the CSS ’text-align’ property, which is from the CSS1 spec and supported by all major browsers. Just set it to ’justify’ and you’re good to go. Granted, it’s not the sophisicated justification we get from something like InDesign (where letterspacing is also affected), but it works. Hyphenation is a different story. It’s in the CSS3 Text module spec, but it’s not been implemented by any browser manufacturers that I’m aware. Check out this link: http://www.w3.org/TR/css3-text/#hyphenate. There is, however, what’s called the ’soft hyphen’. You can include this HTML entity in your word ’shy;’ (preceded with an ampersand) and the word will break with a hyphen where you’ve included that entity IF the containing element’s width gets in the way. No, it’s not separated from markup, which makes it a pain to use, but it is the tool we currently have. :)

    Q: Do the rendering issues on Windows also affect EOT files?

    A: Yep. EOT is just the format of the font file, which is specific to IE. You can deliver a WOFF to Firefox on Windows and still have the same rendering problems, which are a result of a) the font’s hinting and b) the rendering engine used to display the type by Windows. Check out this article for more information: http://www.thomasphinney.com/2009/12/browser-choice-vs-font-rendering/

    Q: If you have three font file formats declared like the last screen (where they actually had three font file types for the same font to make sure all browsers are covered), will your browser and load time be effected as it tries to load all the supported formats?

    A: Nope, as long as you’ve provided the correct syntax, the browser will go down the list until it finds a format that it recognizes, then download it and ignore the rest.
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Typography with CSS3

  1. 1. WEB TYPOGRAPHY & CSS3 with Sean Gaffney and Matthew Smith Monday, March 22, 2010 1
  2. 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. 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. 4. Web Typography & CSS3 @font-face Text-Shadow MultiColumn Text Monday, March 22, 2010 4
  5. 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. 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. 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. 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. 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. 10. @font-face Learn Typography Monday, March 22, 2010 10
  11. 11. @font-face Learn Typography http://webtypography.net/ Monday, March 22, 2010 11
  12. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 22. @font-face Testing • Internet Explorer without ClearType Monday, March 22, 2010 22
  23. 23. @font-face http://www.timoni.org Example Usage Monday, March 22, 2010 23
  24. 24. @font-face http://sxsw.beercamp.com Example Usage Monday, March 22, 2010 24
  25. 25. @font-face http://elliotjaystocks.com Example Usage Monday, March 22, 2010 25
  26. 26. @font-face http://forabeautifulweb.com Example Usage Monday, March 22, 2010 26
  27. 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. 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. 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. 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. 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. 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. 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. 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. 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. 36. CSS Text-Shadow Code - Multiple Shadows 60px 32px 14px Monday, March 22, 2010 36
  37. 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. 38. CSS Text-Shadow http://sxsw.beercamp.com Example Usage Monday, March 22, 2010 38
  39. 39. CSS Text-Shadow http://timvandamme.com Example Usage Monday, March 22, 2010 39
  40. 40. CSS Text-Shadow http://analog.coop Example Usage Monday, March 22, 2010 40
  41. 41. CSS Text-Shadow http://blog.squarespace.com Example Usage Monday, March 22, 2010 41
  42. 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. 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. 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. 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. 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. 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. 48. CSS Multi-Columns Code - Column Count Monday, March 22, 2010 48
  49. 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. 50. CSS Multi-Columns Code - Column Width Monday, March 22, 2010 50
  51. 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. 52. CSS Multi-Columns Code - Column Rule (Webkit Only) column rule Monday, March 22, 2010 52
  53. 53. CSS Multi-Columns Browser Compatibility • Firefox 1.5+ • Safari 3+ • Chrome 1+ • MobileWebkit Monday, March 22, 2010 53
  54. 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. 55. CSS Multi-Columns http://tweetcc.com Example Usage Monday, March 22, 2010 55
  56. 56. CSS Multi-Columns http://desandro.com Example Usage Monday, March 22, 2010 56
  57. 57. CSS Multi-Columns http://desandro.com Example Usage Monday, March 22, 2010 57
  58. 58. THANK YOU for joining us for WEB TYPOGRAPHY & CSS3 with Sean Gaffney and Matthew Smith Monday, March 22, 2010 58