Home Explore Help
Sign In
SMusatov
/
google-fonts
mirror of https://github.com/google/fonts.git
1
0
Fork 0
Files
Tree: ca9be81b81
Branches Tags
google-fonts
/
cc-by-sa
/
knowledge
/
glossary
/
terms
/
grade_axis
/
content.md

content.md 2.0 KB
History Raw

“Grade” (GRAD in CSS) is an axis found in some variable fonts that can be used to alter stroke thicknesses (or other forms) without affecting the type’s overall width, inter-letter spacing, or kerning—unlike altering weight. This means there are no changes to line breaks or page layout.

The Google Fonts CSS v2 API defines the axis as:

Default: Min: Max: Step:
0 -1000 1000 1

Negative grade makes the style lighter, while positive grade makes it heavier.

The units are the same as in the weight (wght) axis and it’s important to use the two axes together, systematically. For example, where accessibility guidelines recommend using a Medium (500) weight for a button label to obtain a certain contrast level, using a Regular (400) weight with grade +100 (if the grade axis goes up to 100) will produce the same level of contrast—but without any reflow.

![Two side-by-side type specimens of the word “slightly”, each shown with a variable axis represented beneath as a horizontal slider. The first specimen, with the slider most of the way to the left to represent a negative value on the axis, shows more contrast. The second specimen, with the slider most of the way to the right to represent a positive value on the axis, shows less contrast.](images/thumbnail.svg)
Typeface: Roboto Serif

In line with the current CSS spec, the four-character code for this axis should be referenced in UPPERCASE (as only the five axes registered in the OpenType format specification should appear in lowercase). Also, when using the Google Fonts API, the lowercase axes have to appear first in the URL, followed by the uppercase, each in alphabetical order.