Most people never think about fonts, while a tiny few think of nothing else. Being a font designer therefore requires a unique kind of dedication, as the general public won't care about your work in the least. It takes a special someone to still dedicate themselves to the repetitive work and extreme level of detail needed to craft amazing fonts.
Thankfully, what you need to know about typography as a web designer is much more easily digested. Perfect for explaining in an online article, for example.
Althought most people will never pause to consider typography, it's a crucial component of every kind of design. If the information in your design is unreadable or unclear, then you're doing it wrong. In many cases, your design should support the content, not take center stage. Your task is to make information crystal clear and typography can help you.
Let's start with the two main categories of fonts:
Serif: Often viewed as classic fonts, you can recognize them by their 'feet' at the ends. These 'feet' are called serifs, which might be a little confusing as the entire category is also known as such.
Sans-serif: 'Sans' is French for 'without'. So, fonts without the serif 'feet'. These are seen as more modern.
The choice for a font is all about the emotion you want to convey. For a classy brand, you might lean towards serif fonts, as they give off an air of exclusivity. Modern brands will probably go for a serif fonts, as they often feel more professional.
Let's look at some important technical terms:
Font size: The size of the letterforms.
Line height: The height between lines of text.
Letter spacing: The space betwee two letters.
Kerning: Adjusting the spacing between specific letter combinations to enhance readability.
Probably the one that's made you go 'huh?' is kerning. A great way to understand it is to give a bad example, which can be found in the word 'kerning' itself. If you decrease the letter spacing between 'r' and 'n' too much there will be a point where they touch and blend together. This will make them look like an 'm' — this is bad 'keming'.
By first playing with font combinations and second by changing stuff like line height and letter spacing, you can convey a wide range of emotions. For instance, huge fonts sizes are currently seen a lot in brutalist web design, instantly demanding all your attention.
To start experimenting yourself, you can use fonts services like Google Fonts, Adobe Fonts of Monotype.
The most curcial aspect of typography in web design is learning to establish a clear hierarchy. To illustrate this, take any lenghty document you've ever written. Now, select all text and set it to 12 pt. size and make it all bold. Suddenly, you'll find it's impossible to read any text like that.
That's why typography matters.
