Blog

When you think about the word “typography,” what comes to mind is probably an elaborate letter with a lot of visual flair. Maybe you’re picturing one of the A’s in the image above, one that has underwent so many changes it hardly looks like an A anymore. But truth be told, that meaning of “typography” is incorrect—as well as the other two words often grouped with it, “font” and “typeface”.

For non-designers, all three words are typically interchangeable. However, if you are planning on designing anything digital—and I do mean anything, whether it be a memo document or a website—it’s crucial for these definitions to be correct.

To summarize user Humblejack’s article about type terminology, typography is the way type is arranged to make written content legible and visually appealing. An example would include a designer’s decision to decrease the gap between two words.

A typeface is the set of unique design characteristics given to specific letters, numbers, and symbols. This paragraph text is displayed using the Montserrat typeface. If I were to switch this sentence to a different typeface, the letters would look different; maybe a C wouldn’t look as rounded.

Finally, a font is the digital representation and rendering of a typeface. The specific font for this text “Montserrat Light”. For a bolded word, the computer may catalog it under “Montserrat Light Bold”, and an italicized word may be listed as “Montserrat Light Italics”. This is how non-designers get confused and mix up the terms; a font is the rendering of a typeface, but a typeface is not a font.

Great, you’ve moved up to designer status now. But as you sit in your office chair, staring at your default website template, you end up pondering this question: How can I choose the best fonts for my project?

Picking the Best Font

Before you ask, yes, there are fonts that fit certain web projects over others. When choosing your fonts, you need to think about how their appearances convey emotion. Fonts, and by extension the possible emotions, can actually be sorted into groups. The two most important categories include:

• Serif: Fonts with extra lines at the end of a stroke. Serif fonts look formal and serious.
• Sans serif: Fonts that do not have extra lines at the end of a stroke (like Montserrat!). Sans serif fonts come off as welcoming and friendly.

The remaining categories differ from designer to designer, but for this blog post, I will be following Lucy Carney’s types of fonts . Her other two groups of fonts are:

• Hand-written script: Fonts that appear to be written by a human hand. Script fonts heavily differ on both appearance and feeling; some are meant to look like formal, elegant letters written in cursive. Others attempt to replicate a real person’s handwriting as much as possible for that humanizing experience.
• Display: Fonts that vary in design and are created for large headings and titles. These decorative fonts try to stand out from the body text as much as possible. Because of how broad this category is, the emotion conveyed differs from font to font. Like the example in the image below, display fonts could have serifs, but the characters could only be outlined. In this specific case, the rigid all-capital letters reminds me a movie marquee. Perhaps this font could be added for a film review website?

Now you have to select which font group would best fit your project. If you think it’s too daunting to experiment yourself, real designers have determined the most successful fonts. These fonts are selected based on their popularity, appearance, and the fact they’re web safe. A web safe font is one that is universally installed across all electronic devices. This allows web pages to load faster (pleasing site visitors), and ensures each user is experiencing the content in the same way. If your content isn’t utilizing a web safe font, and if a user doesn’t have that font installed on their device, it will revert to a back-up selection. In case you want an extensive resource, Maddy Osman’s blog goes in-depth about web safe fonts.

Alternatively, designers have also figured out which fonts look best in combination with another. This article from the Quick Sprout Editorial covers ten recommended font pairings. Some options you could try out for your website include Cinzel and Raleway, Merriweather and Lato, and Open Sans and Roboto.

Let’s say you do want to try experimenting. Carney’s article also includes some of her top tips for font selection:

• Do consider your brand. Will your target audience appreciate a whimsical header, or are they working professionals who want to see a formal database?
• Do not use tacky fonts. Papyrus, like the name implies, is a typeface created to reflect ancient civilizations. It is one of the only fonts you tend to see in titles of Egyptian mummy movies, and is extremely over-used at this point.
• Do consider readability. Even though that script font is elegant, the letters may be so squished together readers can’t pick them apart.
• Do not add too many fonts to your project. Adding more than a few fonts to your website will also come across as tacky and unprofessional.
• Do consider accessibility. There are specific guidelines a web page should follow so that visitors with visual impairments can still enjoy your content. The World Wide Web Consortium has made a thorough document covering which web-accessible guidelines you should keep in mind, like ensuring both of your fonts’ widths aren’t too thin. Even if you select similar fonts (such as two serif or two sans serif fonts), they can still look visually pleasing and be accessible as long as you create enough contrast.

You’ve finally selected your fonts, you’ve written your web page content, and you’re ready to hit that “publish” button—but there’s still one more step you have to complete. You need to finish optimizing your typography.

Improving Your Typography

Good typography makes the act of reading effortless, while poor typography turns users off… In other words: optimizing your typography also optimizes your user interface.

Nick Babich, “10 Tips On Typography in Web Design”

Many new web designers are unaware of some simple typographic recommendations by designers like Nick Babich. By following them, the appearance of your website will drastically improve. These rules, while occasionally time-consuming, can help elevate your project from novice to advanced. Besides the tips shared previously, here are a few extra things you want to keep in mind:

• Limit your line length. There should be about 60 characters on each line of text if you want the text to look more natural, like in a book. If the line is too short, the rhythm will feel off. If the line is too long, users won’t be able to focus.
• Double-check that your type is legible on smaller screens. Remember, not every user will be looking at your website with your exact screen size. Even if your site isn’t optimized for mobile users (which, in this day and age, it should be), try testing on smaller and larger monitors. Accessible Web states how your text should be no smaller than 16px.
• Don’t shrink your leading. “Leading” refers to the white space between each line of text. To increase comprehension, try increasing it by at least 30% more than the character height.
• Avoid blinking text. Text that flashes could trigger seizures in susceptible individuals, and is just plain annoying.
• Account for color blind users. Red and green color blindness is the most common form of color blindness. To avoid confusion, don’t distinguish information in these colors without adding an additional symbol. For example, in a form’s description you could write, “Required sections are colored red and marked with an *”.
• Test for improper color contrast. When you’ve been looking at the same color palette for hours on end, your eyes naturally start to pick out content as more time goes on. But to new visitors, they won’t share the same experience. Small text should have a contrast ratio of at least 4.5:1 against a background. Large text should have a contrast ratio of at least 3:1 against a background. To test your colors, my preferred color contrast checker is here.

Now that you’ve double-checked (or fixed) your web pages, you’re all set to make it public for the world! If you’re confused about how designers seem to know these tricks off the top of their heads, my honest recommendation is to simply play with type. Even if you don’t have access to fancy software, you can just open up your computer’s notes program and test out different font combinations. Additionally, there are millions of other resources out there that can provide you with even more help. Why not try checking out my colleague’s blog article on the Gestalt principles of design?

---

Resources Used

What is the Difference Between Typography, Typefaces, and Fonts?

10 Best Fonts for Websites — The Ultimate Guide to Choosing the Best Font

We always find our Type -Design Culture at MICA

The Ultimate List of Web-Safe HTML and CSS Fonts

The Best Website Fonts That Go Together in 2023

Web Content Accessibility Guidelines (WCAG) 2.2

10 Tips On Typography in Web Design

Minimum font size?

Contrast Checker