design for the web

typography for the web

23/02/2012 Comments Off

Time to get serious with your typesetting skills ;) Let’s first have a look back at some basics and then the @ font-face rule. Please take the time to read the post carefully and follow up on any links. It’s important reading ;)

➜ read ‘typography for the web’

For the ❤ of type, a post from eyelearn, copied here for easy access. The following links are meant to teach you about setting beautiful type as well as inspire you :)

challenge yourself!

• KERNTYPE – a kerning game
• Shape Type – a letter shaping game
• The rather difficult font game

references

• The Elements of Typographic Style Applied to the Web
• Font Matrix
• CSS font stack
• shape catcher
• HTML character set

font tools

• WhatFont (bookmarklet for Safari and Chrome)
• FONTDROPPER (bookmarklet: drag & drop web font tester)
• What the font? (online tool: typeface recognition)

web fonts

• Google web fonts – open source fonts
• font deck – licensed web font service, per domain, via CSS
  (independent, founded by Jon Tan and Richard Rutter, sponsored by Clearleft and OmniTI)
• typekit – licensed via account type (amount of domains/fonts), via JS
  (independent started by several designers (Jeffrey Veen, Jason Santa Maria, Tim Brown and more), acquired by Adobe Systems Incorporated in 2011)

reading

• Thinking with type
• Type study: Sizing the legible letter
  Ethan Marcotte for Typekit blog
• What makes letters legible?
  Ralf Herrmann
• Increase Your Font Stacks With Font Matrix
  Richard Rutter for 24ways
• How to use CSS @font-face
  Tim Brown
• Bulletproof @font-face syntax
  Paul Irish
• The @Font-Face Rule And Useful Web Font Tricks
  Ralf Hermann
• Fonts available for @font-face embedding
   Ralf Hermann
• @font-face in IE: Making Web Fonts Work
  Jon Tan
• Typeface != Font
  Jon Tan
• typography for the web
  typography basics on graphiceyedea

Erik Spiekermann

Typographer, graphic designer and businessman Erik Spiekermann has created timeless, influential and, yes, Meta-physical work over the past three decades.

Next to founding MetaDesign and FontShop, the latter being the first ever digital distributor of fonts, and designing more instant classic typefaces than any other, he has been recognized as an outstanding expert internationally as a lecturer and professor.

Listen to the design genius talk about new visual languages, design processes, the analogies of music and typography, and why we need better client culture in our latest Gestalten.tv video and you will easily realize why. Before heading to new visionary pastures, the bike enthusiast will make a short stop to receive the German Design Lifetime Achievement Award 2011 in February.

Watch our complete line up of video interviews on www.gestalten.tv

tags: typography