Typography in Web Design: Choosing Fonts for Readability and Aesthetics

When you are planning the typography in web design, you need to consider where to start, how it should look, and how easily it can be read. You can begin your web design process with a few of these basic tips for your trade organization website creation. 

Use typefaces that match the brand

The first thing I do is use the client’s branding as a reference. A company might already have established typefaces, colors, and even preferred sizes for print material. This is a great starting point for establishing your web design for this project. For example, the trade organization Grain Foods Foundation, has a great established brand, featuring a warm color palette. One goal of the website was to create an inviting, home feeling for the visitors as soon as they arrived. However, the font used for the logo is more modern than what we were going for so we decided to use a tall compressed serif font called Baltica Extra Condensed. It gave us a vertical canvas on which to spread a gradient of the company’s colors (see the ‘Come to the table’ hero statement in the image below). This gave us an opportunity to echo the branding throughout the site. The hero statement, “Come to the table” is contrasted and complimented with a sentence below it that uses a sans-serif called Barlow Condensed. Contrasted because it switches from a serif font to a sans-serif, and complimented because they both use a tall condensed style.

Grain Foods Foundation-Come to the table

Typography and Legibility

For the rest of the site, please keep in mind some basic typography in web design rules. Keep the amount of different fonts to a minimum, all the different fonts become distracting. Sometimes when you are looking at a composition with a bunch of different font choices you don’t know what is bothering you, you just know something is off.

Establish a hierarchy of H1, H2, H3, P, etc… to organize the different weights of fonts. The headlines are a great place to use the display fonts, then use a legible typeface for the rest of the text.

Nutritional benefits of grains

For the paragraphs, please use a legible font. Avoid all caps, or all bold. Save that for information that needs to be called out, like a sale, or warning. If you use large blocks of decorative or display font it becomes difficult to read. The text tends to vibrate while looking at it.  

Grain foods are one of the major food groups as part of an overall healthy eating plan. When you think about a meal for breakfast, lunch or dinner, you should aim to have about one-quarter of that meal coming from grain foods to benefit include their essential nutrients – dietary fiber, B vitamins (folate, thiamin, niacin), iron, zinc, magnesium and calcium.

This tall sans serif display font is good for chapter titles but it can be difficult to read when used for paragraph text. 

Grain foods are one of the major food groups as part of an overall healthy eating plan. When you think about a meal for breakfast, lunch or dinner, you should aim to have about one-quarter of that meal coming from grain foods to benefit include their essential nutrients – dietary fiber, B vitamins (folate, thiamin, niacin), iron, zinc, magnesium and calcium.

Use a very legible font like Arial, Helvetica, Montserrat, or pragmatica-web which is the font used for this article. (pragmatica-web, 16pt or 1 rem.

Accessibility: REM vs PX and other tips

When setting the global size for your website, consider using rem instead of px for your font size. “Using REM (or another relative length value) for font-size is a must for accessibility, because px in some browsers doesn’t resize when the browser settings are changed. Some people, for example, need to zoom maybe up to 400% to be able to read your text, due to a visual impairment.” https://www.freecodecamp.org/news/what-is-rem-in-css. Some popular website builders will default to sizing your font using “px.” If you have the option, consider choosing REM font sizing instead of px or pt.   

Accessibility should always be a consideration when creating your website. Some good rules to follow are:

  • Make sure the text on your website has good contrast. Dark text on a light background, and vice versa. Also avoid using, for example, a blue on blue font color scheme. 
  • Make sure the text is large enough to read. Titles and headlines are easy, but don’t forget the text within elements like buttons.  If you set your font size using REM, then is easier for readers to increase the size for the visually impared. 

To make sure you are compliant, always check with the WCAG Guidelines.

 

Stay tuned...

Check back soon for more tips on typography in web design, web design, graphic design, marketing, and more. You can also reach out to The Cyphers Agency to take care of all your marketing needs. 

share this post:

related posts

see more posts

Subscribe for our latest news, marketing tips and advice