Typography

Q: How do you choose the right typography?

Several criteria come into play: readability on screen, availability of the font depending on the medium used, and the weight variants that exist.

Q: How many typefaces should you use in an interface?

In general, you limit it to two typefaces, or even a single one with several weights. This creates a visual structure while avoiding visual heterogeneity.

Q: What is a typographic scale?

The typographic scale describes the size used for the different hierarchy levels in your pages. You generally apply a fixed multiple between two successive levels. The reference is the body text size.

Q: How do you guarantee the readability of text in an interface?

There are several fundamental rules to help guarantee readability, whether it's line length, line spacing, or a text size of 16px for text. The contrast between the text colour and the background colour is also an important criterion, for which the RGAA recommends a ratio of 3:1.

Concept

Readability as a design choice

Typography is one of the most important elements in creating a visual identity. It covers the choice of font, the size scale, the weights, the spacing and the styles. Often underestimated, it is nonetheless essential: it lets people recognise your brand at a glance and has a significant impact on the overall readability of your product. So take good care to choose it well!

What is it for?

Establishing a clear information hierarchy across the different levels of headings, body text, paragraphs and interaction buttons.
Guaranteeing optimal content readability, and that across all display conditions.
Contributing to a brand's visual identity through a distinctive and unique font.

What's the need?

Defining a graphic consistency that will hold across every use of your product (web, mobile, print, etc.).
Improving the overall visibility of your product. A well-chosen typeface will make very dense, complicated texts more readable and airy.
Optimising your site's performance thanks to a typography designed for the web.

Defining the context and the goals

Typography has a direct influence on how a brand is felt. It's important to properly identify the sector in order to steer your choice towards the right style (Serif, Sans-serif, Display, etc.). While it's obvious that you need to keep a clear, readable font, it's just as important to have a font that is recognisable and can be associated with your brand.

Checking readability and accessibility

On the web, this is a mandatory and very important step. A beautiful font is of no use if it doesn't have good readability. Remember to test your font at different sizes, on different backgrounds (light or dark) and make sure it meets contrast standards.

Defining a typographic hierarchy

Once your font is chosen, it's important to define a consistent hierarchy between headings, subheadings, paragraphs and captions. Ideally, you should limit the number of font families to 2. We will mainly play on sizes, weights and styles to structure the information.

How do you choose the right typography?

How many typefaces should you use in an interface?

What is a typographic scale?

How do you guarantee the readability of text in an interface?

Bordeaux.fr: a portal that informs Bordeaux residents as much as it serves them, with no compromise on accessibility and eco-design

View the case study

La Coupe d'Or pivots towards youth, and so does its logo

View the case study

Related methods

Colour palette

A digital product's colour palette encodes statuses, hierarchy and accessibility. A well-defined palette is a coherent system, not just a collection of shades.

Iconography

Iconography defines a product's icons, their style and their consistency. Well chosen, it speeds up understanding; misused, it creates ambiguity.

Layout grid

The layout grid structures the UI with columns, gutters and margins. It ensures visual consistency and eases responsive design between designers and developers.

UX writing

UX writing composes an interface's texts: buttons, errors, empty states. Done well, it guides without you noticing. Done badly, it's the first source of friction.

Digital accessibility

Digital accessibility makes products usable by everyone. In the digital field, the RGAA is the reference on the matter.

Curious to learn more about us?

Everyone talks about user experience, service design, ergonomics...
It's not always clear, and you'd like to find out, or sharpen what you already know.

Let's talk