Typography and Information Hierarchy

How do you choose fonts?

  1. Understand your brand identity.
  2. Choose a versatile font.
  3. Consider the typographic hierarchy.

Some font combos:

  • Serif header + Sans-serif body
  • Serif header + Serif body*
  • Sans-serif header + Sans-serif body
  • Sans-serif header + Serif body*

*When using serif fonts for body, make sure they are non-decorative. Some good examples are:

  • Times New Roman
  • Georgia
  • Baskerville
  • Bodoni

How many fonts?

2 fonts is the norm

1 for header, 1 for body

Sizing:

  • Set a consistent size
  • There should be 2-4 variations in size: Header, Header 2*, Call to Action*, Body
  • *optional
  • Use px (or any other responsive sizings) instead of pt, cm, mm

Information Hierarchy

Goal of IH is to direct the user’s attention.

  1. Color and contrast
  2. Consider color saturation. (this will really help people who have difficulty seeing color!)
  3. Don’t use too many colors.
  4. Don’t use too many contrast variations.
  5. Do not rely only on color to communicate visual hierarchy.
  6. Scale
  7. Use no more than 3 sizes
  8. Make the most important element biggest
  9. Grouping: Proximity and Common Regions
  10. Give room to the groups
  11. Consider using a container
  12. The Squint Test
  13. Can you see the groupings if there is a slight blur overlay to the content?