Web Design Basics: How to Choose the Right Font for Your Website

« Back to blog

Web Design Basics: How to Choose the Right Font for Your Website

Seasoned web designers can find the ideal font to use for the website right away. However, those that are still starting out will find it almost difficult to settle with a font, especially in the designing face. There is already a rule out there that you need to settle with a certain font family, but then there are cases in which designers get distracted and can’t choose the right one.

Choosing the perfect font means that you need to think of various things that includes compatibility, design purpose and load time. Here are some tips that will help you choose and utilize the best font for your website project.

Begin with the First Principles

Sans serif or serif? There are many other categories but when it comes to web design, each project is somehow based in one of the aforementioned 2 options. In fact, they are the ruling choices.

Leading, tracking and kerning. The space surrounding the text is as important as your choice of typeface. Kerning refers to the space in between the letter pairs, while tracking refers to the space in between the group dos characters. With Leading, ti refers to the space in between the lines of text or simply referred to as line height.

Readability. When you are working text that is to be used for the web, the amount of characters each line is important, too. You have to think about the screen size where the text is going to appear and you need to make sure the design for it makes the text easy and convenient to read.

Hyphenation. Avoid this as this can be very distracting. They make the texts very messy.

Justification and alignment. This is most applicable for huge blocks of text, yet you need to think about how the text get aligned on screen - center, right or left - and think about whether these blocks of text be justified or have ragged sides.

Typefaces. This refers to the number of fonts that you need to use. You should use only a maximum of 3, but there are special exceptions.

Contrast. It doesn’t matter with which typeface you choose, but when there is less contrast between the background and text, it will be hard to make out of the text at all. Elements that affect the contrast of your website include stroke weight, size, space and color.

Think of Compatibility

There are a lot of things that can make web typography very difficult, but one of them is the browsers’ constant updates and changes. You have to choose a certain typeface that is suited with all modern web browsers that are not only used in desktop, but also on mobile devices. This may sound really easy, but with testing you will find out how difficult can be. This is why testing is a necessity because you get to see how your website looks like when accessed on different devices.

You get more luck when you just stick with a typeface that is made for the internet or by utilizing the options provided by Google Fonts.