11 Essential Tips for Choosing the Best Web Fonts

The number one essential thing to keep in mind when selecting the best web fonts is scalability. Pay attention to when the fonts scale to either a smaller or larger size for different screen sizes that the fonts remain legible. That’s pro-tip number one. However, there are other crucial considerations to keep in mind when selecting the right web fonts.

I’m currently in the process of taking the Web Typography course from HOW Design University and Sessions Edu. In the course, I read this microscopic analysis of the four major system fonts and their web font counterparts. While reading this detailed overview of the fonts, I thought to myself that I would love a guide explaining what characteristics for not-so-common fonts to examine when selecting the best web fonts for a project. The next few sentences in the typography lesson granted my wish:

“Finding the perfect font is a complex business, with many factors to consider. Here are some tips for choosing Web fonts.”

This is exactly what I wanted. I know other designers would love this comprehensive list as well, so I’m sharing this with the Print community. This might be a refresher for many of you. Regardless, it’s a handy checklist to keep up on your browser for when you are building a new web design project.

Tips for Selecting the Best Web Fonts

by Instructor Piper Nilsson

Here are some details to consider as you decide whether a font is right for your project.

x-height

A font’s x-height refers to the height of the letter x (or u, v, w, and z). Compare the text below. Garamond has a small x-height; Meta Serif has a large x-height. Both text samples are set in the same 16px font-size, but Meta is much easier to read.

Garamond Premier Pro FF Meta Serif

If you fancy a font with a small x-height, you can still use it, but you’ll need to use a larger font-size to compensate.

Apertures

Look carefully at the openings in the letters e, a, and c. These are their apertures.

 

Nimbus Sans FF Dagny Web Pro

Tightly drawn apertures close into o‘s at small font-sizes. Open apertures remain legible.

Nimbus Sans FF Dagny Web Pro

Bowls

Consider the shape of the rounded forms within the lowercase letters. Condensed fonts have narrow bowls, creating a compact appearance in large display settings,

Nimbus Sans Condensed

but the compressed letterforms are hard to read at small sizes.

Nimbus Sans Condensed

Extended fonts create bold headings, stretching words to dramatic effect,

Nimbus Sans Extended

but the bowls appear too round and too big when read in longer text passages.

Nimbus Sans Extended

Good text fonts have regular proportions.

Nimbus Sans

Terminals

When studying a serif font, look closely at the letters a, r, and f. Do the strokes end in a ball terminal (a circular dot), or a beak terminal (a sharp spur)? These details may be the determining factor in a typeface’s personality.

Old Standard PT Serif

When looking at sans serif font, notice the j, l, and t. Do the terminals end in a straight line or a curve?

Futura PT Apertura

Futura is beautiful in its simplicity, but Apertura’s curved terminals aid legibility.

Futura PT
Apertura

Letter Spacing

Many free fonts contain beautiful characters, but the typographer didn’t have the time or resources to devote to proper letter spacing. Ligurino has nicely shaped letterforms. This should read well as a text font.

Ligurino

However, at the standard 16px font-size, the letter spacing is too tight. The letters clump together.

Ligurino

Before choosing a font, check the letter spacing at your desired font-size.

Unique Characters

Scan your font for unique characters that stick out from the rest. This is a particular concern with script fonts. Reading the quote below, my eye gets stuck on the repetition of the letter y. The script looks fake, because, in real handwriting, each y would be slightly different.

Ligurino

The same quote reads better in Myriad Tilt, which has a more even texture.

Myriad STD Tilt

Italics

When you choose your font, consider whether you will need an italic setting. Junction is a fine font, but it doesn’t come with italics. If you try to set the font in italics anyway, the browser will be forced to create a fake italic by slanting the text automatically.

Junction Regular
Junction in fake italics

The results are far from ideal. The angle of the L is awkward, and the looks squashed. Look for a font with an italic setting designed by the typographer.

Meta’s italic setting displays nicely shaped letterforms. The double-decker converts to a single decker, which flows better with the text.

FF Meta Web Pro Normal
FF Meta Web Pro Normal Italic

Bold

Likewise, if you need to use bold text, make sure that your font has a bold font setting. Otherwise, the browser will bold the font automatically. In the fake bold text below, the top of the r is flattened. Also, the ear of the lowercase case g has lost its nice shape.

Junction Regular
Junction in fake bold

Meta’s professionally-designed bold font-weight has clean outlines. It is a bolder bold than the fake Junction bold, with better contrast against the regular text style.

FF Meta Web Pro Normal
FF Meta Web Pro Bold

Numerals

Numbers may form an important part of your text content. Consider whether you prefer uppercase numerals with an even baseline.

Utopia STD

Or lowercase numerals for a more traditional style.

Calluna

Cross-Browser Rendering

Check Browser Samples to see how your font holds up cross-browser.

Adrianna renders nicely in Chrome on a Mac.

Adrianna

In Chrome on Windows 7, Adrianna loses its quality.

Adrianna

Rendering is a particular concern when you use a modern font with thin serifs. Acta Display was designed for large display type. On a Mac, the letterforms have good contrast down to 30px. Smaller than that, and the details get fuzzy.

Acta Display

Acta is even lighter in Windows 7. The thin serifs fade away.

Acta Display

To be on safe footing cross-browser, use Acta at large display sizes, above 72px. If you need to use a modern font at smaller sizes, look for a font with heavier serifs, like Kepler, shown below as rendered on a Mac.

Kepler Std

Kepler’s heavier letterforms render nicely in Windows 7.

Kepler Std

Genealogy

To wrap up, do some research on the story behind the font. Who designed the font? Was the font designed especially as a Web font, or is it a digitalized version of a traditional print typeface? Does the font include a companion font of another classification?

FF Meta boasts a complete family of sans-serif, sans serif condensed, sans serif small caps, serif, and serif small caps.

Read the font description at the top of its Typekit profile page, and reference the foundry information in the sidebar.

Typekit provides background info on fonts.

Foundry sites often provide in-use galleries.

http://metaserif.com

Seeing the font in-use is better than any specimen sheet. You’ll get a feel for its texture and style.

http://all-for-design.com/portfolio/

Enhance your web designs with the latest techniques for styling, typesetting, and embellishing web typography when you enroll in the Web Typography course. Learn more here.

One thought on “11 Essential Tips for Choosing the Best Web Fonts

  1. JackPonting

    It is little bit tough to decide for a website owner that which font impacts on their website visitors as there’s no way to measure all of the font options available for website designers and students who are taking dissertation help from me at http://www.qualitydissertation.co.uk and learning web design and development. Thanks for sharing tips on for selecting the best web fonts.

COMMENT