Allow for your users to change the type settings within their own browsers. This means you should use scalable or elastic measures for your type (by % or by ems).

What's an em?

Traditionally, an em is a sliding measure of the letter "m", in whatever the type is set at. So, if you've set your bodytype at 12 pt, an em is 12 pt. As designers we can set an em to be whatever we want, but if you don't want to mess with your audience's browsers (we don't), then we leave the body type at 100%, which means an em will be whatever your audience member has set their default typeface to be. If they haven't changed their defaults, it will probably by 16px.

Clear as mud, right?

Essentially, though, you can set everything after your body type in ems, and all your type will scale the same, no matter what your users are doing with their browsers.

Other definitions

Body: the type for the main content areas of your page.

Serif: small stroke at the terminal of a main stroke. AKA, fiddly bits.

Sans serif: a typeface without serifs

Font: we use this pretty interchangeably with type now, but if you aim to be a true font nerd, then you'd know a font is a specific point size and weight of a typeface, for example, 12 pt Helvetica bold is a font. Helvetica is a typeface.

Leading: comes from the strips of lead that used to be placed between lines of type, and measures the distance from one baseline to the next. We don't have a leading setting in CSS, but we can achieve similar effects using the line-height setting. Some browsers add leading by default and others don't, and like paragraph tags and headers, it goes above and below each line of text.

A few general guidelines

Sans serif is easier to read

As we enter the embedded type era, I'm sure we'll start to see more easily-read serif fonts, but for now, the general rule is that san serif are a bit easier to read because of the resolution of the screen is not as good as that of paper. This is changing though. My Kindle is just as good resolution, and so serif typefaces are easy to read.

Pick one typeface for your body and then add one for display

A lot of beginning designers make the mistake of using too many typefaces with their designs. I try to use sans serif for my body and then add a serif or something fun for headers.

Left justify

Use ragged right or left-justified text. Fully justified text does not work with CSS 2 (the version of CSS we're learning), because that version does not allow for hyphenation, which is required to prevent justified text from having weird spacing issues. Right-justified and centered text is very difficult to read. and should only be used for design elements (right-justified) or for headers (centered).

Column width

Aim for the traditional sweet-spot of 66 characters. If each em is two characters, that means 33 ems for your column width. If, for example, you haven't changed the browser defaults with your style sheet, then that would be 528 px. (As a general rule, I aim for 500px-600px. That means working out the math if I'm doing a liquid layout.)

A single space after a period is best

I was taught to type by adding a two spaces after a period. This is a relic of 20th C. technology, and no longer required. In fact, I've heard it enrages some people to see an extra space.

Line height

Set your line heights proportionally. So if you want 15 px of space for your line height, and your text is 12 px, you're best to set your line-height at 1.25.

Put an extra line between paragraphs, rather than indent

You can indent the first line of text using the text-indent feature (you'll find it in the "block" category), but it's actually easier to enable the scanning behaviour if your paragraphs have space between them.

Only use the blockquote for quotations

Don't be tempted to use the blockquote for spacing. That is what margins and padding is for. The blockquote should be used for pullquotes or quotes. Add some margin around the quote so it stands out too.

Google Web Fonts

Up until recently, we've been stuck with using the resident typefaces that our users have on their computers. This has meant we've been stuck with a limited number of typefaces that we can depend on. You can supplement these with font stacks. (Check out this CSSfontstack.com for a great list.)

Now, with Google's open source web fonts, we have another option, which is to embed the font in our CSS or HTML. (Both are options)

Let's go to the Google site, and I'll show you how to do this.