Create a text layer and apply a variable font from the Character panel.
Last updated on
Jun 17, 2026
Learn more about working with variable font axes in After Effects, including how to access them, add them as text animators, use selectors, and more.
On this page:
Before you begin:
- To install a variable font, look for files with extensions such as .ttf, .otf, or .woff2. Many Adobe Fonts include variable versions (marked “Variable”), and you can use the Font Technology filter to locate them quickly. You can also find free variable fonts through resources like Google Fonts and other open-source repositories.
- Go through recommended practices for designing with variable font axes, setting up text animations efficiently, and optimizing the animation workflow.
When you open the Font dropdown menu, you can use the Show Variable Fonts icon to filter the list and display only fonts that expose variable axes.
Select the text layer, then in the Properties panel under the Text section, select the Variable Font icon to open a pop-up displaying all available axes for the current font.
The pop-up will display the following for you to adjust the value using the scrubbing control:
- Axis name: Descriptive name. For example, Weight and Width.
- Current value: The current axis value.
If you have text selected (in text edit mode), axes show values for the selected characters, and if nothing is selected, the axes show values for the first character. Mixed values across selection will show the range or indicate variation
Drag left or right on the value numbers to adjust them, and preview the changes instantly in the Composition panel. Alternatively, you can select the value to enter typing mode, type the desired number, and press Enter to apply.
Each axis has a minimum and maximum value defined by the font, and scrubbing or typing is constrained to valid ranges. You can hover over the hot text to view the range.
Preview the changes that are reflected immediately in the Composition panel. When the width or spacing changes alter the layout, the text adjusts automatically.
If you want to make the first letter of a word heavier, create weight variations within a single word, or design custom ligatures or character combinations, variable fonts allow you to do so.
Double-click the text layer to enter text edit mode.
Select specific character(s) you want to modify, and open the Variable Font pop-up in the Properties panel by selecting the icon.
Adjust the axis values so that they apply only to selected characters.
Note
If you do not select a specific character, the values will apply to the first character only.
Text animators allow you to keyframe axis values over time and apply them to specific character ranges using selectors. There are multiple ways to add axis animators.
- Using the Text Layer menu while editing text
- Using Add Animator in the timeline
- Using the Properties panel
Using the Text Layer menu while editing text
Double-click the text layer to enter edit mode.
Select and highlight characters you want to animate, or select none for all the characters.
Right-click on the highlighted text in the Composition panel, then choose Animate Text > Variable Font Axes > [Axis Name].
A new text animator is created with the selected axis property.
Using Add Animator in the timeline
Select the text layer in the Timeline panel, expand the to reveal the Animate button.
Select the Animate button, choose Variable Font Axes > [Axis Name].
A new animator with range selector is automatically created.
Using the Properties panel
Select the text layer in the Timeline panel and navigate to the Properties panel.
Go to the Text Animation section and select Add Animator > Variable Font Axes > [Axis Name].
A new animator with range selector is added.
When a new animator is added, After Effects creates a new Text Animator group that includes the Font Axis property and Range Selector, with the initial value set to the current axis value of the selected characters.
When you add a variable font axis animator, After Effects creates the following hierarchy:
Keyframing Axis Values
Move the Current Time Indicator (CTI) to the desired time in the Timeline panel.
Select the stopwatch icon next to the axis property to create the first keyframe at the current value.
Move the CTI to the new time, and use scrubbing or manual entry to change the value for the axis to create a new keyframe.
Animation examples
Try these examples if you are working with individual axes:
|
Example |
Time and value changes |
Result |
|---|---|---|
|
Smooth weight transition |
|
Text gradually gets bolder |
|
Width squeeze effect |
|
Text squeezes in then returns |
|
Slant or Italic Animation |
|
Text leans into italic style |
You can add multiple axis animators to the same text layer by adding the first axis, such as Weight, then the second axis, like Width, and the third axis, like Slant, and keyframing each independently or together. Try the following examples for combining multiple axes:
|
Example |
Time and value changes |
Result |
|---|---|---|
|
Dynamic logo animation |
Animator 1 - Font Axis Weight
Animator 2 - Font Axis Width
|
Text grows bold and wide simultaneously |
The Variable Font Spacing property controls how After Effects adjusts character spacing when animating font axes, such as weight or width.
When you animate font settings, such as weight or width, letters can become wider or narrower. After Effects can automatically adjust the spacing between letters to keep things looking neat, and this setting lets you choose when and how those spacing fixes happen.
Expand your text layer's Text property group.
Add a Variable Font Axis to animate.
Under the More Options section, use the Variable Font Spacing dropdown menu to select from the following:
- Adaptive: Applies per-character tracking compensation when appropriate to maintain natural spacing as font axes change.
- Per-Character: Always applies per-character tracking compensation.
- Default: Disables per-character tracking compensation entirely. Characters maintain their original spacing despite changes to the font axis. Useful for creative effects where you want the natural width changes of the font to affect the overall text layout.
Selectors control which characters an animator affects and how strongly. Variable font axis animators work with all selector types.
Range Selector (Default)
The Range Selector defines a continuous range of characters to animate. Here are some of the key properties:
|
Property |
Description |
Values |
|---|---|---|
|
Start & End |
Defines which characters are affected |
0% – 100% (or index/units based)
|
|
Offset |
Shifts the range along the text, and animating them creates "traveling" effects |
Values: -∞ to +∞ |
|
Amount |
Controls the strength of the effect |
0% – 100%
|
Here are some examples you can try:
|
Example |
Font axis setting |
Range selector |
Keyframes |
Result |
|---|---|---|---|---|
|
Weight wipe effect |
Weight: 900 (Black) |
|
End keyframed from 0% - 100% |
Bold weight “paints” across text from left to right |
|
Traveling width wave |
Width: 150% (Expanded) |
|
Offset animated over time |
Expanded width travels through the text |
Shape and Ease
|
Property |
Options |
Description |
|---|---|---|
|
Shape |
Square |
Hard edge between affected and unaffected characters |
|
Shape |
Ramp Up |
Gradual increase into the range |
|
Shape |
Ramp Down |
Gradual decrease out of the range |
|
Shape |
Triangle |
Gradual in and out |
|
Shape |
Round |
Smooth bell curve |
|
Shape |
Smooth |
Very gradual transitions |
|
Ease |
High Ease |
Very gradual transitions |
|
Ease |
Low Ease |
Sharper transitions |
Here are an example you can try:
|
Example |
Font axis setting |
Range selector |
Additional settings |
Result |
|---|---|---|---|---|
|
Smooth weight gradient |
Font Axis Weight: 900 |
|
|
Text starts bold and gradually lightens to base weight |
Wiggly Selector
Applies random variations to axis values per character. Here are some of the key properties:
|
Property |
Description |
Results |
|---|---|---|
|
Max Amount / Min Amount |
Maximum and minimum variation from base value |
Creates random fluctuation per character |
|
Wiggles/Second |
How fast the random values change |
Higher means more frenetic movement |
|
Correlation |
How related neighboring characters are |
|
|
Temporal Phase |
Randomizes timing offset per character |
Adds variation in timing |
Here are some examples you can try:
|
Example |
Font axis setting |
Wiggly Selector settings |
Additional settings |
Result |
|---|---|---|---|---|
|
Jittery Weight Effect |
Weight: 400 (Regular) |
|
|
Each character’s weight randomly fluctuates independently |
|
Breathing Width |
Width: 100% (Normal) |
|
Text gently expands/contracts in waves |
Expression Selector
Allows precise, mathematical control over which characters are affected using JavaScript expressions. Amount is the key properties:
- Expression returns a value controlling the effect strength per character
- Can access character index, position, time, and more
Here are some examples you can try:
|
Example |
Expression (Amount) |
Animator Axis |
Result |
|---|---|---|---|
|
Weight Based on Character Position |
// In Expression Selector Amount property: |
|
First character lightest, last character boldest, linear gradient |
|
Oscillating Slant |
// In Expression Selector Amount property: |
|
Slant waves through text in a sine pattern |
Below are some commonly used expression variables, along with many others available in After Effects:
- textIndex - Current character index (1-based)
- textTotal - Total number of characters
- time - Current composition time
You can add multiple selectors to a single animator for complex effects.
Expand the animator in the Timeline panel.
Select the Add dropdown next to the animator name.
Select the selector type from the following available options:
- Range Selector
- Wiggly Selector
- Expression Selector
A new selector is added and combines with existing selectors. Adjustments to the Amount values are multiplied together. For example, a Range Selector at 50% multiplied by a Wiggly Selector at 80% yields a 40% final effect, allowing for smooth transitions between layers with random variations.
Here is an example you can try to achieve a smooth wave with variation, which combines a Range Selector and a Wiggly Selector to create a bold wave effect with subtle random jitter.
|
Component |
Settings |
|---|---|
|
Animator 1 |
|
|
Range Selector 1 |
|
|
Wiggly Selector 1 |
|
Create different effects on different character ranges. Here are two such examples:
|
Example |
Animator settings |
Selector settings |
|---|---|---|
|
First letter bold, rest normal |
Font Axis Weight: 900 (Black) |
Range Selector:
|
|
Alternating weight |
Animator 1 (Odd characters):
Animator 2 (Even characters):
|
Two Expression Selectors controlling odd/even characters |
Use expressions to link axis values to other animation properties. Here are two examples that you can consider:
1. Weight Driven by Position creates text weight changes based on the layer’s vertical position.
// In Font Axis Weight property:
linear(transform.position[1], 0, thisComp.height, 300, 900)
2. Width Responds to Audio creates text weight width reacts to audio amplitude.
// In Font Axis Width property:
audioLevel = thisComp.layer("Audio Layer").audio.audioLevels;
linear(audioLevel[0], -48, 0, 75, 150)
When a text layer contains multiple fonts (mixed formatting). In Text Animators:
- Animator applies axis changes per character based on each character's font
- If a character's font doesn't have the axis, that character is unaffected
- Range selectors still target character ranges, but the effect varies by font
Here is a simple example:
- Text: "Hello" (mixed fonts)
- "He" uses VariableFont A (has Weight axis)
- "llo" uses VariableFont B (no Weight axis)
- Animator: Font Axis Weight - 900
- Result: "He" becomes bold, "llo" unchanged
Create stunning 3D animations in After Effects
Animate characters and illustrations, add motion to text, and more.
