When choosing fonts we should consider many factors, such as personality, history, tonal directions, visual elements, function, among others. Saying that, there are 3 aspects, which play an important role in the web universe, namely; readability, accessibility & performance. Yes, performance plays a part in user experience!
Best 5 fonts to use for your next website design project.
All the fonts below are part of the Sans Serif family, the ones I have picked are easy to read as the font letters are relatively similar in design.
The purpose of a good font is that it helps users to read content easily and quickly to understand what the content is all about. Why waste users' time trying to decrypt the text? For today's post we will focus on typographies for text blocks that have good browser performance.
For example, let's start with typography that is not recommended for a text block. Take a look at the Parisienne Fonts, and you’ll see that it’s not an easy read. In fact, this specific typography is usually used for decorative purposes, and should be used like a display font, which makes a statement rather than just a text set.
The Parisienne font captures the flourish and artistry of traditional hand lettering and calligraphy. While it’s still possible to read it, when used in a long block of text, you will find that after reading for a couple of minutes, your eyes will start to slowly get tired. It happens, because it requires a lot of eye motion in order to interpret the text, therefore your attention to the messaging may start to reduce.
(Click on the font header, it will bring you to the Google Fonts Library)
1. Montserrat Fonts
Montserrat was designed by Julieta Ulanovsky inspired by the posters and signs of the traditional Montserrat neighborhood of Buenos Aires. It is very versatile and can be used in different ways such as websites, branding, editorial, logos, print, etc. This is because of the geometric and elegant style, which is an excellent choice for minimal and modern designs.
2. Roboto Fonts
Roboto is a font that comes with friendly curves. It was designed by Christian Robertson. It’s a responsive font that makes letters look equally good on smartphones, tablets, and other mobile screens.
3. Open Sans Fonts
There are plenty of fonts similar to Open Sans, but this is the most popular for publishing online, print, and mobile. Designed by Steve Matteson, It presents excellent legibility and readability in its type forms. You can easily find Open Sans in flat-styled web design.
4. Source Sans Pro Fonts
Source Sans Pro, is a sans serif typeface that draws inspiration from the clarity and legibility of twentieth-century American gothic typeface designs. It was designed by Paul D. Hunt for Adobe with the intention of creating typography that works well in user interfaces.
5. Lato Fonts
Designed by the designer Łukasz Dziedzic, Lato, the word means summer in polish, has semi-rounded letterings which gives a feeling of warmth. The classic proportion in uppercase gave letterforms both harmony and elegance. That strong structure conveys stability and seriousness.
Improving Font Performance
When adding fonts to the website it is best to choose the fonts that are required, in order to improve your website performance.
For example, you may have decided to use the Montserrat fonts for your website, as it aligns with your branding typography.
In Google Fonts for Montserrat Fonts you can select styles of font you require, for example we might use bold 700 for our headings, regular 400 for our paragraph/normal text, and regular 400 italic. The fewer fonts that need to be loaded, the quicker the pages will load!
Experiment
Here is an experiment I did with only loading the required Montserrat Fonts which are bold 700, regular 400, and regular 400 italic.
The page load time on GTmetrix was 203ms, 217ms & 189ms, the average at 203ms.
The Font transfer size with PageSped Insights was 1.4kbs.
Then I tried to load all the fonts for Montserrat
The page load time on GTmetrix was 247ms, 200ms & 287ms, the average at 244ms.
The Font transfer size with PageSped Insights was 1.7kbs.
The experiment was carried out 3 times each time, to get an accurate average. From the test, the fonts loaded 31ms slower when fully loaded, but it may take more time depending on the server set up. Also note Google Fonts are loaded from CDN (Content Delivery Network), and cached which makes the performance of the fonts much faster than having to upload fonts to your own website.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<head>
<body>
<h1><strong>My First Heading</strong></h1>
<p>My first paragraph.</p>
<p><i>My first italic paragraph.</i></p>
</body>
</html>
So every effort to save milliseconds counts, and loading required fonts improves speed. It may not seem like a huge number, but considering more content, design, and development being added to the website, saving where possible, can improve seconds of page load time. After all, the quicker the website loads the more enjoyable the experience for the user!
