Typography matters — and deserves your attention

Typography is the cornerstone of modern web and product design. It’s not just about choosing the right typeface — it’s about creating structure, mood, and clarity. When done well, typography alone can elevate your design, even without relying on visuals.

Typography in digital design must meet several key expectations:

• Clean — Typography should support readability and not distract the user. Avoid clutter.
• Stylistically Appropriate — Your font choices should match the project’s tone, whether it’s playful, serious, modern, or classic. For example, a fintech dashboard might use a sleek, geometric sans serif, while an editorial site could lean into a serif for a more traditional look.
• Accessible — It must answer to all contrast guidelines. Legibility is crucial.

Typography plays a vital role in shaping visual hierarchy. Use size and weight to prioritize elements — larger and bolder fonts draw the eye and should be used for headings or key pieces of information. For example, pairing a 32px heading with a 16px body copy instantly creates structure and emphasis.

Typography sets the emotional tone for your website. A serif often conveys tradition or elegance, while sans serif feels modern and clean.

Font pairs can add a feeling of dimension to the site. Use two complementary fonts — one for headlines, one for body text. Choose fonts with compatible proportions, like similar x-heights or character widths. A classic combination is serif for headings and sans serif for the body. That said, two different sans serif fonts can also be used together in the same manner.

Line height should ensure comfortable readability — around 130% to 160% of the font size for body text, but smaller for headings. Adjusting letter spacing can affect legibility and overall feeling. Generally, smaller letter spacings work better for larger font sizes.

Font weights help define structure, but limit yourself to 1⁠–⁠2 weights per project (e.g., Regular and Bold). Overusing weights can create noise and dilute emphasis. Be consistent with how and where you apply bold or medium weights across screens.

Good typography isn’t just beautiful — it must also be accessible, to make your site inclusive of all users. The two key factors here are font size and contrast.

For font size, using minimum of 16px for body text ensures legibility on most screens. For contrast, make sure to meet the WCAG guidelines (AA or AAA) to ensure there is enough of a difference between the text and background. You may also consider newer contrast models like APCA, which account for visual perception more accurately.

Consistency is key. It helps users feel grounded and makes your interface more intuitive. Use only 1 or 2 typefaces in a single project. A third should only be introduced if there is a strong reason to do so.

You should strive to maintain a balance between creativity and usability. Even experimental typography must remain legible. Avoid overused fonts (like Montserrat or Poppins) unless you have a clear reason. They’ve become ubiquitous and may make your design feel generic.

Typography is not a finishing touch — it’s the foundation of your design. Typography directly influences how users perceive your product’s tone, usability and credibility. Thoughtful, accessible, and consistent typography will make your website or app not only look better but feel better to use.