Week 12: Typography and Web Design

Almost all of us are aware of the importance of certain design elements in web development, such as image placement, heading organization, and content structure of the website. But there is one design element that few people think of when it comes to creating websites: typography. 

Font choice and typography are a crucial part of web design.  They allow you to influence your audience’s emotions, choices, and also are an important part of building a brand and creating a positive user experience.

Why are Fonts Important?

Typography choice is crucial because of a few reasons. Visitors to your website will judge it instantly, and they will make judgements based on looks rather than the actual content of the site. Fonts play an important role in making your site stand out from competitors and they also bring all the elements of your site together to create a cohesive design. 

Fonts are also important to your site because they can help you develop a brand. By choosing different fonts, you can create a unique, appealing website that flows together and also represents your brand or company in a distinctive way. A great example of this can be found with IKEA. By using a variety of sans-serif fonts to convey modernism and minimalism, the website gives us that familiar feeling uniquely associated with IKEA.

A screenshot of the IKEA website homepage. Shows the variation of sans-serif fonts on the site.
IKEA’s homepage, showcasing the different font variations

Another important part of web design is accessibility. Fonts can determine the readability of your site, and if users can’t easily read your material, they are most likely going to turn away in favor of a more accessible website. This is important to keep in mind because although the goal of a brand is to strive for individuality among its competitors, it’s also good not to stray too far from the basics as it can make it difficult for your audience to access your content. Remember: Typography exists to complement your content and make it easier for readers to have a better time on your site.

How to Choose Good Fonts

I know it can be exciting to dive in and start pairing fonts together for your website right away. But before you do that, there are a few things you need to lay out. 

First, decide what kind of content you will have on your site because you want your content to match your font choice. Does the typography need to be linear and professional or is there some wiggle-room for a little bit of fun? This is important to decide right off the bat because this decision will determine the tone and voice of your website.

Fonts for Different Contexts

  • Serif fonts can convey: tradition, respectability, reliability, comfort
  • Script fonts can convey: elegance, affection, creativity
  • Display fonts can convey: friendliness, fun, uniqueness, expressiveness
  • Modern fonts can convey: strength, style, chic, progressiveness
  • Sans-serif fonts can convey: stability, objectiveness, clean and modern minimalism

A good thing to keep in mind when pairing fonts together is that you are aiming for contrast, not two things totally different from one another. There should be noticeable differences between the two, but there should also be some similarities in order to keep your website cohesive and united. 

When fonts are too different from one another, it can affect the readability of the site, and also distract the user. For this reason, it’s best to keep it simple. 

While varying fonts on your site is a good thing and can be an invaluable tool for making your website distinguishable, you also don’t want to have too many different fonts on your site. It’s best to keep the number around two or three so that readers don’t get distracted and the website still flows smoothly. 

If you want or need to use more than just the two or three, instead of choosing a whole different font, it would be a good idea to consider using variations of the fonts already on your site. An example of this would be using bold or italics. You can also utilize size variations as well. 

Good Font Combinations

Now that you’ve laid out the groundwork for your website goals and the type of font you’ll need to use, we can start pairing together some different options in order to create a unique look. There are many different combinations, with thousands of font options already included in different software and website creation tools. Here we’ll go over just a few of the most common and practical font pairing combinations for websites. 

1. Archivo Black & Roboto

Example text of font pairing Archivo Black and Roboto

This combination is good for websites with a professional style. These san-serif fonts pair well together because the boldness of Archivo Black really accenentuates the feautures of the Roboto font. I see Roboto used in headings a lot of the time, but it’s interesting to see it used as a body text. This bold combination ensures that your audience will be able to read your content with ease, which is ideal for creating a positive user experience.

2. Libre Baskerville & Source Sans Pro

Example text of font paring Libre Baskerville and Source Sans Pro

This serif and sans-serif combo creates a unique atmosphere in a website. Libre Baskerville gives off a tone of creative professionalism when paired with the body text in Source Sans Pro. This pairing is great for creating contrast throughout your website and grabbing your readers’ attention. Personally, I think pairing sans-serif fonts with another serif font as a headline makes for a crisp, clean look that’s great for any kind of company or business.

3. Lora & Merriweather

Example text of font pairing Lora and Merriweather

These two fonts are very similar in nature to one another, yet they compliment each other beautifully. This combination features two very popular serif fonts: Lora and Merriweather. This pairing is extremely legible and great for websites with lots of text. It’s not too busy, but it keeps readers engaged with your content.

4. Open Sans and Source Sans

Example text of font pairing Open Sans and Source Sans

Steering away from the cleaner, more professional typography combinations brings us to the pairing of Open Sans and Source Sans. Open Sans is a warm, inviting font that is perfect for sites with a unique and creative theme. It’s cute, fun, and allows for a bit of deviation from the norm.

Additional Font Pairing Resources

Although the combinations listed above are widely popular and are all great choices for any website, there are thousands more combinations to choose from. If none of these combinations speak to you, here are some additional resources to help you find suitable typography combinations for your websites.

  1. Elementor Blog
  2. Quicksprout
  3. Canva
  4. Inkbot Design
  5. JUST Creative

And if you still can’t find something satisfactory to your taste, don’t be afraid to create your own! With thousands upon thousand of fonts and typefaces out there, there are millions of different combinations and pairings. Don’t let this list limit you in what you can and can’t do. There’s always more, and with the ever-evolving landscape of web design, who’s to say your new font pairing creation won’t be the next hot combo in the typography world?

Sources

UX Planet

Website Builder Expert

Quicksprout

Elementor Blog

This Post Has 8 Comments

  1. Hey, Kennedy! I appreciate how you break up your blog post by explaining the importance of typography before diving into specific font pairings. You make a great point that many users will notice the typeface before the content, so it’s important that they match in tone. A carefully crafted typeface creates a visually pleasing page, but it also gives the site unity. Fonts should juxtapose each other, (for example, a serif font with a sans-serif) but the pairing will fail if the fonts set different tones. I think it’s important to think about preconceived notions people already have about fonts. Helvetica is a big topic for debate in the design world. The font has become so universal, some argue that it is becoming too “standard” or “invisible.” This article (https://www.monotype.com/resources/articles/complicated-legacy-helvetica) explains the rise of Helvetica in the 60s and 70s, it’s role as the “default” font, and it’s inevitable future in design. (There’s a reason the font gained popularity; it looks good!) I never knew so many signs and logos use Helvetica. This other article (https://gillde.com/30-sample-of-helvetica-font-used-in-giant-brands/) gives some examples of big brands that use the font (like Target)! Your font choice is also your brand identity, so it’s important to choose wisely, set the right tone, and create unity across your website. Great post!

  2. Hi Kennedy!
    I really appreciated your post about typography. I had not considered the importance of font pairings, especially not in the way you found them. I agree that two or three fonts are a good limit and that further font choices should be limited to bold or italic versions of existing fonts on a website. I often wonder which fonts pair well together, so I especially appreciated having a guide to this process. One thing I wonder is about fonts for title text on modern websites. I’ve noticed a trend of large, white, sans-serif title font on many websites I visit. Interestingly, these large and blocky title fonts are often paired with small and thin body paragraph font – which creates a sort of contrast. This image ( https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.pinterest.ru%2Fpin%2F598064025497775703%2F&psig=AOvVaw0jCaBpJy8ofDYkC8KYArF7&ust=1637173854995000&source=images&cd=vfe&ved=0CAsQjRxqFwoTCNCgj4TCnfQCFQAAAAAdAAAAABAD ) shows such a font pairing. I think this is especially helpful for companies with some short and strong empathic messages to be displayed as title or h1, alongside longer, more verbose written content.

  3. Hi Kennedy! I appreciate your post on typography and its importance in web design. The choice of typefaces on a website really do determine the audience’s attitude towards it. I like how you offered a variety of compatible typeface pairings and included images of these pairings. This is super helpful, and I might use a few of these in my own professional writing! I also really appreciate the list of sources that can help us find additional font pairings! There is so much more to typography than just the typeface choices. I found this great article that talks all about the different aspects of a typeface and offers a list of website typography guidelines (https://blog.hubspot.com/website/website-typography). Aside from the difference of serif or sans serif in a typeface, different typefaces can also have different kerning (the horizontal space between two characters), tracking (the horizontal spacing between all characters in a line), and leading (the vertical spacing between lines). The article also suggests using sans serif fonts for body text as it is more readable in a digital context.

  4. Kennedy, I absolutely love the conversational approach you took with this thread. Typography is such a delicate yet significant factor to web design, but you made retaining the information so easily understandable and even enjoyable! Your images really added to the overall credibility of what you were explaining, and the combination of the different typography options was incredibly insightful (especially because prior to this class, I didn’t really know much about the correct pairing in typography)! After reading your post, I delved deeper into the influence typography may have in web design and how it can alter the perception of the user. Interestingly enough, I stumbled across this article: https://www.velocityconsultancy.com/importance-of-a-typography-website-design/. It goes on to elaborate the significance of typography and how to decide which of the thousands of options available is applicable to what your website is about. The interesting aspect from this that I believe ties well into what you were explaining is how certain typography will add “weight” to your words. The choices you make regarding certain key words or focus points can guide users into determining the purpose of what you want them to retain. As we’ve constantly been discussing this semester, first impressions are everything when users engage with your website; and something as minor as the inappropriate typography can derive users from your website.

  5. Hey Kennedy, great post! I thought I knew how to employ the right fonts for different contexts, but your simple list of how each one can be classified and used proved me wrong. Your breakdown of how to pair fonts and what ones to use in certain situations is extremely helpful and something I wish I learned more in my past writing classes. I also like how you added additional font pairing resources. I use Canva a lot and can say it is extremely helpful and has a great number of fonts and font combinations to choose from. Another font resource I have used in the past is Typewolf (https://www.typewolf.com/), which showcases current and trending fonts and includes recommendations for fonts that could fit a specific site.

  6. Hey Kennedy! I really enjoyed this post, I used to be a part of yearbook and before starting the process of building the book we had to pour over fonts for hours until the class could agree on one. I thought that your breakdown of fonts that work well together was very useful and I think I will refer back to it again when picking out fonts for our webpage! I also thought that explaining the different categories of fonts and when they are commonly used was helpful as well. I thought this article that explained the process of picking compatible fonts was very useful, it also mentions kerning and the effect that can have on the readability of the font. https://www.tailorbrands.com/blog/pairing-fonts-like-pro thank you for a great read!
    Maddie Jones

  7. Hi Kennedy! I really liked your blog post this week, I think typography plays such an important part and people don’t always realize that. Like you mentioned, there’s fonts for different context. I think that list in your post is super helpful for us as we start to create our website. It’s a great guide that we can use once we understand how we want our audience to feel. All the examples you gave are also beneficial. Thank you for the font pairing resources as well! This website, https://cxl.com/blog/the-effects-of-typography-on-user-experience-conversions/ , talks about how readability and comprehension can be affected by the typography. This is important to remember, like you mentioned, since we’ve been discussing accessibility for all. Choosing things like this is definitely about more than which font “looks cool”, which is a notable thing to remember when designing anything with words. Anyway, your blog is beyond helpful and organized really well. Good job!

  8. Hey Kennedy!
    I really enjoyed getting to read your blog post today! You are right when saying typography is so important, I think one big thing that stands out to me is when a brand or business uses the same typefaces. It gives the look that the brand is unified, and consistent. I really liked also how you formatted your specific post. It was very to the point, and easy to read. When looking for another site to link here I came across the article “What Are the Benefits of Web Fonts?” which goes much more into detail about typography and how it is overlooked a lot. I definitely recommend checking it out, I really liked when they talked about how some fonts are good for print but not always good for the web. Nice job!
    URL – https://www.windmillstrategy.com/what-are-the-benefits-of-web-fonts/

Leave a Reply

Close Menu