Web Typography, A New Era

Wednesday, April 14, 2010


  • Meeting room change next month to Computer Center 337

Presentation: Web Typography
Presenter: Matthew Munsey, College of Fine Arts

  • There have been a lot of changes lately with the way we do web typography.
  • Traditionally web designers have been very limited in the font choices we could use.
  • sIFR (scalable Inman Flash Replacement) was an advanced method for dealing with this problem using Flash and JavaScript.
    • Advantages: All fonts available, graceful degradation
    • Disadvantages: Can't select text, does not scale well, increased load time
  • Now we have @font-face!
    • It's just CSS2, and it's been supported by IE since version 5! (Wow!)
    • Advantages: Simple, graceful degradation, any font (almost), anyone can do it
    • Disadvantages: FOUT (flash of unstyled type), font licensing, anyone can do it
      • FOUT: Firefox for instance will load text with the second font choice, then will refresh with the new font. (More on FOUT.)
  • Demo:
    	@font-face {
    	font-family: Friz Quadrata;
    	src: url('FrizQuadrataStd.otf');
    	body {
    	font-family: Friz Quadrata, Arial;
  • Q: So someone can view source and steal your font?
  • A: Yes, and we'll talk about that soon. Some font designers are releasing fonts with open licensing, e.g., League of Movable Type.
  • Some foundries are creating web licenses for their fonts. Some give away free fonts, e.g., the Font Bureau.
  • Opera has some @font-face issues. The latest version (10.5?) may have fixed most issues.
  • Fontsquirrel.com can help you generate @font-face CSS.
    • You can upload your font and create several different formats.
    • You can select options to remove features that increase the font size.
    • Q: What will happen to your font on the iPhone if you don't generate an SVG?
    • A: It will use a backup font.
    • Fontsquirrel does not solve the licensing problem.
  • Typekit.com has come up with a way to protect fonts.
    • They've negotiated with the font foundries.
    • You can pay a monthly fee to access their font library.
    • The price is relatively cheap.
    • Q: Do you have to keep paying as long as a site using the font is up?
    • A: Yes, and this is a risk. And it's difficult in a freelance situation.
    • Friz Quadrata (the UA's official font) is not included in the library.
    • Q: Are there other companies like typekit?
    • A: Not that I know of.
  • Q: Do you see institutional web font licenses being a possibility in general?
  • A: Yes. Everything's headed toward the web, so it'll happen.
  • Q: Does typekit in particular offer institutional licensing?
  • A: Unknown.
  • This type revolution will require people to have more training in typography.
  • Q: Do the typekit tiers have bandwidth limitations?
  • A: Yes, but they're very big.
  • Q: What is "subsetting"? (option on fontsquirrel)
  • A: It allows you to reduce the size of your font file by removing unneeded characters.
  • Q: Where do you recommend going for free fonts?
  • A: League of Movable Type, exljbris font foundry (though this contains a number of novelty fonts)
  • Q: Can users block custom fonts from loading in their browsers?
  • A: Yes, but it'd be difficult.