tidius - Typography System

Creating a typography system

A typography system in UI and UX design is a structured framework that defines the use of fonts, sizes, weights, roles and styles to ensure consistency and readability across a user interface.

The Task

The task was to design a typography system for an entertainment platform. I chose “tidius” a Web Based Quality Management (QM) App due to their need for a sophisticated typography system, even though it’s not an entertainment landing page (be easy on me for this one). So far i created the whole CI and brand guidelines. I tried to keep it simple but also interesting at the same time, we all know simplicity is key!

The Roles

For me the first step is choosing the roles needed for the use case, in this case we want to have a lot of different options, because “tidius” is going to have a Website, an App and Print media. We have to take all of this into account while designing the system. Ideally we want the typography system to cover every type of media and give the user the same feeling everywhere. I chose four roles – Display, Heading, Label, and Paragraph as this is common practice seen by large Design Systems like “base” from Uber - If you don’t know it, definitely check it out! https://base.uber.com/

Typeface Pairing

We are all set, we have chosen our roles, now the fun part begins. Choosing the right font pairs can be a difficult task. But since we described our roles and know what kind of users we are expecting it’s quite easy! We don’t want to distract the user, so we need a good legibility and a clean and minimalist design. That's why I chose the sans serif font “Satoshi”, it’s a modern, clean, and highly legible typeface which suites the client and the target audience. It’s the perfect main font to use here. For brandable moments I chose a more fun and eccentric font “Bricolage Grotesque”, it suits the Display Role perfectly for this project.

Hierarchy

It’s important that the user can immediately tell the hierarchy of an element and what text is more important than the other. We are aiming for a clear typographic hierarchy. A clean text architecture enhances the readability and scannability of an interface, which can enable users to find important content more quickly.

Do’s & Dont’s

Try to combine only one size of each role, this gives enough visual clearence and hierarchy for the user, it also makes the text more scannable and easier to read.

Avoid multiple roles in one screen, as this clutters the view and the user is going to be distracted.

UI Example