Typography is another area that can trip up even experienced designers. But like color theory, there are some great tools out there that can help. Typographic hierarchy is one of the first things a designer-developer should learn. The relationship between different type elements in a design is vital to making that design more usable.
At the very least, a design should have three levels of typographic hierarchy: titles, subtitles, and body fonts. The title should be the most visually prominent, the subtitles come next, and then the body font, which should be highly readable.
Many new designers focus too much on font size in creating their hierarchy, and not enough on font style. Sometimes, rather than making a title significantly larger than a subtitle, for example, a title could be made bold or capitalized, while the subtitle is left in title case and normal weight. Color can also be used to differentiate between subtitles and titles, and between those elements and body text.
Combining different fonts can also confuse many designers, and yet it’s a common way to create a visual hierarchy. They include choosing complementary fonts (opposites often attract, but to an extent, how well fonts combine has to be determined based on gut feeling that is honed over time), choosing appropriate fonts (don’t use Comic Sans on a legal document, for example, or a display font for body type that won’t be legible at smaller sizes), and creating contrast between typefaces (don’t use two that are very similar).
Another simple way to combine fonts is to pick fonts from large font families. There are even families out there that include display, serif, and sans serif versions that work well together (like Mrs Eaves and Mr Eaves, Fedra, or Museo and Museo Sans). This can be the easiest way to start really experimenting with combining fonts since they’re designed to look good together.
When working with larger typographic hierarchies (such as adding in H1, H2, H3, H4, etc.), it’s important to follow some kind of reason in the typographic scale. The Fibonacci sequence is one possible scale to start with, although there are other established typographic scales.
One common scale that’s used in both typography (and generally in design layouts) consists of 4, 8, 16, 24, 36, 48, 72, 108, etc. These figures can be combined in various ways to create a design with pleasing visual proportions (for example, a 24 pixel font combined with a 36 pixel line height).