built with Readz
RESOURCES TO BOOST YOUR ONLINE CREATION AND PUBLISHING PROCESS
best-font-for-online-content.jpeg

What Is The Best Font For Online Content?

In this article we will discuss the best font for your online content and publications.

If you've ever landed on a web page that was nearly impossible to read, you already understand the importance of having legible content. I'd bet you didn't stick around long on that page. You're not alone; most people won't. So if a site can't keep visitors around, how can it convert them? Simple. It can't. Because content that isn't legible isn't convert-able. In contrast, sites that provide an enjoyable reading experience see better traffic, engagement, and conversions as a result. While many factors contribute to a positive reading experience, copy is ubiquitous. So that's where you should start.

This article goes over the best typeface for your online content and publications, whether these are digital publications such as reports, newsletters, annual reports or websites and blogs.

We’ll pay special attention to the best font pairings used in different industries.

The best font for web content

Ideally, your website copy and online content alone are enough to satisfy your readers and reach your content goals. Yet you can influence the perception of text through typography:
  • Branding: Your website will replicate the style of your brand and either use the fonts defined by your brand, or typefaces that bring out your brand’s qualities. A clean and serious corporate image is best complemented by typeface of that look.
  • Psychology: The look and feel of a typeface evokes a certain mood or emotion that should match your brand, but also your content to give it a personal voice.
  • Legibility: Typography can improve the on-screen appearance of text and make it easy to read. An optimum of speed and ease can encourage readers to go on.
  • Scanning: Even those readers who only quickly scan your content are able to retain more information when the typographic choices on a website allow for easy scanning.
  • Accessibility: Similarly, making your content accessible to users with impairments across devices is not only a design priority, but it also helps in getting your message in front of readers.

Effects Of Typographic Choices

For starters, fonts have the ability to create very specific associations for readers that elicit distinct emotions about a brand or company. Just think of the font used for Disney’s logo versus that of Sony’s. Two different fonts, two very different feels.

The same is true for all fonts. When you think of Times New Roman, you might think "stale" or "pedagogic." In contrast, when you think of Garamond, words like "polished" and "sophisticated" may come to mind. Both are serif fonts (distinguished by the small decorative lines added to the end of a stroke in a letter or character) by the way, but they have different associations.
The Psychology Behind Type Choices (source)
For his project Logofonts, designer Emanuele Abrate replaces the wordmarks of famous logos with the fonts in use. Google therefore becomes Product Sans, the name of the font the search engine uses for its logo. You can browse the project for font inspiration.

In another interesting font study, experimenter Errol Morris asked 45,000 New York Times' readers to take a quiz. Contrary to the title, the quiz was not meant to test whether readers were optimists or pessimists but whether typefaces affected perceived truth. Specifically, are there certain typefaces that compel a belief that the sentences they are written in are true?

Morris used six fonts for the study: Baskerville, Computer Modern, Georgia, Helvetica, Comic Sans, and Trebuchet. He found that Baskerville promoted the most confidence; that is, engendered a belief that a sentence is true. (To read more on this study, click here.) Clearly, the decision on typeface is an important one; content marketer's should tread carefully.

Typeface across industry sectors

The typefaces on your website support reader comfort, legibility, engagement, and ultimately conversion and therefore business growth. The following infographic gives an overview of the feelings readers associate with various typefaces:

Different fonts shows different brand emotions

In an IBM and Google eye-tracking study, the researchers also measured the legibility of serif vs. sans serif fonts. The study found that serif fonts (they used Georgia) were read 7.9 percent faster than sans serif fonts (the study used Helvetica), although the difference was not significant.

Many other studies found the same. And there is much, much more that goes into the readability of text (e.g., letter spacing, height, and width, weight, shape, etc.).

Which font is easy to read? Serif vs sans-serif fonts

Why is typeface important?

Clearly, the decision on typeface is an important one; content marketer's should tread carefully.

In general, fonts that work well on a website have open counters (the opening within letters such as O or D), generous apertures (the opening between counter and glyph outside, as in c or e), and feature a moderate contrast in the thickness of character strokes. When using serifs, consider how well they reproduce at small sizes.

So for the scope of this article, here's a simplified list of the best and worst free fonts for your body content:

Encouraged:
  • Nunito Sans
  • Garamond
  • Georgia
  • Avenir
  • Raleway
  • Lato
  • Verdana
  • Open Sans
  • PT Sans / PT Serif

Avoid:
  • Comic Sans (#1 most hated)
  • Courier
  • Papyrus
  • Impact
  • Souvenir
  • Times New Roman
  • Brush Script
  • Gill Sans

Arial, Times, and Helvetica are also among the most hated but are more acceptable due to their universal availability.

Soooo... what is the best font for you?

Tips for selecting the best font for your content

Match your brand and message

Pick your fonts according to what your brand and your website represent and match the personality of your message. Which characteristics are important? Traditional, respectable, comfort, reliable? Contemporary, modern, minimalistic, progressive? Strong, stable, defined? Elegant, luxurious, vintage?

Match your audience

Take your readers into consideration and identify the age range and social demographic of your target audience. Fulfill the expectations of readers by presenting them with visuals they already expect from your sector and only add a slight personal touch. If necessary, research your successful competition to understand their font use.

Versatility

If you find it difficult to pair two fonts, maybe one is enough. Don’t forget that you can use different styles and weights to accentuate and distinguish headings and subheadings merely by size from body text. This will work especially well with modern sans serif fonts such as Open Sans or Roboto.

Readability

We can’t stress enough that your font design should not be too complex. Never compromise on readability and legibility, especially with mobile users in mind.

Mobile Considerations

For more information on mobile typography, Google’s Material Design guidelines offer clear and consistent design hints. Here are a few considerations when choosing fonts for mobile web design:
  • Consider toning down the desktop experience, which might mean using only a serif or sans serif font - or use a more decorative typeface sparsely for touches here and there.
  • Limit yourself to just two typefaces on mobile to give readers and users a better visual experience on smaller screens.
  • Check that characters are distinct and readers won’t mistake similar glyphs for one another (uppercase “i”, lowercase “l”, number “1”), especially at smaller sizes.
  • Typefaces should complement each other; they can contrast visually, but for legibility, similar character width and line length are helpful.
  • The more extravagant your font choices are on desktop, the more seriously you should consider substitutions on mobile.
Google uses Product Sans for its logo.
In general, fonts that work well on a website have open counters (the opening within letters such as O or D), generous apertures (the opening between counter and glyph outside, as in c or e), and feature a moderate contrast in the thickness of character strokes. When using serifs, consider how well they reproduce at small sizes.

Your choice of fonts for your website and online content communicates about your brand and business, as well as about your content, product, and audience. Your font design should be in line with your brand messaging, which is why we’ll look at website fonts across various industries below.
HEADINGS
SUBHEADINGS, BODY TEXT
Arapey Droid Serif Muli Lato
Roboto Overpass
Brandon Grotesque
Rooney
Oswald
Univers
Museo Sans Rounded
Oxygen
Tiempos
Avenir
Geogrotesque
Circular
Raleway
Raleway
In general, fonts that work well on a website have open counters (the opening within letters such as O or D), generous apertures (the opening between counter and glyph outside, as in c or e), and feature a moderate contrast in the thickness of character strokes. When using serifs, consider how well they reproduce at small sizes.

Your choice of fonts for your website and online content communicates about your brand and business, as well as about your content, product, and audience. Your font design should be in line with your brand messaging, which is why we’ll look at website fonts across various industries below.

Best Font for Healthcare

Nurse.com achieves a modern look with Open Sans and Aktiv Grotesk

Best Font for Banking & Finance

This research report by BNY Mellon and Financial Times combines Publico Banner for serious serif headings with the Lineto Akkurat font for sans serif body text.
Customers are looking for values such as stability, reliability, and professionalism. It’s also important to portray a sense of security. Thanks to banking apps, cryptocurrency startups and fintech, the sector generally tends to go for a more modern look without losing the strength of traditional values.

A range of modern fonts is suitable for baking and finance websites, such as Open Sans, DIN, Calibre, Neue Haas Grotesk, Graphik, Avenir, Pluto Sans, Proxima Nova, Aktiv Grotesk, Calluna, Sofia Pro, Neue Haas Unica, Akkurat and Nunito.

HEADINGS
SUBHEADINGS, BODY TEXT
Montserrat
Arsenal
DIN Pro
Asap
Pluto Sans
Pluto Sans
Lato
Lato
Tiempos
Avenir
Geogrotesque
Circular
Catamaran
Muli

Insurance

Travel insurance company TuGo relies on Open Sans for clarity in its newsletter.
Similarly to banking and healthcare, you want to use fonts that convey a sense of security in the insurance sector. Avoid fancy scripts that come across as unprofessional and playful. The right font pairing will speak to your brands reliability and establish trust with the customer.

A modern approach can rely entirely on sans serif fonts, but there is nothing wrong with using modern serif headings to appeal to traditional values.
HEADINGS
SUBHEADINGS, BODY TEXT
Crimson
Roboto Slab
Open Sans
Brandon Grotesque
Brandon Grotesque
Tiempos
Avenir
Lato
Lato
Platform
Poppins
Calluna
Calluna
Realist
Realist
FF Dax
FF Dax
Omnes
Proxima Soft

Academics & Education

Aspen Music Festival And School uses Type Dynamic's Larsseit font for sans serif heading and Utopia Std for serif body text, a sophisticaed choice.
Academic institutions, universities and schools want to convey their values of tradition, discipline, scholarship and a reliable, professional education. A sophisticated pairing of a serif and sans serif can work well to achieve this.

Education website and e-learning apps targeting younger learners often opt for a sans serif approach only, using modern typefaces. For your education website, consider typefaces such as Futura, Crimson,  Open Sans, Avenir, Lato, Interstate, Noto Sans, Elena, Graphik, Sofia Pro, Proxima Nova, or Benton Sans.

A modern approach can rely entirely on sans serif fonts, but there is nothing wrong with using modern serif headings to appeal to traditional values.
HEADINGS
SUBHEADINGS, BODY TEXT
Montserrat
Skolar / Space Mono
Oswald
Univers
Freight Sans Pro
Freight Text
Apercu
Nobel
Work Sans
Akkurat
Fenland
Lyon
LL Circular
Calibre
FF Dax
FF Dax

Non-profit & NGO's

The non-profit organization American Industrial Hygiene Association uses Dosis for its logo and Futura PT with Open Sans & Arial for its messaging.
For non-governmental organizations and non-profits, let the respective sector guide you in your choice of fonts to underline respectability, responsibility, or professionalism.

For activism, social responsibility and other causes where you want to communicate a strong message that needs to stand out, you can make use of an unusual serif and sans serif pairing or combine a sans serif with a monospace or otherwise striking headline.
HEADINGS
SUBHEADINGS, BODY TEXT
Lato
Droid Serif
Skolar
Vinter
Lato
Rooney
Apercu
Scandia Line
Scandia
Novel Sans Rounded
Heimat Sans
Jigsaw
Jigsaw
Maiola
Montserrat
Farnham
Source Sans
FF Din
FF Din
Plan Grotesque
Plan Grotesque
Akkurat
Akkurat

Real Estate

For its new approach to leasing, Nestio uses the modern font Karbon for a distinct look. 
This industry is more diverse than you might think at first. In general, your choice of fonts should speak to the trust and seriousness your brand wants to establish. But depending on your clients, you might opt for luxurious or affordable, classic or modern, mature or youthful. Sans serif fonts manage to convey that modern or timeless appeal, whereas you can add personality, tradition and excellence with the right sans serif for headings.
HEADINGS
SUBHEADINGS, BODY TEXT
Proxima Nova
Gilmer
Georgia
Proxima Nova
Museo Slab
Open Sans
Fedra Sans
Lato
Neue Haas Grotesque
Neue Haas
Neue Haas Grotesque
Lyon
Neue Haas
Serif
Futura
ITC Bodoni
Apercu
Benton Modern
Benton Sans
Eudald News
Figgins Sans
Karbon
Kabon
Poppins
Poppins
Akkurat
Akkurat
Avenir
Avenir
Locator
Locator

Retail & E-commerce

Nike uses bold sans serifs for its statements and headlines in this newsletter.
In these sectors, you want to communicate a clear and consistent message to your customers. Fonts needs to be legible and mesh with brand or corporate identity. Sans serif fonts such as Helvetica, Futura, and Muli are common appearances for bold statements, recognition value and a modern, yet timeless look. Serif fonts can convey seriousness where necessary, but refrain from using them for body text.
HEADINGS
SUBHEADINGS, BODY TEXT
Helvetica
Muli
Futura
Asap
Karla, Prata
Nunito, Lucida Sans
Open Sans
Change One
Roboto
Brandon Text & Source Sans
Calluna
Brandon Grotesque
FF Tisa
Value
Value
ITC Kabel
Calibri
PT Sans
Trend Sans One
Avenir
Flama
Adelle
FF DAgny
Bebas Neue
DIN

Conclusion

Never write off font as something unimportant. Choosing the right font size and typeface can make a big difference in readership and conversions you obtain. Give users an unpleasant experience, and there are countless other places for them to turn. Don't do your competition any favors - be smart about your font choices.
Readz-logo-navy
Start publishing online newsletters like Deloitte, IBM, and Nike.

Get a demo of Readz today - and never look back.
Stay in the know
Actionable advice on how to create better content & design, delivered to your inbox.
No charge. Unsubscribe anytime.
< BACK TO OVERVIEW
Create Content Experiences.

Better. Faster.

/ / newsletters
/ / white papers
/ / magazines
/ / content hubs
/ / annual reports
/ / brochures
closebuttonblack
Are you looking for better digital publishing ?
Hop on the phone with one of our digital publishing consultants and we will help you weigh the pros and cons of creating content on these platforms. Readz brings together technology and expertise to help you launch top-performing content.