This site is archived.
Skip to Content

Web Typography Fundamentals: From Em Dash to Hanging Punctuation

Your session in a few words: 
Web Typography Fundamentals: From Em Dash to Hanging Punctuation
Date: 
September 3, 2009 - 11:20 - 12:10
Room: 
La Galerie
Track: 
User experience and design
Session Type: 
Lecture
Level of expertise: 
Beginner
Language: 
English

Typography is at the very heart of the web. Unfortunately, web typography generally sucks. This presentation will help anyone – developer or designer – not suck at typography. From Em-dashes to hanging punctuation, we'll cover simple fundamentals of good typography for the web.

What will be covered in this presentation:

  • Typographic Structure
  • Hierarchy and language
  • Whitespace and typographic colour
  • Typesetting on the web
  • Tables, lists and forms
  • @font-face and font embedding

Three thumbs up!

I can't stress how important these principles are, especially with Drupal. Most of what we perceive as design on the web comes back to good typography.

I've seen some of Mark's writings on this subject, and I can't recommend this session enough.

Looking out for the session recording

Sorry to miss the session--I'll be looking out for a recording of the session

some of the slides

I found some of the slides (especially the line-height and font-size math) at the slides from another presentation of Mark

http://www.webtypography.net/sxsw2007/

Enjoy!

font stacks link?

At one point in the presentation, Mark talked about a good resource for CSS "font-family" stacks - unfortunately, I didn't write down the resource in my notes. Does anyone know what the URL is?

For example, the resource he mentioned had lots of lists like this:

font-family: "Trebuchet MS",Trebuchet,"Lucida Sans Unicode","Lucida Grande","Lucida Sans",Arial,sans-serif;

to help aspiring (or "wanna-be", if you're me) designers pick proper font stacks.

Thanks in advance,
-mike