Picking Fonts For The Web
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:
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:
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:
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.