Typography Tips for your Design + Examples

Typography Tips for your Design + Examples

July 31, 2020

Working on your next design but struggling with the typography? In this article practical tips to take your typography skills to the next level.

The typography is an important base for your website. It ensures that your users understand your message. So whether you are selling products, sharing information or wanting to get in touch with new customers, it is key that your text is legible.

Good typography helps keeping your reader's attention. The user is always (unconsciously) looking for reasons to stop reading. The reader's attention is precious, and every reason is a reason to stop. With good typography you persuade the reader to keep on reading.

In addition, typography also has an aesthetic value. Good typography looks nice and is pleasant to look at. Each font has a certain feeling. For this reason, the typography plays a super important role in your branding and branding.

So are you going to start designing your own website? Make sure that the typography gets the leading role and the attention it deserves.

Types of fonts

In order to use typography effectively, it is useful to know what kind of fonts there are. Each kind has its own characteristics.

Serif fonts

Serif lettertype

Serifs are the small lines at the ends of letters. These 'legs' are are called serifs and text without legs sans serif. This serif makes the text easier to read, because there is a greater difference between the shapes of the different letters. Especially texts that are longer, such as in books and magazines, use serif fonts.

Sans serif fonts

Sans serif lettertype

Sans serif fonts do not have the legs that serif fonts do. This makes sans serif fonts look calmer. The sans serif fonts are also more often of the same width, resulting in a more modern look. On the internet, where texts are often shorter, a sans serif font is more often used, because it's easier to read from screens.

Monospace fonts

Monospace lettertype

A monospace font consists of letters and characters that are all the same width. Due to the equal width of the characters, these fonts are often used in coding or in tables where data must be compared. This has given this type a tech look. Texts set in monospace fonts are often wider than other fonts, but have the advantage of being more legible.

Script fonts

Script lettertype

Script fonts are fonts that are composed of handwritten letters. Because they seem handwritten, they have a personal and traditional look. This makes them often less readable, especially in smaller sizes.

Typography tips for your design

1. Use a maximum of 2 fonts

Typografie tip: niet teveel fonts

You don't have to use just one font in a design. The most beautiful designs use several. Use a maximum of 2 fonts to keep everything organized. Choose a simple, legible font for the paragraphs and choose a font that is clearly different for your headings.

Need more contrast? Then choose different sizes, widths or colors to apply different layouts.

2. Combine sans-serif fonts with serif fonts

Typografie tip: combineer serif met schreefloos

The sans serif and serif font are the easiest to combine, as they are often easy to read. There is often not enough difference between two sans-serif fonts, which means that there is not enough contrast.

Combining different fonts often creates the contrast you are looking for. So play safe and combine a sans serif font with a serif font. We saw this trend earlier in the Design Trends of 2020.

3. Use plenty of line spacing

Typografie tip: regelafstand

Leading, also called line spacing, is the distance between two lines. Using a greater distance makes the text easier to read. A larger line spacing is essential, especially for texts that are used in a smaller size.

4. Double your font size

Typografie tip: tekstgrootte

Do you find it difficult to determine the font size? Then remember this rule of thumb and always double the size of your text. Making headings twice the size creates a clear contrast between the headings and the running text.

More typography inspiration?

With these tips you can get on cracking on your next project. Need some more inspiration? Check out our typography websites.