Select Page

There are many design aspects to consider when building a website. Big-ticket items like the domain name, functionality and visuals tend to be first in the queue. By the time it comes to pick the best fonts, the choice might not seem like such a big deal. Don’t make that mistake. Getting the right font is a key design task. The best fonts will drive the brand image and tone and create that pull factor to the website.

How Do I Choose A Font For My WordPress Site?

Website fonts promote the business or organisational style. The best fonts convey the right image to website visitors.

If a font is out of step with the brand values, products or services the potential customers’ confidence can be affected.

The best fonts will make visitors to a website feel that this is a good place to be.

The website will look good and the content resonates with what the visitor is looking for. Visitors will not only stick around and click through the pages, but they’ll also return.

The fonts used have a big role to play in making your website a comfortable digital space to be in.

Think about your offering

To choose the right font, think about your website content, product or service.

Established, traditional fonts convey trustworthiness and reliability. These are great for business to business sites.

Consider your target market

Think about your target market segment and how a font reflects that demographic.

If your intended customers are young and on trend, a traditional font might not be the way forward.

If your product or service fits into the creative sector the font might need to do a different job. Your content may benefit from a font that symbolises creativity, imagination and style.

What Are The Best Fonts For Website Design?

The short answer is that the best font is the one that aligns with the target market and conveys the brand’s values.

A good font doesn’t draw attention to itself.

In body text, it’s important not to have over-engineered, fancy fonts. They can be hard to read as well as jarring for the visitor, and this could lead to a high bounce rate.

Plenty of fonts are tried and tested and considered a safe choice for website content. These trusted fonts can be divided into serif and sans serif fonts.

Serif fonts

A serif is a small foot at the bottom of the letter. Serif fonts are some of the earliest fonts. They project a traditional and familiar look and feel.

Examples of well-established serif fonts include Times New Roman, Garamond and Georgia.

Sans serif fonts

Alternatives are the sans serif fonts.

These are the family of fonts without the small foot at the bottom or top of the letter. Examples of these are Arial and Verdana.

Cursive fonts

If your website is more visual with less body text, cursive fonts could be used.

These are fonts that echo handwriting with loops above and below the line.

This style of font works well with websites that want to evoke nostalgia, individuality or romance.

How Can I Make Text Easier To Read On My Website?

Screen reading is not the same as reading on paper.

It’s more tiring on the eyes.

Making sure your text content is easy to read is a kindness to website visitors.

It might also mean they stay longer, engage better and are more likely to return.

Font size

As well as font choice, size is an important factor.

If the font size is smaller, try and find a sans serif font that fits the website design.

The unfussy clean lines of a sans serif font are easier on the eye.

Line and letter spacing

The amount of space between the lines also helps with readability.

Left alignment is better for longer sections of body text.

Centre or right alignment should only be used for short sections.

Justification of text is ok, but as it stretches out the lines, it can affect the spaces between words.

Avoid this where there is a lot of body text.

Upper case

Use upper case sparingly.

It should appear where needed for grammar purposes and as part of titles or logos.

Whole paragraphs written in upper case is hard for the reader and should be avoided.

Contrast

Finally, make sure that the contrast between the background and text colour is readable.

Simply put, a pale text colour does not stand out enough on a white background.

Dark-coloured text does not stand out on a black background.

If you feel uncertain about contrast, WordPress guidance states the ratio should be 4.5 to 1, for normal text to background for the best readability.

For large text 24px or 19px in bold the ratio can be 3 to 1.

If you are uncertain, use a colour contrast checking tool.

What Size Should A Font Be On A Website?

As a general rule, 16 pixels or px is the minimum size for main body text.

Where there is a lot of text, it is advisable to consider using 18px, or even 20px for optimum readability.

Font size is also dependent on the level of interaction the reader has with the page.

Where a lot of information in various forms is on the screen, think Twitter or your email inbox, smaller is better.

If the font is too large, it’s just too difficult to read and navigate effectively.

If there’s a lot of informative text, with visuals, consider going down to 14px and use different font sizes for headings.

What Are The Best Fonts For Mobile?

Roboto is the default font on Android and makes a good choice.

It’s not compulsory to use the default.

As an alternative consider San Francisco, Helvetica Neue. Other solid options include Arial, Helvetica and Georgia.

16px is the minimum recommended font size for mobile.

What Is The Most Common Font Used On Websites?

There’s a clear top three here.

Arial, which is a sans serif font is the most frequently used.

The next most frequently used is Times New Roman, a serif font.

Coming in third place is Helvetica.

Should I Use The Same Font As My Logo?

Your logo needs to pack a punch.

Using the logo font in your website content is a design no go area.

The logo and the website text content are doing two different jobs. Each element should have a separate identity.

Your logo is all about high impact and brand identity.

The text content is about product or service information and engaging readers.

Logo fonts do not make for high readability in body text.

Can You Use Any Font On A Website?

WordPress has a Use Any Font plugin.

This means that any licensed custom font can be used in your website design if required.

This is an option for those website designers who want to stand out from the crowd a little.

Just be sure to keep all the usual rules in mind.

Readability shouldn’t be sacrificed in the pursuit of style. Keep both elements in balance.

It’s always a good idea to get an expert opinion as well or get some informal feedback.

Are Web Safe Fonts Still Necessary?

Every device has its font selection pre-installed.

Depending on the operating system, the selection can differ.

When browsing websites, it’s possible that due to these pre-installed fonts, you might not see the intended font on the site.

This is more likely to happen if the website designer used a custom font not pre-installed in the browsing device’s operating system font selection.

As the site visitor, you might not know this has even happened.

The content just reverts to a pre-installed default font. However, this means you won’t have the visitor experience the designer intended.

Choosing a web safe font

Web safe fonts are a small selection of fonts common to all operating systems.

Choosing a web safe font means the designer can control the visitor experience across all devices.

The best fonts that are web safe include the usual suspects: Arial, Times New Roman and Roboto.

It’s not necessary to use web safe fonts but if you don’t, it’s possible not all your website visitors will get the desired experience.

Testing the site across devices might help with this decision.

How Many Fonts Is Too Many?

More than three fonts is too many.

Between two and three is considered the optimum number.

Try and keep the different fonts from the same font family.

There should be no more than four different sizes of fonts on a site. WordPress themes already have four default text sizes for different types of header.

Alter the size to suit the needs of the website.

Font Choice Is Critical To Good Design

The best fonts will convey the right brand personality to the target market or reader.

Test the font choices out with people in the target group and get an objective opinion. Don’t let personal preferences cloud your view.