UX Planet

UX Planet is a one-stop resource for everything related to user experience.

Follow publication

Member-only story

Three things every designer needs to know about Typography

--

Display, Heading and Body typography styles using visual cues to infer hierarchy
Example typographic hierarchy using font size, style, weight and color

When you put so much thought into your content, the last thing you want to do is make it difficult for your readers to enjoy it.

Over the past year, I’ve spent a lot of time with my head buried in WCAG Accessibility guidelines in an effort to develop a more inclusive-first mindset.

Whilst sometimes a little vague, the guidelines do provide a lot of sound advice on typography. In this article, I want to share three quick tips that will immediately improve the legibility of your typography settings.

Whilst I’m going to refer to web technologies, the principles here can be applied to all mediums.

1. Visual hierarchy

It goes without saying that good formatting allows us to understand the shape and structure of a document. It enables us to scan for important information and generally helps to make content more digestible.

Traditionally, font size is used to create hierarchy, where larger sizes indicate headings of various levels and smaller sizes for body copy. Font size is undoubtedly a really great way to infer hierarchy, however, in reality, the number of practical and discernible font sizes is small.

On the web, we observe six semantic levels of heading (H1 — H6). Without even…

--

--

Published in UX Planet

UX Planet is a one-stop resource for everything related to user experience.

Responses (1)