Close
Home
One Topic - Three Distinct Views:  The Vanguard View | Subscribe
Let Vanguard Technology help you with your website  Contact Us
leadfonts

Picking Fonts For The Web

Posted: May 28, 2021

Did you know that you can add interest and usability to your website simply by picking the right fonts?

Body Copy

When it comes to body content, what sort of fonts should you use? For body text – consider a san-serif font. You want something with good readability in a compressed space. These have a taller “x height” – which is the height of the lower case x. Fonts with a taller x height are more legible at smaller sizes. Here is an example of "x height:"



A couple of good choices for body copy would be Roboto or Open Sans:

Roboto:

Open Sans:


Sub Headings

For midsize text, like Heading 3 and Heading 4 tags, you might want to go with the same font, with a slightly higher weight. Or, consider a more geometric sans serif font such as Futura or Lato. 

Futura:

Lato:

Finally, you might consider a slab serif - kind of a cross between Sans Serif and Serif. A popular one is Arvo.

Arvo:


Main Headings

For your main headings (H1 and H2 tags) pretty much anything goes – this is a chance to use display fonts such as League Gothic or Exo. One thing to consider – remember the fonts with tall x heights we discussed for body copy? Sometimes they can look a little distorted at larger sizes.

League Gothic:

Exo:

A side note about font weight:

Almost any font you pick will be available in  a number of weights (regular, medium, bold, extra bold or black.) If you’re mixing fonts, make sure they look good together at the sizes and weights you plan to use. One rule of thumb – make sure your top level headers have the highest weight. This means, if your H1 and H2 tags are bold – make sure h3, strong and body text are medium or regular. (Of course you can use bold for emphasis)

Resources

Where can you find these fonts? Here are links to the fonts referenced above:

Additionally, check out this link to a great article about fonts:

Choosing Web Fonts: A Beginner’s Guide

As always you can reach out to your Vanguard Client or Project Manager to learn more. 

More Articles
and Topics

Author:

Mark Havelka