Good typography is invisible: understand the typography meaning and importance

The importance of typography

Useful, but underappreciated. Typography is an important functional element of design.

Character sets - letters, numbers, symbols, punctuation are not just information providers. Thanks to its diverse shapes and styles of characters, typography can define the character of a website or brand. Typography has a huge impact on readability, legibility and can influence customer behavior.

What is the difference between typeface, style and font?

• Typeface is a specific set of characters that have a common character. Helvetica is a font.
• Style - typeface variants. Helvetica Bold is a style, Helvetica Medium is another style.
• A font is a version of a specific typeface, in the appropriate size and style. It's a set of characters. So Helvetica bold with size 12 is a font. Helvetica light with size 16 is a different font.

Basic typeface differences

Serif 

• they are used for longer texts, usually in printed books.
• A serif typeface is a drawing variant of a typeface with strokes and terminated serifs (incorrectly referred to as heels)
• Serif characters are often used to highlight or emphasize text that is indented in sans serif fonts.

Sans serif

• Sans serif font is a drawing variant of a font without serifs.
• A sans-serif font is considered cleaner and more modern than a serif font. Due to its character and openness of characters, it is easier to read on the screens o digital devices

💡 Interesting fact: People over 35 read serif fonts faster on the contrary, people under 35 read faster Serif fonts

Display

• Display font is also called title font. The display font is decorative in nature and therefore not suitable for longer texts, it is primarily used for headings / subheadings.

Monospace

• All characters have the same width as well as inter-character spaces, so we often meet with monospace fonts in tables, codes, number entries, in the real world we meet with Monospace at airports

💡 Interesting fact: This script is difficult to read for dyslexics.

Script

• Script fonts or fonts imitating handwritten fonts are fonts suitable for headings or brands. Script fonts are not suitable for longer headings or texts.

Font family & font superfamily

The font family contains several styles (Bold, semi-bold, medium, etc.). This is, for example, Roboto.

The font superfamily contains several fonts that share individual characters - for example, x-height of a letter. These are Roboto, Roboto Slab and Roboto mono - all these fonts have the same middle letter height, with this common character they create a super font family.

‍

Advantages of using a superfamily:

Some projects require more visual consistency, where pairing different fonts is not the right solution. The designer can use different superfamilies to display the user interface (menus, descriptions) from the editorial content (headings, body text). This creates a consistent tone with a clear hierarchy across the product.

‍

Anatomy of Type

Baseline - the line on which the font characters sit.

x-height - it contains most of the lowercase letters of the alphabet

Descender - all below x-height.

Ascender - An upward vertical stroke that extends beyond the x-height.

Serif - colloquially referred to as the heel - a small decorative stroke at the end of the main strokes of the letter

Stem - middle part of the letter.

Shoulder - larger serifs in capital letters.

Terminal - small protrusions (a).

‍

Fun fact

Do you know why the characters are called Lowercase and UPPERCASE?

It depends on which drawer the font typewriter took the character from. The capital letters were placed at the top, the minuses were at the bottom.

Variable font

Variable fonts are an innovation in digital typography that allow you to flexibly handle character parameters, such as width, thickness, inclination, in a single font. It allows designers to adapt the font to the design instead of adapting the design to the font. This unlocks huge design potential and brings flexibility to brand visual identities.

‍

What are variable fonts?

Variable fonts allow you to seamlessly generate font family slices within a specified range. Using a variable font, we can change and adjust the width, height and slope of the characters even outside the predefined slices. You can create many variations with one font.

‍

Their main advantage is the contrast they can achieve in combination with other, more traditional fonts. They often design exclusively in capital letters (without lowercase letters of the alphabet), or sporadically only in lowercase letters.

‍

Advantages over normal fonts

The advantage of a variable font is that the designer who uses the font does not have to deal with kerning or line height. These attributes are written in the font. The only task of the designer is to define the parameters and font size.

‍

A short tip to conclude: The benefits of using REM instead of px

Each operating system has a default font size defined. Usually it's 16px. To improve user accessibility, many systems allow the user to change the font size. And here the problem arises if the sizes are defined in absolute values (px).

Px - Pixel

Absolute value is fixed and its size will appear exactly as defined. In other words, the font size in px does not adapt to the user settings, but overwrites them.

Example: The user sets the font size to 24px on the system because he has a problem reading smaller letters. It downloads an application where the typography is defined in px and the body text is 16px. The values in px do not fit the system, so the text will not be readable by the user.

‍

REM - Root EM‍

A relative unit that is tied to the "root" value from the browser and adapts to the system. Example: The user sets the font size to 24px on the system because he has trouble reading smaller letters. It downloads an application where the typography is defined in REM and the body text is 1REM. The values adapt to the system where 1REM = 24px and the user has no problem. At the same time, the hierarchy of the text is preserved.