Open Type Variable Axes Reference

Overview

Open Type variable fonts use axes to control different aspects of the font's appearance. These axes allow for smooth interpolation between different styles, enabling responsive typography and dynamic font adjustments.

References

• Microsoft OpenType Specification - Design Variation Axis Tag Registry
• W3C CSS Fonts Module Level 4 - font-variation-settings
• Google Fonts Axis Registry (Github)

Standard Axes

These axes are widely supported and standardized across browsers and font implementations.

Axis Tag	Name	Description	Typical Range	Usage	Category	Google Fonts	Examples
wght	Weight	Controls the thickness of characters	1-999	font-weight, font-variation-settings	Standard	-	Inter, Roboto, Open Sans
wdth	Width	Controls the horizontal scaling of characters	75-125	font-stretch, font-variation-settings	Standard	-	Inter, Roboto
slnt	Slant	Controls the angle of characters (oblique)	-15 to 0	font-style: oblique, font-variation-settings	Standard	-	Inter
ital	Italic	Controls italic style interpolation	0-1	font-style: italic, font-variation-settings	Standard	-	Inter, Roboto
opsz	Optical Size	Optimizes character shapes for different sizes	8-144	font-optical-sizing, font-variation-settings	Standard	Optical Size	Inter, Source Serif

Known (Custom) Axes

These axes are experimental, font-specific, or custom implementations with varying browser support.

Typography & Style

Axis Tag	Name	Description	Typical Range	Usage	Category	Google Fonts	Examples
GRAD	Grade	Adjusts stroke weight without affecting spacing	-200 to 200	font-variation-settings	Typography & Style	Grade	Inter
CASL	Casual	Controls formality from formal to casual	0-1	font-variation-settings	Typography & Style	Casual	Recursive
CRSV	Cursive	Controls cursive characteristics	0-1	font-variation-settings	Typography & Style	Cursive	Recursive
MONO	Monospace	Controls monospace characteristics	0-1	font-variation-settings	Typography & Style	Monospace	Recursive
ROND	Roundness	Controls corner roundness	0-1	font-variation-settings	Typography & Style	Roundness	Recursive
SOFT	Softness	Controls stroke softness	0-1	font-variation-settings	Typography & Style	Softness	Recursive
WONK	Wonky	Controls irregular/quirky characteristics	0-1	font-variation-settings	Typography & Style	Wonky	Recursive
BLED	Bleed	Controls ink bleed effect	0-1	font-variation-settings	Optical & Visual Effects	Bleed
BNCE	Bounce	Controls bounce/spring effect	0-1	font-variation-settings	Optical & Visual Effects	Bounce
EHLT	Edge Highlight	Controls edge highlighting	0-1	font-variation-settings	Optical & Visual Effects	Edge Highlight
ELGR	Element Grid	Controls element grid characteristics	0-1	font-variation-settings	Optical & Visual Effects	Element Grid
ELSH	Element Shape	Controls element shape characteristics	0-1	font-variation-settings	Optical & Visual Effects	Element Shape
EDPT	Extrusion Depth	Controls extrusion depth characteristics	0-1	font-variation-settings	Optical & Visual Effects	Extrusion Depth
FILL	Fill	Controls fill characteristics	0-1	font-variation-settings	Optical & Visual Effects	Fill
FLAR	Flare	Controls flare characteristics	0-1	font-variation-settings	Optical & Visual Effects	Flare
HEXP	Hyper Expansion	Controls hyper expansion characteristics	0-1	font-variation-settings	Optical & Visual Effects	Hyper Expansion
MORF	Morph	Controls morphing characteristics	0-1	font-variation-settings	Optical & Visual Effects	Morph
YTAS	Parametric Ascender Height	Controls ascender height	0-1	font-variation-settings	Optical & Visual Effects	Parametric Ascender Height
XTRA	Parametric Counter Width	Controls counter width in characters	0-1	font-variation-settings	Optical & Visual Effects	Parametric Counter Width
YTDE	Parametric Descender Depth	Controls descender depth	0-1	font-variation-settings	Optical & Visual Effects	Parametric Descender Depth
YTFI	Parametric Figure Height	Controls figure height	0-1	font-variation-settings	Optical & Visual Effects	Parametric Figure Height
YTLC	Parametric Lowercase Height	Controls lowercase height	0-1	font-variation-settings	Optical & Visual Effects	Parametric Lowercase Height
YTUC	Parametric Uppercase Height	Controls uppercase height	0-1	font-variation-settings	Optical & Visual Effects	Parametric Uppercase Height
YELA	Vertical Element Alignment	Controls vertical element alignment	0-1	font-variation-settings	Optical & Visual Effects	Vertical Element Alignment
VOLM	Volume	Controls volume/weight	0-1	font-variation-settings	Optical & Visual Effects	Volume
YEAR	Year	Controls year-based variations	0-1	font-variation-settings	Optical & Visual Effects	Year
ARRO	AR Retinal Resolution	Controls AR retinal resolution	0-1	font-variation-settings	Specialized Effects	AR Retinal Resolution
INFM	Informality	Controls informality characteristics	0-1	font-variation-settings	Specialized Effects	Informality
SCAN	Scanlines	Controls scanline effect	0-1	font-variation-settings	Specialized Effects	Scanlines
SHRP	Sharpness	Controls sharpness characteristics	0-1	font-variation-settings	Specialized Effects	Sharpness

Usage Examples

CSS

/* Standard axes */
.font-weight {
  font-weight: 700;
}
.font-stretch {
  font-stretch: condensed;
}
.font-style {
  font-style: italic;
}
.font-optical-sizing {
  font-optical-sizing: auto;
}

/* Custom axes */
.custom-axis {
  font-variation-settings:
    "GRAD" 150,
    "CASL" 0.5;
}

JavaScript

// Set variation settings
element.style.fontVariationSettings = "'wght' 700, 'wdth' 125";

// Get computed variation settings
const settings = getComputedStyle(element).fontVariationSettings;

Browser Support

• Standard axes (wght, wdth, slnt, ital, opsz): Excellent support across all modern browsers
• Custom axes: Varies by browser and font implementation
• CSS properties: font-weight, font-stretch, font-style, font-optical-sizing have good support
• font-variation-settings: Supported in all modern browsers for custom axes

Notes

• Standard axes can be controlled via dedicated CSS properties or font-variation-settings
• Custom axes require the font-variation-settings property
• Axis values are typically normalized between 0-1 or have specific ranges
• Custom axes provide creative typography possibilities but may have limited browser support