Web typography is the cornerstone of website design.
It’s that subtle element that distinguishes an average website from a well-designed, professional one. When executed well on a website, you’ll barely recognize it. It’s that little something that you can’t quite describe.
If you’re about to launch your first blog or website, it doesn’t have to break the bank nowadays. As we live in an era of content management systems and drag and drop page builders you can plan and build a website from scratch without any prior coding experience.
But if you want to give a clean, professional look to your web pages, you need to be aware of a few design and typography principles. Because web design is 95% typography. Typography gives a clear hierarchical structure to the website copy. But beyond that it makes the web page good to look at. And easy to read.
These little tips and tricks I’m sharing with you today can help you to level up your website in no time.
Selecting a body text font for your website
The vast majority of your website consists of the main body text. That’s were the magic lies. Where you talk about yourself, your business, how you can solve your clients’ problems. Where you describe your products and how they can make your customers’ life so much more easier.
Make sure that the web font you select for your main body text is easy to read:
- both in size, and
- also on the individual character level.
[socialpug_tweet tweet=”Level up your website in no time with these web typography tips and tricks from Petra Molnar. #webdesign #typography ” display_tweet=”Level up your website in no time with these web typography tips and tricks from Petra Molnar. #webdesign #typography “]
Web fonts with special characters
If your website is not in English, always check that the font you want to use has the extended characters of your alphabet. There’s nothing more embarrassing when special characters don’t render. Or get replaced by a different system font after you hit the go-live button for your website. It makes your website look sloppy and your visitors could question the legitimacy of your business.
There are a lot of typefaces designed for web use with extended character sets. Look for one that suits your website needs.
Also, be cautious with sites offering free fonts. First of all, not all of them are designed for web usage. And many come with limited options. That is only in uppercase variants. Or just in lower case. Some don’t even have matching numbers!
Stay away from those.
Web fonts with clear distinguishable features
Not all fonts are made equal. Some letters can be painstakingly similar to others. And if those collide in a word or phrase you haven’t anticipated. Well, it can cause confusion.
There’s a quick test you can use to see how your selected web font fares in this regard. It’s called the ‘Il1’ test. Take the capital “I”, lowercase “L” and the number 1 of the web font you want to use on your web pages.
If there’s barely any distinction between the three, this is a sign that it could cause readability issues. I’d recommend than to search for another typeface. Because if your readers can’t read your text with ease, your website failed its main goal.
Don’t be afraid of bigger font sizes
A common mistake on many websites still is the fact that they make the main body text too small. Your readers need to be able to read the copy comfortably and effortlessly.
Bear in mind that we read web pages differently than printed text. And what may appear an overkill in a printed book, e.g. a font size of 13 px, when seen on a mobile screen it wouldn’t be that big at all.
A general rule of thumb recommends the font size of about 16px for body text on mobile screens, and even larger for desktop screens.
Does it mean that you should now change the font size on your web pages? Not necessarily. But take your website font to the test and check if it’s easy enough to read at this recommended 16px size. And by that I mean to actually look at it on a mobile device.
If you go to Google Fonts and pick a web font from their collection, you can move the scale and see how legible it is at different sizes. Also putting two different fonts next to each other can show that even at the same px size one can be read better on screen than the other. When picking a typeface for your website always go for the one that’s more contrasting and prominent on various screens.
Selecting a web font for headings
Once you’ve settled for the body text font, you’d want to choose something for your titles and headings. While a lot of people decide to use a different typeface know that you don’t have to.
I’ve seen nice, sophisticated website designs using the same typeface for headings and titles as the body text. It works well, because using the same typeface means that there won’t be any clash of the fonts in the design. It takes out that uncertainty whether the heading goes well with the body text. A big relief for many DIY website designers.
You can achieve the best results if you’ve selected a type family for your body text that has enough variations in
- width (narrow, condensed, regular, extended, etc), and in
- weight (thin, light, regular, medium, bold, semi-bold, black, etc).
This gives you a huge arsenal of options to find the best typographic design for your web page:
- Libre Franklin one of my favourite sans-serif typefaces comes in 18 weights. Available free on Google Fonts.
- Neue Helvetica a premium sans-serif font, available from the Linotype design studio, comes in 109 styles.
Pairing fonts from the same extended type family
Pairing fonts is a real art. The typographer needs to consider
- the history of the typefaces,
- their individual characteristics,
- the era they were created in,
- the current project where they’ll be used,
- the message that the website needs to convey.
Understandably you may not want to enroll in a typography course to spend much time on this. And you don’t need to. You can achieve a well balanced typographic design by selecting fonts from an extended type family that comes with serif, sans-serif or slab variants.
You can find e.g. the Roboto type family on Google Fonts in sans-serif, slab, mono and condensed. Plus all come in various weights. Another one is Merriweather with its serif and sans-serif variants.
Don’t be afraid using available font pairings
If you want to spice up your design and use a different typeface for headings, the best is to stick with already available font pairing suggestions. You don’t need to reinvent the wheel. Especially if you’re new to website design.
There are several websites that provide good font pairing suggestions that you can use to learn and to get inspired:
+Bonus tip: Limit the number of web fonts on your website
I mentioned above that not all fonts are made equal. It applies also to their size in kBs. Serif fonts tend to be a bit big bigger than sans-serif versions. Fancy script fonts or ornamental fonts are even larger in size. Every small piece adds up when it comes to the actual size of your web page.
Also the more fonts you use, the slower your web pages will load. I’ve reviewed websites that had 6-10(!) different typefaces, not to mention in various weights. That’s overkill. And on mobile devices with a poor connection to the internet this could mean the difference of converting that first-time visitors or driving him away forever.
Because speed matters!
Meet the Guest Blogger:
Petra Molnar, owner of ARRA design studio, is a professional web designer who helps fellow small business owners and bloggers with easy-to-maintain SMART WordPress websites and creative designs. She also reviews existing websites and provides recommendations to make them faster, and more SEO & user-friendly. Because Your small business deserves a high-performing website. Follow her on Facebook or Instagram for website design and optimization tips
