Grade – The Twelve Days of Ax‑mas
On the seventh day of ax-mas, we’re exploring: the Grade GRAD axis.
Internally, axes have four-character tag names. The first character of the name must be a letter, but it can have numbers in it. Both these restrictions are similar to OpenType feature tags rules too, ex. ss01 for Stylistic Set 01.
While the Registered Axes we looked at have all-lowercase tag names (wght, wdth, opsz, slnt, ital) the tags we’ll be discussing for the rest of the Twelve Days of Axes are all-uppercase, custom tags defined by the type designers who made the font. That is, CUST for a hypothetical Custom axis, CRSV for the Cursive axis we looked at yesterday, or GRAD for the Grade axis we looked at today.
When tags are it
These tags appear in the data that UI developers use to show the UI for a particular Variable Font—the case of the tag indicating it is custom, which might change how the UI developer decides to display the control—and front-end developers using the higher-level font-variation-settings CSS property use those custom tag names to set the values of a Variable Font.
A custom axis could easily appear in a single font, and never in others. Or, one might overlap with some consistent practice, and become implemented in the same way across many fonts, and in theory could become a registered axis in the future.
The Grade axis
The Grade axis, for example, seems a more likely candidate through popularity this than, say, a visual effect axis tightly coupled to a specific typeface’s design.
There is a Grade axis in typefaces released by Google Fonts (Roboto Serif, Roboto Flex), Commercial Type (Action Text), and Apple (SF Rounded), for example.
What is grade
When changing the Grade axis, the typeface is multiplexed—the glyphs don’t change width or cause reflow, even as the design detail changes.
A common example explaining what Grades are is newspaper printing. Altering the grade can help compensate for different printing conditions, by making the glyph drawing lighter or darker (and therefore picking up less or more ink), without changing any design details. From Commercial Type’s announcement of their custom typefaces for The McClatchy Company’s daily newspapers:
Three grades have been produced for this family, slightly different weights to compensate for different inking on different presses across the country. Though the schedule was highly accelerated, we were able to receive press tests from all 29 newspapers, which helped to determine how heavy the different grades should be, as well as the right range of weights for the headline faces.
The same functionality can be useful on screens today, in reading an UI contexts.
Action Text (and the static Action fonts before it) use it, show how grades can be used for UI state. For example, you might indicate the current nav item is highlighted, but know you won’t cause reflow, or demonstrate something on hover.
Grades can also prevent the noticeable shift in the visual weight of the type when switching to dark mode, or when black-on-white and knocked out text appear near each other in the same UI and should have the same visual weight.
At the beginning of this series, we looked at how the Weight and Width axes aren’t pure controls that change the width and weight of type in isolation—using them to make the type slightly heavier or lighter would cause reflow. Doing that when your OS changes to dark mode at a certain time, or reflowing your ebook when you change the theme manually on your ereader, wouldn’t be what readers are expecting.
Dalton Maag even went as far as calling what is effectively a Grade axis the Darkmode axis in their Darkmode VF typeface.
This might be more useful for the end users of this particular typeface, but it does functions as a Grade axis, and demonstrates how difficult it could be to build consensus around future Registered Axes through convention alone.
Grade’s numeric range
There isn’t a consensus on how the numeric range for the Grade axis should work either (with thanks to Nick Sherman’s v-fonts.com for making it dramatically faster to confirm this). To be fair, that is expected, as some typefaces released earlier might have helped to inform what typefaces are doing now.
What should the axis range be? Some go from 1 to 200, Apple goes from 400 to 1000 (which feels like it is drawing on conventions from the Weight axis, but I don’t completely follow the reasoning), but there seems to be some consensus forming around going from a negative number to a positive number, with 0 as the default.
This last approach, say from -100 for a lighter Grade, to 0 for the default Grade, to 100 for a heavier Grade, is the approach I would use today if I was designing a Variable Font with Grades.
It’s a bit like the Slant axis, where a backslant style is a negative number. If you don’t have a backslant, or you don’t have a lighter Grade, no problem: the axis just starts at 0.
That said, there also doesn’t seem to be a convention around whether the axis should go from -1 to 1 or use numbers as high as -1000 to 1000 or something else.
The upside of Custom Axes is that these will all still work, but the downside is that, without the convention around the range, it’s very difficult for developers or script authors to implement any kind of automatic application—like Optical Size, where the typographer doesn’t have to control the axis manually at all.
There is one other way the Grade axis can be implemented, and it will bring us into the Custom Axes we will look at next week.
Until next time,
Kenneth