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.
💡 Interesting fact: People over 35 read serif fonts faster on the contrary, people under 35 read faster Serif fonts
💡 Interesting fact: This script is difficult to read for dyslexics.
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.
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.
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).
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 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.
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.
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.
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).
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.
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.