Aspect
Learn about Variable Font Axes and explore common registered axes for creating flexible designs and smooth animations.
Variable Font Axes overview
Variable Font Axes support allows you to access and animate the design variations built into OpenType Variable fonts directly within After Effects. Variable fonts contain multiple styles within a single font file, giving you precise control over typography without needing separate font files for each weight, width, or style variation.
- Fine-grained control: Adjust typography with continuous values instead of fixed weights or styles.
- Smooth animations: Keyframe font variations for dynamic text effects.
- Per-character control: Apply different axis values to individual characters using text animators.
- File efficiency: One variable font file replaces dozens of individual font files.
Once you add Variable Font Axes, you can work with them by adding them as properties inside Text Animators, customize their influence using selectors, and control through ExtendScript.
Learn the recommended practices for designing with variable font axes, setting up text animations efficiently, and optimizing the animation workflow.
About Variable Fonts
Variable fonts are OpenType fonts that contain one or more axes of variation. Each axis represents a dimension of design variation that you can control continuously, rather than being limited to pre-defined font styles.
Difference between traditional and variable fonts
|
|
Traditional fonts |
Variable fonts |
|---|---|---|
|
File structure |
Each style is a separate font file (Regular, Bold, Light, Italic, etc.) |
Single font file contains all variations |
|
Style range |
Limited to discrete steps. For example, weight: 100, 200, 300… 900. |
Continuous range of values. For example, weight: 100.0 to 900.0. |
|
Transitions |
Switching between styles requires changing fonts. |
Smooth transitions between any values. |
|
Flexibility |
Only one axis per font. For example, weight or italic. |
Can combine multiple axes simultaneously. For example, weight + width + slant. |
Understanding Variable Font Axes
Common registered axes
These are standardized axes defined by the OpenType specification. Most variable fonts include one or more of the following:
|
Axis name |
Controls |
Typical range |
Common values |
Use cases |
|---|---|---|---|---|
|
Weight (wght) |
The thickness and boldness of strokes |
100 – 900 |
|
|
|
Width (wdth) |
The horizontal compression and expansion of characters |
50% – 200% |
|
|
|
Slant (slnt) |
The angle of italic and oblique slanting |
0° to -15°
Note
Negative values lean right, positive values would lean left (uncommon). |
0° Upright, -15° Slanted |
|
|
Italic (ital) |
Roman and Italic letterforms |
0 – 1
Note
Unlike slant, this changes the actual letter shapes to italic forms. |
0 Roman, 1 Italic |
|
|
Optical Size (opsz) |
Optimizes letterforms for different display sizes |
6pt to 144pt (varies by font) |
|
|
Less common registered axes
These axes are part of the OpenType spec but less frequently implemented:
|
Axis name |
Controls |
Typical range |
Use cases |
|---|---|---|---|
|
Grade (GRAD) |
Stroke thickness without changing width |
-1 to 1 or font-specific |
|
|
Serif (SERF) |
Blends between sans-serif and serif styles |
0 (Sans) to 1 (Serif) or font-specific |
|
|
Lowercase Height (XHGT) |
Height of lowercase letters (x-height) |
Font-specific |
|
|
Uppercase Height (YTAS) |
Height of uppercase letters relative to ascenders |
Font-specific |
|
|
Counters (XTRA) |
Spacing inside letters (counter space) |
Font-specific |
|
Custom font-specific axes
Many variable fonts include proprietary axes with 4-character uppercase tags. These axes are unique to specific typefaces and enable creative design variations.
Examples from popular variable fonts
|
Name with Axis Tag |
Description |
|---|---|
|
INFM (Informality) |
Casual vs. formal letterforms |
|
BNCE (Bounce) |
Playful vertical offset of characters |
|
SPAC (Spacing) |
Inter-letter spacing control |
|
FILL (Fill) |
Outline vs. filled letterforms |
|
LINE (Line Weight) |
Outline thickness |
|
BACK (Background) |
Background shape weight |
|
RECT (Rectangularity) |
Rounded vs. rectangular forms |
|
ELSH (Element Shape) |
Alternative shape variations |
|
CASL (Casual) |
Formal vs. casual styles |
|
MONO (Monospace) |
Proportional vs. monospaced |
|
SOFT (Softness) |
Sharp vs. rounded corners |
|
WONK (Wonky) |
Straight vs. playful/distorted |
Custom axes vary completely between fonts. Always check a specific font's documentation to understand its custom axes.
Create stunning 3D animations in After Effects
Animate characters and illustrations, add motion to text, and more.