What is typography and why is it important?
Typography is more than just how the written words look on your website or in your product. A lot of features related to typography change the effect and thus have a direct influence on how a product or website is perceived.
So, properties like the font style, but also the size or line height influence your digital product in very many places. When you optimize the typography in the right places, it could impact the UI and UX positively.
Here are a few tips you should use when setting your typography:
Font Family
The font family is the most prominent characteristic of your text, and arguably the most important property that defines typography.
It influences readability, but also other properties such as line-height and letter spacing. The more variants a font has, the more flexible you can use it. That said, you should limit yourself to a few so that your typeface doesn’t appear too wild.
👉 Use a maximum of three font families. Best is one or two over your whole product or website.
You shouldn’t use more than three fonts in your entire product. Most of the time, however, one or two fonts are quite sufficient.
For example, you can make your display text an eye-catching font, while keeping all other text in a simple sans-serif or serif font that’s easy to read. You can then use formatting and color to set these elements apart.
Hierarchy & Font Size
To make your copy easier to understand and to emphasize different importance, sections or relationships you can work with different hierarchy levels.
Hierarchy levels can be:
- Display
- Headings
- Overline
- Body
- Button Text
- Links
- Quotes
👉 Define hierarchy levels to give individual elements the corresponding importance.
In addition to formatting, the adjusted text size also matters.
Display is usually the largest font, but not always bold.
Headings are often bold, sometimes in a different color. Define headings from 1-6 in descending size.
Overline is usually the smallest text that describes a headline, for example.
Line Height & Letter Spacing
The line height is the height of the line in which a text is placed and thus also defines the distance between the individual lines.
The line height is always greater than the actual text size, otherwise the lines would overlap. Unless you want the letters to overlap for design reasons. 😉
It is best to define your line height 120% – 180% larger than your text size. This way each line has enough space and reading is much easier. The best way to do this is to work with a multiple of four pixels and make the line height 8, 16 or 32 pixels larger, for example.
👉 Define the appropriate line height and letter spacing for your font and size.
But not only the spacing between lines, but also the individual letters within a word give each typography its own look. Different spacing affects how your typeface looks and what aspect of your message it emphasizes.
You can stretch the letters or space them very close together to create different effects.
Color
Color and font should always be well coordinated. But what do you determine the color you give to a font? For example, you can use the hierarchy.
Headings are often powerful shades. Pay attention to the background. For light backgrounds, choose very dark colors and vice versa.
👉 Create a color palette for your typography.
Of course, the rest of the copy has to stand out from the background to be legible as well. But the varying nuances make the difference. Create a color palette for your entire typography. This way you can be sure to always use the correct colors in the right place.
Conclusion
As you can see, typography is much more than «just fonts». There are many aspects that can influence and improve the UX and UI of your product.
Thanks to clearly defined hierarchy, colors and sizes, you can give your product its own touch and make it professional and unique.
What is missing here and what is important for you when you are working on your typography? Please share your findings and insights with me on LinkedIn or Instagram.