content.md 1.3 KB

“Vertical Element Alignment” (YELA in CSS) is an axis found in some variable fonts that can be used to align elements within modular typefaces’ glyphs to different positions in the Y dimension.

The Google Fonts CSS v2 API defines the axis as:

Default: Min: Max: Step:
0 -100 100 1
![An image showing two type specimens, each with an axis slider underneath. The specimen on the left shows the effects of the axis’ lowest value. The specimen on the right shows the effects of the axis’ highest value.](images/thumbnail.svg)
In the Wavefont typeface, 3 sets of 4 vertical stroke elements with varying lengths are shown aligned to the bottom of the em, symmetrically center-aligned, and aligned to the top of the em.

The number system is a percentage and can be understood on a relative basis: The default value is zero, which center-aligns the letterforms; the minimum value of -100% aligns them to the bottom of the em square; the maximum value of 100% aligns them to the top of the em square.

This axis was first introduced in the Wavefont typeface.