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

Typography and FLOSS Graphics software

We want to cover today one key advanced CSS topic relating to web typography. Even though we primarily use the web to read, we rarely take much care with how the text looks on the screen. This is unfortunate given the amount of time our eyes spend looking at our glowing displays. While the differences might seem minimal, they really do have an impact on how people will approach your site.

Typographic terms and usage

To understand some of these techniques, however, we have to go through some specialized terminology from typography. Then we can consider some examples, and briefly mention possible ways of getting around the paucity of fonts available for the web.

FLOSS graphics

We will also cover some free/libre open source software (FLOSS) tools for making and manipulating graphics that provide alternatives to expensive software like those you might have heard of.