How to Master Type and Typography for Web Design

Carved blocks of A's in different typefaces.
Image by 12138562 from Pixabay.

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?
Explanations of serif, sans serif, script, and display fonts.
Image taken from Medium. Article written by user dsignosour.

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.

Open Sans Semi-Bold is the header font, and Roboto Regular is the body copy font.
Image taken from Quick Sprout. Article written by Quick Sprout Editorial.

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

This Post Has 4 Comments

  1. Katharine, your blog post is really well done. I love the tone you took and your bold honesty, it works well in your post. Good use of the bulleted list of Dos and Do Nots. It was very effective in conveying useful and practical information. Your use of examples throughout makes your blog post even more stronger. It makes the content interactive with the reader, and ensures they understand what you are referring to. Additionally, I like how you ended your post with reference to another blog article posted on our site; it was smooth and effective. While reading through your article, it made me think of the documentary “Helvetica” by Gary Hustwit. The documentary takes viewers through the history of the typeface Helvetica. Here is a link discussing the documentary,

  2. Hello, Katharine! Your blog post this week on typography was interesting and taught me a lot about how to properly utilize typefaces. I learned a lot about typefaces and fonts in a previous course, and your post supported those ideas and added new ones. One aspect I liked was your section on web-safe fonts. I have dealt with many fonts that didn’t transfer well, so hearing your tips was very helpful. Your post’s organization is structured nicely with headings/subheadings and was easy to follow. Your usage of resources was implemented well and was done in a way that supported the reading. I also liked the tips you gave on improving our typography and will have to use them in the future (like for our project!). From additional research, I found an article about changing the font type, color, and size on WordPress. It offers a lot of information on how typography works on WordPress, and different ways to use fonts! I thought this was very important seeing as it goes with your idea of typefaces and strategically utilizing them in web design. Additionally, we have just started using WordPress, and for many, this might be their first time, so this info might be useful. Overall, I enjoyed your post!


  3. Hey Katharine! Your typography blog post was very well written and organized. You did a great job using images to break apart your text and furthering the points that you made. I like that you used bold text within your lists to highlight both the “dos” and “don’ts” along with bolding the most important points in the list. It would make it super easy for someone to skim through to get the main takeaways from your blog post. I’m glad that you talked more than just about kinds of typefaces and font families to also go into spacing and contrast. As a beginner designer, it can be tempting to make text super unique by using crazy colors and intense style choices, but these can make it difficult for the user to read! When you mentioned accessibility in your blog post, it made me think about how some font families have been created specifically for those with dyslexia. These font families (such as the dyslexie-font) focus on the weight of character strokes to make it easier to read!
    Here is the website about the dyslexie-font:

  4. Hello Katharine!
    I really enjoy how your blog was written. Your images created a nice flow that helped me thoroughly understand what different design elements provide to a website. The typography, typeface, and font differences is something I have always struggled with grasping and your explanation clarified it for me. The “Do” and “Don’t” section was incredibly effective and created a nice list of rules. I would maybe format it as a heading with “Do” and list everything underneath it. The same goes for “Don’t” I think this would improve the reader’s understanding. I found it difficult even with the bolding to follow along. Otherwise everything was amazing.
    Here is another article that provides more information about typography in general:

Leave a Reply

Close Menu