In the beginning, web designers only had a handful of typefaces at their disposal to use in their designs. Then Flash and Javascript allowed unlimited fonts but lacked accessibility features. In the past year, it seems we finally have a winning solution: the @font-face method which has support from all major browsers and does so using only HTML and CSS.
Meanwhile, a second conversation is happening amongst those who actually own the fonts – the foundries. Would these emerging technologies ensure that their typefaces could not be easily copied from the web? Unfortunately @font-face is still not widely accepted by most foundries. Some allow you to use a hosted service like TypeKit, or you can venture into the burgeoning movement of open source and commercial-free fonts and enjoy free rein over your web typography.
Apresentação Clamo Cristo -letra música Matheus Rizzo
The state of web typography
1. The state of web
typography
Designing in the @font-face of danger
February 5, 2011
Aaron Stanush
Co-founder and designer
2. A little bit of history
Mmm... @font-face since ’97
3. Web font formats
‣ Embedded OpenType (EOT) ‣ SVG
‣ TrueType + DRM ‣ Not a font format
‣ Created by Microsoft ‣ Used for iOS
‣ TrueType (TTF) ‣ Web Open Font Format
(WOFF)
‣ Standard desktop format
‣ W3C standard
‣ OpenType (OTF)
‣ Small, contains
‣ TrueType 2.0 ownership data
4. It only took a decade
‣ 1997: CSS2 introduces @font-face
‣ IE4 supports @font-face but only EOT
‣ 2008: Safari 3.1 supports @font-face
‣ 2009: Firefox 3.5 supports @font-face
‣ 2010: Chrome 4 supports @font-face
‣ Firefox 3.6, Chrome 6, IE9 support WOFF
‣ W3C publishes working draft for WOFF
5. Before
‣ sIFR
‣ Flash
‣ Liked by foundries
‣ Cufón
‣ Javascript/JSON
‣ Lightweight, not widely trusted for licensing
10. Commerical, licensed
‣ Foundries
‣ Hoefler Frere Jones, FontFont, House Industries,
EmType, etc.
‣ Font stores
‣ FontShop.com
‣ MyFonts.com
11. Web font licensing
It’s complicated. Every foundry has their own rules.
webfonts.info/wiki/index.php?title=Web_fonts_licensing_overview
12. Free and open source
‣ Font Squirrel
‣ fontsquirrel.com
‣ Google Web Fonts
‣ code.google.com/webfonts
‣ League of Movable Type
‣ theleagueofmovabletype.com
13. SIL Open font license
‣ http://scripts.sil.org/OFL
“
It means that you're allowed to use these fonts
personally or commercially, as long as you
credit the original creator, and if you made
tweaks and changes to the typefaces, any new
typefaces resulting from it should be licensed
under the same terms. That way all our fonts
and any new fonts resulting from them will
always be open.
theleagueofmoveabletype.com/manifesto
15. Web font formats
‣ Embedded OpenType (EOT) ‣ SVG
‣ TrueType + DRM ‣ Not a font format
‣ Created by Microsoft ‣ Used for iOS
‣ TrueType (TTF) ‣ Web Open Font Format
(WOFF)
‣ Standard desktop format
‣ W3C standard
‣ OpenType (OTF)
‣ Small, contains
‣ TrueType 2.0 ownership data
24. Font hosting
‣ Pros
‣ Large selection of high-quality fonts
‣ Very little coding
‣ No worrying about licensing
‣ No expensive font purchases
‣ Cons
‣ Not free – pay by pageviews or per font
28. All content in this presentation, except where noted otherwise, is Creative Commons Attribution-
ShareAlike 3.0 licensed and copyright 2009 Four Kitchen Studios, LLC.