Typography + FLOSS Graphics

Typography (to understand)

1. Serif, Sans, and others
2. Line terms
3. Measurements
4. Kerning
5. Leading
6. Wrapup

Examples (to work through)

1. Sizing text in ems
2. Choosing a measure
3. Choosing a scale
4. Calculating line height
5. Print stylesheets
6. Image Replacement

FLOSS graphics (to use)

1. Gimp
2. Inkscape
3. Dia
4. Scribus
5. Blender

Image replacement

Let's say we want to use some strange fonts for the web. We're tired of using only the standard fonts: Times New Roman, Arial, Verdana, Georgia, and, if we're lucky, Lucia Grande or Gill Sans. How can we do so? Well, we could use images for each of the places that we want to use a different font, like in a header. But of course that's not accessible, as the image is meaningless to a screen reader. What can we do?

Enter the world of image replacement. This is a world in and of itself, and thus I will only mention it and point you to one of the more comprehensive resources about the subject. Use at your own peril.

Luckily in a few years we'll be able to dispense with this nonsense and use the @font-face syntax in CSS 3. Basically, for every font that you want to use on a page that is non-standard, you provide a link to a place for it to be downloaded. This is already possible in some versions of Firefox and other browsers; it's definitely something to keep in mind.