Typography - Text Layout
Basic text layout consists of these elements:
- Headline: headline font, biggest, tells what the text is about.
- Postline/Preline: headline font, smaller, completes the headline.
- Subheading: headline font, smaller, divides content into sections.
- Lead: body font, bold, the first sentence or paragraph of the body text.
- Body: body font, the base text that everything else is compared against.
- Annotation: body font, smaller than body, use on e.g. captions.
Visual hierarchy is important. People naturally think bigger and brighter things are more important. Use this to create natural order between headings and body text. There is more about visual hierarchy in graphical design notes.
To emphasize heading, ways from the best to worst:
1. Add space before and after it.
2. Increase color contrast compared to body text.
3. Bold the heading.
4. Increase font size.
To dilute body, ways from the best to worst:
1. Decrease color contrast compared to body.
2. Reduce font size but not below 16px on web.
Headline should always have the biggest font size in a view. Avoid using images that have bigger letters than the heading.
Headings are usually too big.
Body text is usually too small.
Break big blocks of text. Break big paragraphs and separate multiple paragraphs with images, headlines, whitespace and lists. Gives eyes a rest, easier to skip and easier to search.
Prefer left aligned text in digital media. Justified text should always be hyphenated. Use centered text sparingly.
Left: easy to read looks and good without hyphenation.
Right: harder to read but used to create more formal structure.
Center: used to draw attention.
Justified: used in the bodies of newspapers and textbooks.
Remove all widows and orphans. Widow is a single lone word on a line of text. Orphan is a single lone line of text in a column. Removing these is done by changing text layout, text size or content.