As humans, we are preconditioned to remember pictures and images more than words. Referred to as the Picture Superiority Effect, the phenomenon is based on the idea that – “human memory is extremely sensitive to the symbolic modality of presentation of event information.”

Apply that to your digital product such as a website.

Whether it is a logo or the text, the typography on a website triggers many emotions for the visitors. It can make or mar your business.

The reason is simple. Each typeface has its own personality. So, how exactly does it pan out?

Understanding the psychology behind different font types

A study by Software Usability Research Laboratory (SURL) took a look at the personality traits that people associate with different fonts. The participants were asked to rate the 20 fonts using 15 adjective pairs. The results are as follows:

Image Source

Clearly, people do form opinions when they see a font being used on a website, and elsewhere. Like when they view a logo and immediately associate it with their favorite brand.

To elaborate further on the effects of font types on human psychology, let’s look a Venngage infographic that elaborates the fonts used by Netflix.

The OTT platform captivates users using attractive thumbnails with an endless repository of shows, documentaries, movies, and shorts. Each of the shows on the streaming platform has a specific look and feel, in sync with the underlying tone on the thumbnail image.

That’s how the platform manages to grab the attention of its diverse subscriber base.

Image Source

With an endless list of choices as a UI UX designer, which font type will best suit your brand or business? The following list of font types will help you make an informed decision:

Serif

Representing class and heritage, fonts that belong to the serif family appear trustworthy. For a formal website or brand, this font type lends ultimate sophistication. Garamond, Merriweather Playfair Display, and PT Serif are some of the top choices for brands that want to be portrayed as serious and elegant.

Slab Serif

A sub-set of Serif fonts, these fonts include specific slab sections and have a streak of boldness. This font type works exceptionally well for firms associated with an innovative idea. Think of startups or small businesses operating in a specific niche. This font type is also used by car and tech brands that want to balance building trust and displaying creativity. Some examples are – Arvo, Courier, Roboto Slab, and Rockwell.

Sans Serif

Sans serif font types are clean with a modern look. Brands that want to display a no-nonsense attitude adopt this font right from their logo design to body copy. This no bells and whistles font type is anything but distracting and offers excellent readability to the visitors. Clothing brands, tech companies, and modern businesses often use this font type, including Helvetica, Montserrat, Raleway, Lato, and Source Sans Pro.

Script font

As the name indicates, script fonts allude to fancy fonts that bring the elements of grace, elegance, and loads of creativity to the table. The hand-written variety of fonts lends a personal touch to the website. The catch – the font needs to be legible for the users. Creative websites belonging to professional artists or historical sites can use this font family for the art effect.

Fancier fonts are often associated with more skill in certain professions. An excellent example is that of diners who received menus with fancy fonts and assumed the chef had more talent.

Dancing Script, Great Vibes, Pinyon Script, and MonteCarlo are brilliant examples of this font type.

Modern font

The futuristic font type has existed since the 18th Century. Simplicity is the mainstay of contemporary font types, which include thin and thick transitions. They are perfect for attracting millennials mainly because several websites they relate to have this font type, including social media giant Facebook. Politica and Matchbook are two examples that you can explore.

Tips for using font types on your website

Choosing a font type for the website is a job half done. Here are some handy tips to help you make the most of them:

Define the nature of the brand/business – Does your website sell digital products and services? Is it a creative establishment or a non-profit? Who are your target audience? What is the tone or the language that your brand speaks to the visitors?

Stick to a family – There are endless variations of typeface families. They include the same base text and slight differences between the letters. Using the same family of fonts on your website will be easy on the eyes of your visitors by giving it a uniform look and feel.

Don’t compare apples and oranges – Never copy a font that has worked for your competitor’s website. Instead, understand your brand’s USP and how you want to convey it through typography. For example, do you want to appear more futuristic or want to give a classic twist? Then, take the decision based on the choice of font.

Color contrast is a must – Never settle for a font color that’s too close to the background color of the website. Conduct some initial tests and see how the font colors appear on various devices. As a rule of the thumb, avoid using colors that are too bright as they can lead to eyestrain.

Check for readability – Having the perfect font for your website without making way for readability can mar all your efforts. Always make it a point to figure out how readable the typeface is. This will include various technical aspects including the – letter spacing, the font size, the line height, paragraph spacing and so on. You also need to focus on the spacing between each line of text and the space between the text.

Check for platform compatibility – One font never suits all platforms. Add to this responsive website design, which includes several considerations to ensure that typography remains constant across multiple devices of varying screen sizes.

Bonus: List of resources from where you can get fonts for your website

1. Creative Market includes 28,000 fonts from independent creators

2. Google Fonts are our personal favorites

3. Monotype is a type library with more than 10,000 fonts

4. Adobe Fonts is another option if you use Adobe Creative Cloud

5. 1001Fonts website has a collection of various free fonts

6. Dribble includes some of the best font inspirations

Calling it a day

Choosing the perfect font is a long winding road for any designer. It is an absolute must to find the sweet spot between meeting visitors’ expectations and your own choices. With a successful font selection, the sales on the website are going to skyrocket as everything is ultimately tied to consumer psychology.

Are you looking for an experience-driven digital solution for your product or service?
Author Akshay Dafade
Akshay is the Lead UX Designer at Pepper Square and he has defined the user experience for some of the finest global brands over the last four years.

What are the remarkable differences between UX and UI ?

Green UI - Designing for the Future