Designing for screens: weights 300–900 and the variable axis

How one weight axis from Light to Black gives you a full typographic hierarchy, and why the variable files are worth using.

Odra Sans has a single variation axis, weight, tagged wght. It runs from 300 to 900. The seven named weights sit at even steps along it, but the variable fonts let you use any value in between.

The named weights

The "good for" column is a starting point, not a rule. This page uses Black for the title, ExtraBold for section headings, SemiBold for subheads, Regular for the text and Light italic for the pull quote.

One file, every weight from 300 to 900.

Why use the variable files

A site that uses four or five static weights downloads four or five files. The variable WOFF2 holds the whole range in one. Here are the actual sizes of the version 1.201 web fonts:

So two static weights already weigh more than the single variable file. Past that point the variable font is the lighter choice, and you also get the in-between values.

Tips for screen text

1. Keep body text at Regular or a touch heavier. On dark backgrounds, light text can look thinner than it is, so try 420 to 450.
2. Use weight, not only size, for hierarchy. A SemiBold subhead at body size often reads more cleanly than a larger Regular one.
3. Turn on tabular figures for numbers that line up, such as prices, tables and dashboards, like the tables above.
4. Save Light and Black for large sizes, where their contrast with the text is the point.