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

"Choose a comfortable measure"

One of the most annoying things on the web is a page in which the paragraphs extend from one side of the browser to the other. Basically this means that the line length is too long; our eyes have a hard time following a line of text that is longer than around 75 characters per line. Thus, we need to choose the size of our containers (usually divs) in order to put a constraint on line length.

Since a character takes up around 0.5em in width, how wide should we make our div with id "content" if we want the line length to be around 60 characters? 75 characters? How might we do this in CSS?

div#content {
    width: 30em;
    /* width: 37.5em; */
}
    

Here we can consider a lot of different options such as the difference between liquid versus elastic layouts. I'll leave you to read about these issues on your own; suffice it to say, nevertheless, that controlling your measure is very important for readibility.