“Practical Typography” by Matthew Butterick

This online book on typography is fantastic. At the very least, you should read the Typography in Ten Minutes chapter.

http://practicaltypography.com/index.html

General Font Information

Font Sizing

You can specify font size with absolute units such as inches (in), points (pt), and centimeters (cm). Alternatively, you can use relative measurements such as larger, smaller, percentages (%), ems (em), root em (rem), and pixels (px). Note: in CSS, pixels are relative because their actul size can vary by display resolution when the resolution is very different from the typical screen, e.g. 300 dpi when printing.

body {font-size: 76% } /* result in 12 px text when base size is 16 */
p { font-size: 1em; }
h1 { font-size: 1.5em; }

rem is a relative unit, but it’s always relative to a fixed base value, which is the font size of the root element of the document (in HTML, that's always the html element).

Specifying a Typeface

To choose a font, use CSS the property font-family. Example:

<style>
	p {
		font-family:"Courier New", Courier, monospace;
	}
</style>

Your browser will attempt to use the first typeface listed in the font-family property, if that font is not installed, then it will try the next typeface, and so on.

If you choose a typeface that is not installed on the user's computer, then the browser will pick one. For example, this sentence was created using the font “iAmNotA_ValidFontName”.

To embed a typeface in the web page, use the @font-face rule. This is typically done when you want to use a special display typeface for design reasons, or to use a customer’s corporate typography standard.

Readability Considerations

How quickly can you read a paragraph of text and understand it? To create highly readable text, you should:

• Start with using legible characters
• Don’t concern yourself too much with the serif vs. sans serif debate; first get these items correct:
  • Font size (via the CSS property font-size)
  • Leading (line-height)
  • Word spacing (word-spacing)
  • Tracking (letter-spacing)
• If you want to go all out, start looking at using:
  • Typographer’s quotes
  • Hanging punctuation
  • Ligatures
  • En and Em dashes correctly
  • Kerning

Ole Lund’s 1999 Ph.D. dissertation posited a counterclaim that sans serif fonts are no less readable than serif typefaces. I learned of this through a blog post, but this blog didn't touch on other factors that can make a huge difference; namely line length, contrast, leading, tracking, kerning, justification, size, and weight.

For example, you can screw up the readability if the leading is incorrectly set for the specific typeface you choose. For me, the argument is not sans serif v. serif, but rather choose a font with high legibility and then ensure all the other factors are correct. You would not want to read this paragraph much longer, right? :-)

Read “Web Designers Need To Remember Typography Influences Usability” for some more basic information about choosing and setting web type.

Legibility

Are the individual characters easily made out? In other words, how difficult is it to determine what each letter is? Highly legible letters are:

• Big enough to see (font size on the web is often debated; for full size monitors about an arms length away, I like to use 16px.)
• Have good contrast from the background
• And are rendered in a clear font

Z: This “Z” is very legible.

z: This "Z" is very illegible.

Display Text

Large text such as headers and titles (pretty much anything that is not a paragraph of text) is called “display text”. It is fun to play with because you are not limited to the readability rules listed above and you may not even have to follow the legibility rules either.

Example of various techniques being used to create engaging display text.

CSS Shorthand font Property

Font information can be specified using a shorthand method, but I find it confusing and not worth using. If you must use the shorthand, use this guide.