Tips to improve your website typography to impress your audience
Here’s everything you need to know.
Building and designing a website is not enough. You need to ensure that your typography is up to the mark for a web visitor. So if you’re building a website from scratch or redesigning your existing website, you must take care of typography.
Since it is a specialized graphics design domain, most people aren’t aware of typography’s best practices. In this article, you’ll get a few tips that a reputed web design agency would recommend to its clients.
Choose Your Typefaces Correctly
In 2008, you only had 18 fonts to choose from. Now you have thousands of fonts available at places like Google Web Fonts and TypeKit. These are the digital versions of print typefaces. You won’t be using all of them. In fact, you should never use specific fonts. So you need to cherry-pick.
When choosing the fonts, you should focus on your primary font, which you’ll use on your heading, subheading, and body. You should also avoid using more than two or three fonts throughout your website. That’s because fonts can clash with each other and create an awkward combination.
Most websites employ either serif or sans-serif family fonts. That’s because of their ideal size and weight, and legibility.
Use Bigger Font Size
When selecting the fonts, you should be biased towards bigger fonts. That’s because the majority of internet users are now on mobile devices. And as you might know, mobile devices already generate more than half of the internet traffic since 2017. And this percentage is expected to go higher in the coming years.
Since most users are reading on their 5-inch mobile screen, you must ensure that the fonts are bigger enough to be readable.
The fonts should be at least 16 px because that’s the text size browsers were programmed to display. Anything below that can potentially cause eye strain.
Leading and Whitespaces
Written content is what people come to websites for (although video content is catching up). So you need to ensure that you have legible words and paragraphs on your website. Leading is a crucial element of typography that determines proper legibility.
Leading is referred to as the distance between the lines. Ideally, there should be adequate spaces between the lines. With proper leading, the web visitor will find it easier to read through the next and get the information.
But if the lines are jammed together, they’ll look too dense. And if the leading is high, then the copy will look fragmented. So you need to strike a balance. The leading should be around 3-6 pt bigger than typeface size.
Format with Proper Length and Height
The decision around the length and height of fonts can make or break the reading experience. In more technical terms, you need to balance the x-height and counter openness. The X-height is the typeface’s height, while counter openness is the area enclosed by a letter.
Both of these factors impact legibility. It’s usually the text size that determines height and length. But you can customize it with padding and spacing. So you should consult with your web design agency on the length and height of fonts.
Avoid All Caps
All caps obstruct readability. Therefore, you should keep using all caps to the minimum, only when there’s no reading involved. All the headings, subheadings, paragraphs, slogans, and messaging should be regular text. You can, however, all-caps your logo or brand where it needs to stand out.
Use Proper Color Contrast
Color contrast is another critical feature of typography and web design in general. When you’re picking the font color, you should consider the background color. You should always seek contrasting combinations.
For example, if you have a black background, you should select a light-colored font for your website. White is the best, but you can go for green, light blue, beige, etc. But avoid using fanciful colors like red, orange, pink.
Similarly, if you have a light-colored background, it’s best to have a dark-colored font. These contrasting colors will help your readers read through the text with ease.
To make selecting colors easier, you can take the help of a contrast ratio. If you’re using smaller text, then they should have a contrast ratio of 4.5:1. For larger text, the ratio has to be 3:1. You can use a tool like Webaim to check the color contrast ratio.
The above tips may sound complicated for an average user. But professional typography experts working at a web design agency are in a better position to understand and incorporate them. So it would help if you discussed the typography and typefaces when creating or redesigning your website.