Design

Demystifying Typography: Choose the Best Fonts for A Website

3
Min Read Time
Demystifying Typography: Choose the Best Fonts for A Website

With so many web fonts to choose from, it can feel a bit overwhelming to pick the best fonts for a website. Fonts are important because they tell a story through the visuals they provide. Fonts are used to create a sense of comfort, engagement, and trust. By using fonts correctly, you can give your website a specific type of feel to reach your target audience. This article will explain the basic typeface characteristics and when to use them, and how to use fonts to make your site more readable. 

Typefaces

To start, let’s demystify the different categories of typefaces and their characteristics. There are five classifications of typefaces: serif, sans-serif, script, monospace, and display. Each typeface is used for different article features and evokes a different response from the audience. Understanding the different typefaces is important when choosing the best fonts for a website.

Serif

  • What it is: A serif is a stroke added to the beginning or end of a letter 
  • Communicates: Traditional and sophisticated 
  • Used for: headings, titles, logos, and body text
  • Examples: Georgia, Times New Roman

Sans-Serif

  • What it is: “Sans” is French for “without.” Therefore, Sans-serif fonts are typefaces without strokes added to the beginning or end of the letter. 
  • Communicates: Clean, minimal look
  • Used for: headings, titles, logos, and body text
  • Examples: Arial, Helvetica, Product-Sans, Poppins

Script

  • What it is: Imitates the natural strokes of handwriting. It can range from casual to formal
  • Communicates: decorative effects
  • Used for: headings 
  • Examples: Papyrus
  • Use sparingly

Monospaced

  • What it is: Every letter occupies the same width on the screen. Monospaced typefaces include both serif and sans-serif fonts 
  • Communicates: Originally used on typewriters. Therefore, it evokes a vintage feel.
  • Used for: Today, it’s mostly used to display code. 
  • Examples: Lucida Typewriter, Courier

Display

  • What it is: Decorative, novelty fonts. Font appearance varies widely 
  • Communicates: Unique feel
  • Used for: titles
  • Examples: Nexa-Rust, Monoton

Font Size

Font size is very important when creating web content. In addition to making content legible to the reader, font size is also used as a way of communicating with the reader. For example, the following are situations when you may consider increasing the font size:

  • Create a sense of importance and draw the reader’s attention
  • Know your audience: will they need a larger font to read the material?

When choosing the best fonts for a website, make sure to view the font in different sizes. Not all typefaces are suitable for body and headings. Some fonts are only legible at a larger size and should be reserved for headings. 

The following are tried and tested font size guidelines that Choquer Creative uses for our content:

  • Title size: 34 pt. This should be the biggest size on the page
  • Body text: 17 pt (default)
  • Links: 17 pt
  • Secondary text: 15 pt (2 pt smaller than the default size)
  • Captions: 13 pt

Text Hierarchy: Putting It All Together 

Now that we have the basics down to choose the best fonts for a website, let’s dive into the text hierarchy. To improve navigation and make your content more digestible, the text should be broken up into sections with headings. Text hierarchy allows readers to easily distinguish between headings and content. The reader should be able to scan the body of text and know which section to read by using the heading. 

Text hierarchy is implied with font sizes and font styles. However, to create a visually appealing and cohesive web page, limit the number of typefaces. We recommend using no more than two typefaces. For example, you can create a text hierarchy with only one font and increasing sizes. 

Generally, the following format should be used for a text hierarchy: The title should be the biggest size on the page. Following the title, there should be headings of increasing specificity and decreasing size (Heading 1, Heading 2… etc).  

Article Take-Aways

At this point, you should know the different typefaces and when to use them, font sizes, and when to use different sizes and implement the text hierarchy. The biggest takeaway from this article is that there’s more to choosing the best fonts for a website than deciding on a serif or sans-serif typeface. You also need to consider when it’s best to use these fonts on your webpage, and what the right style and size are for your website. Choosing the best fonts for a website is important to create a professional and engaging virtual presence for your audience.

At Choquer Creative, we use research-backed by Google and Apple to help businesses optimize their typography. Contact us today to optimize your website!

Related Stories

Sign Up For Our
Learning Hub Weekly Blog

Dive into one of our articles to learn more about web development, SEO tips & tricks, and how you can grow your business through your website.

Awesome! More content!
Oops! Something went wrong while submitting the form.