The SNO Report: A site update for how to use fonts

/in

This week, we pushed out a FLEX theme update that expands how you can utilize Google Fonts on your news site.

That section of the SNO Design Options page should now look something like this:

The big change is that now, for each font, you can choose to utilize a specific weight of a font style, rather than that option being standardized as it was.

So now, It’s imperative that you pay attention to which weights are available for each font on the Google Font library. Our Design Options page will present you options for weights from 100 (thinnest) to 900 (boldest) no matter the font, but if that font doesn’t actually have the weight you’re trying to set it to, it will not display correctly.

On Google’s font library, finding which weights are available is a dropdown arrow option you have for each font. Like this:

Roboto (pictured) is an excellent, versatile font to use anywhere on your news site because it has six different weights available.

You can also quickly find out how much variety a font has, on the Google Font library, as it shows how many styles (12 styles, 1 style, etc.) each font has in parenthesis next to its name.

In designing your site, you could now use a standard 400 weight Roboto for your body text and a bolder 700 weight Roboto for headlines to create a clear, hierarchical difference between the two. In the past, the only way to differentiate the two identical fonts was by the larger headline text sizes, or using different fonts altogether.

Before, you could already get pretty crazy with font choices — and now even more so. Let’s not… So, here’s some advice for fonts, from our font nerds:

  • Don’t use Script fonts, ever. Script style fonts are kind of like hoverboards: They look appealing in the store window, but they’ll explode beneath your feet if you use them. We removed them — and some of the uglier serif and sans-serif styles — out of the preset fonts list on the Design Options page with this update. Whew!
  • Readability is the whole ballgame. Your rule of thumb in picking fonts for all areas on your news site should be: Is it easy to read, in all sizes? Some fonts that look good as big headlines may not be good when they’re shrunk down to the size of a 14-point teaser or body text.
  • Don’t use more than two fonts on your site, especially now that you can, in some cases, do so much with just one font. Typically, you’ll separate your two by anything that’s a title (headlines, menu items, widget titles) and body text.

We recommend Roboto, of course, and all of the serif and sans-serif fonts we kept in the preset list on the Design Options page. Here are several others worth a look:

Gentium Basic
Libre Baskerville
Poppins
Work Sans
Cabin
Nunito Sans
Secular One
Bree Serif
News Cycle
Open Sans Condensed
Montserrat
Patua One
Francois One
Julius Sans One
Unica One
Squada One
Staatliches
Volkhov
DM Serif Text
DM Serif Display
Oxygen
Fira Sans
Russo One
Signika
Fjalla One
EB Garamond