How do you choose fonts?
- Understand your brand identity.
- Choose a versatile font.
- 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.
- Color and contrast
- Consider color saturation. (this will really help people who have difficulty seeing color!)
- Don’t use too many colors.
- Don’t use too many contrast variations.
- Do not rely only on color to communicate visual hierarchy.
- Scale
- Use no more than 3 sizes
- Make the most important element biggest
- Grouping: Proximity and Common Regions
- Give room to the groups
- Consider using a container
- The Squint Test
- Can you see the groupings if there is a slight blur overlay to the content?
