typography
Grade
also called GRAD (opentype), optical grade
A variable font axis that thickens or thins strokes without changing any character's width, so text can get darker without reflowing.
Grade is a variation axis, registered as GRAD, that makes
strokes heavier or lighter while leaving every advance width exactly where it
was. Ask for more weight and the glyphs get wider, so the line gets longer, the
line breaks move, and the paragraph reflows. Ask for more grade and the same
letters get darker in place: the stems thicken inward, the counters tighten, and
the text occupies the identical rectangle it did before. The distinction only
sounds academic until you have to change the darkness of type that is already
laid out.
The name comes from the print shop, where grade meant a version of a face cut slightly heavier or lighter to compensate for a press, a paper, or an ink that was gaining or losing weight, without disturbing the composition. The screen equivalents are the same kind of compensation. Light text on a dark background optically bleeds and reads heavier than the same weight on white, so a graded version a step lighter matches it. A low-contrast display, an e-ink panel, or a projector may need a step darker. Grade is also the honest axis for hover and selected states in dense UI: darkening a table row’s label on hover with font-weight shoves the rest of the row sideways, while darkening it with grade does not move a pixel. That is why some families expose grade at all, and why Roboto Flex and Google’s later text families ship it.
Keep it apart from weight, which is the axis everyone reaches for first. Weight is a design decision inside the typographic hierarchy: a bold word is a different level of emphasis, and its extra width is part of the drawing. Grade is a compensation, meant to be invisible as a change of style, and a graded line should read as the same weight rendered under different conditions rather than as emphasis. That difference in intent is also a constraint: grade is not a substitute for a weight ramp, and pushing it far enough to look like bold gives you cramped counters instead. Since a family may name coordinates on the axis, expect a named instance or two if the family thinks a particular grade is worth calling something, and expect nothing at all in a family that never cut one, because there is no fallback for an axis a file does not have.
Which word?
| If you want | say |
|---|---|
| darkening text on a dark background without reflow | grade |
| your bold looks wrong and blurry | faux bold |
| naming a single dial inside a variable font | variation axis |
Related
See also: Font weight