Basic Typography Elements
The primary elements of typography are the typefaces you use. And there are several CSS font properties you can use to adjust typefaces:
- font family - defines the typeface specifically that you want to use. If you don't change anything else, CSS will use the regular font of any typeface you choose (ie. not bold or italic).
- font-size - defines the size of the font. You would also specify what measurement to use for your font size.
- font-weight - the boldness of the font.
- font-style - font italics.
- font-variant - normal or small-caps.
Typography Spacing
Once you've defined the specific typeface and font you want to use, you need to indicate the spacing around your letterforms and text. There are several more CSS properties you can use to affect the spacing of your typography:
- line-height - control the leading of each line of text.
- letter-spacing - control the space between each letter or the kerning.
- word-spacing - control the space between words. This, combined with letter-spacing is what CSS offers instead of a specific tracking property.
- width - apply this to the container element of your text to affect the measure or line length.
- text-align - apply this to the container element to define the alignment of your text.
Advanced Web Typography
Hyphenation
Web browsers don't have reliable ways to affect the hyphenation of text. There is a special character called the "soft hyphen" (­) that is supposed to tell browsers that the word can be hyphenated in that location if needed. However, not all browsers support this, and those that do don't support it well. Because of the fluid nature of Web pages, putting forced hyphens into words will result in some people seeing words written with a hyphen in the mid-dle of the text line. It's best to just forget about hyphens on Web pages for now.
Rag
On Web pages, rag is affected by the width of the text's container element. If you have a block of text with bad rag, you can widen or narrow the container element to make the rag more effective. This is why it is very important to view your text blocks with the actual text that will be in them, and not just placeholder text.
Widows and Orphans
Like rag, widows and orphans are best controlled by the width of the container element. If you have text that ends up with a widow or orphan, you can widen or narrow the container until it's gone. Another solution is to add or remove copy to get rid of the problem. In many cases, this is the easiest solution.
And as always, pay attention to the little details of the typography.
