This piece was based on a portion of my Config talk and first appeared on the Adobe Design blog, edited by my Adobe colleagues Laura Feinstein and Sue Garibaldi. The version below features minor stylistic edits.

Type can often find itself living in less-than-ideal conditions. Ink spreads, screens glow, and letterforms that look perfectly balanced in one context can feel clumsy or heavy in another. Grade exists to smooth over those differences by helping text remain consistent even when everything else around it changes.

At first glance, grade might seem very much like weight. But where weight serves to differentiate (adding emphasis and contrast to text), grade’s purpose is to unify (bringing consistency to text that looks different when it shouldn’t). It allows designers to adjust type precisely so that it appears the same across different materials, backgrounds, and lighting conditions without changing spacing, line breaks, or layout. And once you notice the problem grade addresses, it’s hard to not see it everywhere.

Consistency on light backgrounds, dark backgrounds, and screens

Grade first appeared to make type look as intended with low-quality printing methods or on different paper types. Compare a regular newspaper and a glossy magazine: because ink bleeds into matte stock, the newspaper text appears softer than the same text reproduced on the magazine’s glossy stock — despite being set in the same typefaces and identical font weights. By employing alternate grades of type, some of these imperfections can be anticipated and resolved.

I first encountered grade while designing our magazine Lagom, the magazine I ran with my wife from 2014 to 2019. Most of our text was black, printed on a white background (i.e., ink on paper), but some spreads used white text on a dark or image-based background. Because that white text was, of course, the paper showing through, it meant ink bleeding into the white letterforms.

To make the light-on-dark text match the dark-on-light text, I used different grades of the superfamily Tabac, designed by Tomáš Brousil of Suitcase Type.

But grade isn’t limited to print. On screens, light type on a dark background appears to ‘bloat’ when compared to seemingly thinner dark type on a light background. Grade helps keep light text on dark backgrounds from looking heavier than it should.

The concept, known as ‘halation’, can degrade legibility on illuminated road signage at night or when switching between light and dark modes on a digital screen. If we look closely, in most setups, the same text appears heavier when shown light-on-dark than when shown dark-on-light, due to the halation effect.

An approximation of legibility decreasing as halation increases: letterforms become bloated, counters disappear, and spacing is reduced.

Much like uniwidth or multiplexed typefaces (where weight changes don’t affect the width of glyphs), switching between grades won’t cause any reflow in text. For print designers, that means no headaches when performing bulk-replace in Adobe InDesign files; for screen-based designers, it means no UI elements getting pushed out of their neatly stacked boxes.

Fine control: Grade as a variable axis

Most people won’t notice subtle type changes between light mode and dark mode, but they might notice when a black boxout with white text sits oddly against a surrounding black-on-white design.

We’ve already learned that grade offers a way to counter this effect more subtly than switching between weights. An even finer level of control is available with a grade axis in a variable font — type can be tweaked ever so slightly to ensure consistency across different typesetting contexts. Rather than being limited to a predefined grade value, designers can select anything on the sliding scale between the extremes.

Although it’s from way back in 2020, Greg Gibson’s article on CSS-Tricks is a great resource on this technique.

Grade isn’t an option you can expect to find in most fonts, but when it comes to variable fonts, the custom grade (GRAD) axis is becoming increasingly common: there’s SF Pro, the variable version of Apple’s San Francisco typeface; Google’s Roboto Flex and Roboto Serif variable fonts in the Adobe Fonts library; and Bennet Text, a static font with grade options.

By compensating for paper, ink, contrast, and light, grade preserves a designer’s intent without disrupting layout or hierarchy. Type without grade tweaks probably won’t look wrong, but when grade is employed, it elevates text and, more importantly, makes it easier to read.