The Best Fonts for Online Projects: a Designer’s Guide
Choosing the best fonts for a brand identity may appear to be difficult. This article explains how to pick the finest typefaces for your project.
There are a lot of fonts out there, and it can be difficult to pick the right one for your online project. You can simplify the process by keeping a few guidelines in mind. In the worst case, you can always choose one of the standards.
Fonts for online projects should be easy to read and scan. Sans serifs are usually preferred for screens, especially for UX text. Serif can also work well in body text. Some of the best digital fonts are Open Sans, Merriweather, Helvetica, Lato, Roboto, and Montserrat.
Choosing a font is a delicate matter. It has to be functional, but it also has to match your purposes. This article will lay down the basics to let you pick a great font for any online project.
What is a font?
When we talk about fonts, we’re talking about typography, which is the art and technique of arranging and designing text. Simply put, it’s the style and feel of the text. In typography, we find an important but often mixed-up word: font.
Fonts often get confused with typefaces. A typeface is a collection of letters with a specific design. A font is a subset of a typeface with a particular size, width, or weight. Typefaces are often called “font families.”
The difference is small, but it’s something you should know when deciding which font to use for your online project. Most fonts come in three main types:
- Serif. Serif fonts have small strokes or slabs called “serifs” at the end of some of their lines.
- Sans serif. Sans serif fonts are those that don’t have any serif.
- Display fonts. These are detailed and ornamental fonts that are only suitable for headings and logos. They include script fonts, which mimic human handwriting.
What are the best digital fonts?
Some of the best digital fonts are:
- Open Sans.
- Merriweather.
- Helvetica.
- Lato.
- Roboto.
- Montserrat.
Let’s continue by saying there’s no absolute best: it all depends on what it’s being used for, the aesthetic of the website, and the designer’s test. The real question is, what makes fonts work well in digital media?
There are some things you should keep in mind when choosing a font for a digital project:
- Fonts should be web-safe. Web-safe fonts are designed to be displayed properly on any browser or device. The device may not recognize other fonts and will instead show a default and unattractive font instead.
- Choose sans for body text. Sans serif fonts require less effort to read on screens. This isn’t a rule: the difference is small, and serif can sometimes be the best pick. But when in doubt, go for sans.
- Use few typefaces. Using too many different fonts will make a website harder to understand and navigate for its users. It’ll also look cluttered and potentially ugly. Try to stick to only two typefaces.
- Use hierarchy. Different sizes communicate different hierarchical positions. Titles should be larger than subtitles, subtitles should be larger than the body text, and so on. The best size for body text is around 14 to 16 points, or 16 to 17 pixels.
- Make it easy to read and scan. Many internet users scan an article for the information they need. Digital fonts should require little effort to read.
- Pick opposing typefaces. Choosing contrasting typefaces can create a sense of balance and hierarchy. However, don’t go too crazy – as mentioned above, too many typefaces will make your website look cluttered.
What are the best fonts for blogs?
The best fonts for blogs are readable for long texts and match the mood of the website. These are fonts that keep in mind the best practices for web typography.
Blogs feature written pieces that’ll take at least a few minutes to read, so the font should be readable before anything else.
However, it isn’t all just about practicality. Depending on the mood you want to communicate, you’ll want to use different fonts.
- Serif fonts can convert an air of formality and elegance. They’re also associated with books and literature. If your blog deals with fiction, serif may be a good choice.
- Sans serif fonts look modern and straightforward. Depending on the font and context, they can look sophisticated or friendly. They also look great on screens. If you want a minimalistic design, sans serif fonts will fit right in.
Here are some fonts for blogs you can’t go wrong with:
- Open Sans
- Quicksand
- Lato
- Roboto
- Montserrat
- Roboto
What are the best fonts for readability?
The best fonts for readability have consistent metrics, are large for their point size, and have clearly distinguishable letters. Good examples are Source Sans Pro, Merriweather Roboto Mono.
Readability is something you should keep in mind for any online project. You have to work with fonts that can be scanned quickly and are legible for people with visual impairments.
Readable fonts have a few things in common:
- They’re readable in both large and small sizes.
- They’re large for their point size, especially their x-height.
- Metrics are consistent across letters.
- They include all necessary characters.
- Every letter has a distinct shape.
When choosing a font for readability, consider the kind of text. It’s generally agreed that serif fonts are great for long reads. That’s why you see them so much in printed books. However, readable sans serif fonts can work well for long texts on the web.
For headlines and short texts, sans serif fonts are typically more readable. They’re easier to scan and more neutral, allowing the user to relate to the interface as a tool.
Some very readable fonts include:
- Source Sans Pro
- Merriweather
- Public Sans
- Roboto Mono
What font does Google use?
The two main fonts that Google uses are Google Sans and Roboto. Google developed the custom Google Sans font as an improvement upon Product Sans. This custom font is often used in interface text and is paired with Roboto for body text.
What font does Twitter use?
The font that Twitter currently uses is their custom-made Chirp font, which was introduced in August 2021. Before that, Twitter relied on common fonts like Helvetica Neue, Roboto, and Segoe.
This change was implemented to make the font more accessible, distinct, and efficient.
What font does Apple use?
The font that Apple uses across all its devices is the San Francisco (SF) font. This font was introduced with macOS 11. Its variants are SF Pro, SF Compact, SF Mono, and SF Arabic. They’re often paired with Apple’s secondary font, New York.
What are the most overused fonts in design today?
Unless they’re for display, fonts shouldn’t be noticeable by the reader. However, even perfectly readable fonts become noticeable when they’re overused. Such is the case for many fonts used in digital media.
The most overused fonts in design today include:
- Times New Roman
- Helvetica
- Comic Sans
- Arial
- Impact
Wondering why these fonts are overused? Let’s take a look.
- Times New Roman. Times New Roman isn’t a bad font, but many people forget it was made to cram as much information as possible into newspaper space. It doesn’t perform well on screens.
- Helvetica. Helvetica set the standard for round, geometric fonts. It’s readable and elegant, which made it the default of many software products. Since it became so popular, using it today can come off as uninspired.
- Comic Sans. If you’ve been on the internet long enough, there’s nothing to explain. It’s childish, hard to read, looks ugly on hi-res screens, and has been criminally overused.
- Arial. This typeface was the default for Microsoft Office until 2007 but stayed as a standard digital font long after that. It’s gotten more than enough use.
- Impact. Recognizable at a glance, Impact is a bold typeface that you’ve likely seen used on headings, billboards, and memes.
Some of these typefaces are great, but just using them could give off a feel of unoriginality. Others make you wonder why anyone uses them at all.
What’s the best font To use for a novel?
The best font to use for a novel is a serif font that’s readable and non-tiring. Some of the most popular ones are Garamond, Baskerville, Palatino, and Caslon Pro.
When choosing a font for a novel, the first thing you should ask yourself is whether it’ll be printed or released digitally.
If the novel in question is going to be turned into a physical book, the printed version should have a serif font since they’re easier to read on paper.
Serifs help guide the eyes from character to character and word to word, creating a horizontal flow. They also make characters easier to recognize, making it easier to reduce the font size and save space.
Standard fonts for print books include Garamond, Baskerville, Palatino, and Adobe Caslon Pro. If you’re designing an eBook, keep in mind the font will be set by the device, not by you.
If you’re making a PDF version of the novel to be read on screens, you could choose a sans serif font, but most readers associate novels with serif fonts. Just make sure it’s a serif font made for screens and not for print.
Fonts designed for print, like Times New Roman, are heavier and harsher. Using them in a digital PDF will make the novel less readable on-screen and overall unappealing.
Final thoughts
Whatever your online project is about, a few good practices will apply in all cases.
Fonts for the web should be web-safe, readable, and pleasing to look at on screens. This is especially true if users will have to read through a long text, like in blogs.
Other than that, you should apply general design and typography techniques when creating your online projects and ensure that the typefaces match the mood of the site while remaining functional.
