Popular fonts for websites today

Website fonts are often overlooked when a business builds its site, and that is a mistake. Everything that appears on a website should be planned, and the right font says a lot about your brand and shapes how people experience your pages. So which fonts work well on a website? Read on as MONA Media walks you through the details below.

Why font choice matters on a website

The right font makes a website look more professional. It also ties the site to your brand identity, so your brand looks more polished and earns more trust from visitors.

Imagine visiting a company website to learn about it, only to find the text set in a dull or dated font. That hurts the experience a lot, and most people won’t bother reading further. Headings set in an overly fancy font, with no restraint, are just as off-putting.

That’s why choosing a font deserves the same care as choosing images and colours. It keeps your brand looking consistent and professional, and it makes the site easier to use.

Types of web typography

On a website, text does more than carry content. It directly affects how people use the page. Headings, body copy and call-to-action buttons each play their own part in guiding readers and keeping them on the page. Once you understand the different types, it gets much easier to write content that is clear, readable and effective. This also matters when you run full-scope website SEO services, so your site works well for people and ranks well on Google.

Typeface vs. font

In design you often hear two terms: font and typeface. Put simply, a font is a specific set of characters. There are many fonts, and each one belongs to a typeface. For example, in Microsoft Word one of the fonts we all know best is Arial Regular.

In design, when you want to capture the exact mood of an image and tie it closely to a brand or message, font matters a great deal. Vintage or nostalgic imagery, for example, often uses a calligraphy font. Today, websites and graphic design tend to favour minimal, sans-serif fonts with thin strokes.

Typeface is the font family: a group of fonts that share the same design. It is a broader idea and is not limited to one shape or size. The Arial typeface, for example, includes Arial Black, Arial Bold and so on. These are all basically Arial, but each differs from the original in some way, so they are grouped into one “family” (font family), which is called a typeface.

Grouping website fonts this way does three things:

• First, fonts of the same kind with different weights or styles sit together, so they are easy to find.
• Second, it keeps your typography consistent. Example: A site that uses Arial as its main font might set article titles in Arial Black, subheadings in Arial Bold and body text in regular Arial.
• Third, because everything stays consistent, the content keeps its “charm” throughout the design.

Common font categories

You don’t need lots of special fonts to make a website stand out. Using the right ones in the right places is enough. Here are some common, good-looking website font styles to consider:

Default fonts

Default fonts usually have a simple, clean design that is easy to read. You can also add a font of your own. On most websites, though, body text is set in serif or sans-serif fonts.

Font Serif is a web font style with fine strokes and small strokes (serifs) at the ends of letters. It is common in printed documents, official records and scientific papers. It suits news sites and other sites built mainly to share information, and it gives content a more formal, refined feel.

Sans serif is close to Arial: a font without serifs. Its strokes are even and slightly thicker than a serif’s. It is also used mainly for body text.

There is no rule saying a website must use sans serif or serif. But marketers have found that news-style sites with long articles usually stick to these two, because they are easier on the eyes. These two default styles also make a site look more formal and professional. Creative sites, on the other hand, should play with them more, for example by changing colours or adding effects, to match the character of the site.

Symbol fonts

Symbol fonts are often used to mark out special content. Symbol fonts are mostly decorative. You may know them by names like Webdings and Wingdings. They are hard to use on the web because they contain only special symbols. Some sites that offer sample documents or forms may use them.

Our advice is to use symbol fonts sparingly. Even though they are meant to decorate, the symbols are plain and haven’t evolved much, so they rarely add much visual appeal. Used carelessly, they can distract readers from the content and make the page feel cluttered.

Custom display fonts

When building a website, a business can also create its own custom font . These fonts are designed specifically for the brand and are more distinctive than default fonts. They decorate, carry content and get the company’s message across at the same time. A custom font carries a strong brand signature, which helps people connect with and recognise the brand. These fonts are rarely used for body text and work better for headings. They also show up in website graphics, billboards and the like, which is why they are often heavily stylised.

Another stylised font type is handwriting fonts. These are designed to look like handwriting. They are more restrained than custom display fonts but still largely decorative. Handwriting fonts give a soft, relaxed feel. Sites focused on messages, humanitarian work or charities can consider them, and fashion sites can use them for an elegant, delicate look.

What to look for in a website font

There are many fonts to choose from, and every business will approach website designin its own way. Still, there are a few common requirements you can use as a guide. They give you a solid basis for making a better choice:

First, the font must be clear and easy to read. A typical size is 12 to 14 so readers can see the text comfortably without leaning in to the screen. Use a regular font for article body text. Avoid decorative fonts across a whole article, as they tire the eyes. Also avoid using too many symbols, which pull readers away from the main content. Colour and formatting need the same care.

Second, decorative fonts should only be used or created to fit the website’s concept. Be careful with decorative fonts. A special font that clashes with the concept of the whole site does nothing for your brand identity.

Finally, everything needs to fit together. Brand imagery, colours, layout, site concept and fonts should all fit together from the start. Use fonts from the same typeface for your site content. That gives you variety while keeping everything consistent.

10 widely used fonts

Below is a list of Vietnamese-friendly fonts that are widely used on websites, put together by MONA. You can use them as a starting point for your own website content:

Arial

Arial is a font almost everyone knows. It belongs to the sans-serif group and displays content clearly and legibly. If you simply want content that is easy to read and user-friendly, Arial is the best choice.

Courier New

Courier New was the go-to font for newspapers and old film scripts. Like Times New Roman it is a serif font, but it doesn’t feel as dull or dated. You can use it for certain headings or special content. Courier New can give an artistic, slightly vintage feel.

Times New Roman

Another familiar font is Times New Roman. It belongs to the serif group. Its simple design makes your content easy to follow. Some people now feel it looks dated, especially on modern business websites, so you may want to consider a fresher font for your site.

Verdana

Another sans-serif font like Arial is Verdana. It is easy on the eyes, with thin strokes, but slightly wider than Helvetica or Arial. It is often used for articles on online news sites.

Tahoma

Tahoma is another sans-serif font, simple and formal, which is why it is used on most mainstream websites. What sets Tahoma apart from Arial and Helvetica is its tighter letter spacing, so text looks more compact and less stretched out.

Helvetica

A sans-serif font similar to Arial, but Helvetica with thinner strokes, and highly rated by Vietkey. Many recent minimal, modern designs also use it. Helvetica looks good and, above all, elegant. It is still easy to read and never so thin that it strains the eyes. If Arial feels a bit “heavy” to you, try Helvetica instead.

Calibri

Also a sans-serif font. Calibri feels lighter and younger, and it works especially well for academic content.

Garamond

If you read English books or textbooks such as those from Oxford, you will often come across the font Garamond . It is widely used in education, so you can draw on that familiarity for an education website. Use it in moderation, though, for headings or to highlight a passage.

Georgia

If you read English-language newspapers such as The New York Times or The Jakarta Post, you will often see their websites use Georgia for body text. It is fairly close to Times New Roman but a little more formal. It is used less often because its characters vary in size. One tip: don’t pair it with Times New Roman, as the contrast is too strong and looks off.

Bookman

Font Bookman originally had a stylised design and was later simplified to make it easier to use. It is also widely used.

Those are the details on the website fonts most widely used today. We hope this helps you pick the right font for your site. In addition, MONA Media is a provider of website design service with a strong track record, so you can trust MONA with the fonts and design of your website. We will build a modern website that gives users a great experience and reflects your company’s identity. Contact MONA via hotline 1900 636 648 or email info@themona.global for advice and answers to your questions.