Web Typography with CSS3

download Web Typography with CSS3

If you can't read please download the document

  • date post

  • Category


  • view

  • download


Embed Size (px)


A presentation for Carsonified by Sean Gaffney and Matthew Smith.

Transcript of Web Typography with CSS3

  • 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 clients 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 Cufn) Monday, March 22, 2010 6
  • @font-face Cons Easy to Abuse. Huge font libraries dont 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 its commercial then youre breaking your EULA. Monday, March 22, 2010 12
  • @font-face Whats 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 Whats 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 Whats 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 Interne