Typography

Q: How do you choose the right typography?

Several criteria come into play. Readability at small sizes on screen, first, since some fonts are designed for that use. Availability next, depending on the media targeted and the distribution method chosen. Finally, the variants available, weights and italics, without which building a hierarchy becomes difficult. A decorative font can suit a heading, never body text.

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

As few as possible. A single family in several weights is often enough to establish a complete hierarchy. Two at most, one for headings and one for body text. Beyond that, consistency is lost and each extra font makes pages heavier to load.

Q: What is a typographic scale?

It is the set of text sizes in an interface, organised along a regular progression rather than chosen case by case. You start from the body text size and apply a constant ratio between two successive levels, 1.25 for example. The hierarchy levels then stand out clearly from one another, without the gaps looking arbitrary.

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

A few basic rules are enough. A line length of between 60 and 80 characters for body text, beyond which the eye struggles to find the next line. Line spacing of at least one and a half times the font size. A minimum size of 16 pixels for running text. And a contrast of at least 4.5:1 between the text and its background, the threshold adopted by the RGAA as well as by the WCAG at level AA.

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 typography 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.

Why work on typography?

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?

Université de Bordeaux: a serif for culture, a sans-serif for the screen

View the case study

Modernising a carpenter's logo without turning its back on its 100 years of craft

View the case study

Related methods

Colour palette

Brand palette or interface palette, the two are not to be confused. How to build a coherent, legible and accessible colour system.

Iconography

An interface's iconography is the style and consistency of its icons. Well chosen, they speed up reading; badly chosen, they create doubt.

Layout grid

The layout grid structures the interface into columns, gutters and margins. It ensures visual consistency and eases responsive design.

UX writing

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

Digital accessibility

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

Visual style guide

The visual style guide brings together a brand's visual rules: colours, typefaces and logo, along with the permitted or prohibited uses for each.

Information architecture

Information architecture organises content and navigation so that users find what they're looking for. It guides interface design

WCAG

The WCAG are the W3C's recommendations for web accessibility. Organised into 4 POUR principles and 3 levels (A, AA, AAA), they serve as the basis for the French RGAA.

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