For Web Design Best Fonts (5) for Users

Why is web design best fonts important? At Least 75% of consumers judge a business by its website design. Text and the font that it is in is a major part of the used design. As such, for website design the best font chosen for users will be critical for the design.

Fonts: A Brief History

For web design best fonts, let’s start with a bit of history. A font is the design or a consistent way that letters in words are written. English letters largely originate from the Greek alphabet (the word alphabet is a combination of the first two Greek letters: alpha and beta) that the Ancient Romans took and edited into their own alphabet for Latin. In later versions of Latin, they added the letters ‘Y’ and ‘Z’ around 100 B.C. and ‘J’, ‘U’ and ‘W’ during the Middle ages (as well as spaces between words to make them easier to read). 

The word font originates from the 1570s French word fonte, which means that which has been melted, cast in metal, and poured out. After the printing revolution that was started by Johannes Gutenberg inventing the printing press, the word came to mean the complete alphabet and characters made from metal that the printing press used. 

One of the most commonly used fonts in the second half of the 20th century is Helvetica. This font was created in Switzerland by freelance font designer Max Alfons Miedinger. This font was originally called ‘Neue Haas Grotesk’ in 1957 and was renamed to Helvetica (the latin word for Switzerland) in 1960. This font rose in popularity in printing due to its simplicity and ease of reading. It was later licensed to Adobe, Xerox, and Apple making it a staple font for computers and the internet. IBM did not get the license to Helvetica, so they made their own version of it, Ariel.

Why Fonts Matter

Web design best fonts matters in a few ways for both users and businesses.

Fonts Effects for Users/consumers

The first critical effect that the type of font has on users is the readability of it. Can all the letters be read easily in either upper or lowercase for those with bad eyesight? Does each letter look unique from each other so they are not mistaken for a different one? (Capital i’s (I) and l’s are common issues.) Is the font interesting enough that the reader doesn’t get cross eyed from boredom after a few sentences? 

The types of fonts that are used will give users an impression of the tone and purpose of the website or document they are reading. A font like Tahoma indicates a more professional website while a font like Comic Sans suggests a more fun or creative site (this is good for comic book writers or designers). Fonts can even suggest the purpose of the website; for example, a type font like Courier New suggests a site that is based around older writing.

Some fonts invoke a mood or emotion when they are read. A font like Comfortaa gives a more fun and mellow feeling. Since they have had to write and/or read so many articles and essays written in it, some people are annoyed by Times New Romans. 

Fonts for you (or the Business)

Picking specific fonts will build certain expectations, so pick one that matches your tone and your (or your businesses) personality. As long as it is readable, anything can go. Find a font that matches the color and character of the content and the products while matching your own unique personality.

Increasingly, many brands are recognized by the font that their logo is written in. Futura in all caps is a symbol for NIKE, and Neo Sans is used by Intel. Keeping the fonts consistent also can bring different parts of your brand together, so make sure that the font on your emails, business cards, and logo matches your website.

Some Parts of fonts

Before we get into web design best fonts, let’s talk about some of the main parts of fonts.

Serif/sans Serif

A serif is the small line at the end(s) of a letter in some fonts. Fonts that have serifs are called serif fonts, and those that don’t have serif are sans serif fonts

Spine (also called the Stem)

The spine the the main part of the letter like the up and down part of the letter ‘t’ or the middle part of ‘s’ or ‘i’. (Fun fact: the dot on top of the ‘i’ is called the tittle.)

Baseline and mean line

The baseline (sometimes called x-height) is the line that all letters ‘stand’ on, and the mean line is the line that lower case letters don’t go above unless they have an ascender. For example, the bottom of ‘o’ is on the baseline, and the top of ‘o’ touches the mean line.

Weight

A font can be written or typed in different weights (weight being how dark or light the characters are). A font that is light is called light, while a font that is darker is called bold. There are even different shades of bold like medium, semi bold, etc. 

Ascenders and Descenders

An ascender is the part of certain letters that go above the mean line (the upper lines in ‘d’ or ‘h’, for example). Ascenders reach what is called the ascender line, which is not always the same as the capital line that capital letters reach. A descender is the part of some letters that go below the baseline. Letters like ‘y’ and ‘j’ go below the baseline and their descenders reach what is called the descender line.

Bars

Finally, bars are the part of some letters that have a line that connects one part of the letter to the other, like uppercase ‘A’ or ‘H’. Crossbars are the lines that go through the letter; both ‘f’ and ‘t’ have a crossbar.

Uses for fonts in content

It is recommended that you use a font that has Serifs for headings and titles and use sans serif for body text since it is usually easier to read. This is not a typology rule put into concrete, and you could switch them with sans serif for headings and serif for text, but I greatly recommend using one for headings and the other for body text because that makes it easier to visually organize the information and guide readers through content.

Web Design Best fonts for professional site’s body text

When judging a font, I recommend looking at all the letters in both uppercase and lowercase. 

Gill Sans

This is the font I recommend for presentations, infographics, and other documents that are designed with the user in mind. It is easy to read and still interesting without detracting from the content it provides. It is professional without being pretentious

Tahoma

This is my favorite font; I use it for emails, resumes, and personal correspondence. It is interesting, professional, and unique while still being easy-to-read. It was the default screen font on Windows almost 20 years ago, so it is familiar to people without being overbearing or overused.

Lato

This is the font I use on my website for body text and other content; it is smooth and easy to read, giving a calming feeling.  In Ux, sometimes the best design is the kind that is never noticed by users at all.

Roboto

This font is even simpler than Lato. (Notice the difference in the lowercase ‘g’s?) Roboto is for those who want a simple font with as few lines as possible. Quick, easy-to-read,  and easy to use, this font is good for a classic, professional feel while being a little different than the norm.

Verdana

This font is also simple and easy-to-read, but Verdana is a bigger font that gets readers’ attention better. This may be a cheap way to get and keep readers’ attention, but if it works, don’t mock it.

Whatever font you pick, please don’t use Helvetica or Times New Roman; these have been done to death over the years. Use Ariel if you need to use something more ‘common’, but I still recommend a different font so that your readers’ eyes don’t glaze over.

Best fonts for professional site’s Headings

To finish Web design best fonts, here are some ideas for unique fonts to try for headings on your site:

Summary:

A font is the design or a consistent way that letters in words are written. The critical effects of the type of font that content is written in are: the readability of it, the tone and character of it, the mood or emotion of it, the personality, and the branding. Some of the main parts of fonts are the serif, spine, baseline, weight, ascenders and descenders, and bars. Some web design best fonts for body text are: Gill Sans, Tahoma, Lato, Roboto, and Verdana.