Typography

Text style variable mode

text-style is a semantic variable collection that controls font family, weight, and style. It has two modes, primary and secondary. This is switchable via the variable mode dropdown in Webflow.

Why it exists

When the same size is used in two different ways across a design, maintaining consistency manually gets messy fast. For example, an h2 in one section is regular weight and upright, while an h2 in another is bold and italic. Instead of overriding styles on each instance, switch the mode on that element, text-style handles the rest.

These values are the defaults shipped with System.exe. Adjust the min and max for each step in the typography variable collection to match your project's needs.

How to use it

Apply a size class to the element (e.g. u-text-2xl)
Open the variable mode dropdown of that element

Figure 3.2.0 text-style variable mode dropdown selection in Webflow.
Switch between primary and secondary.

The font family, weight, and style update automatically based on the mode. No manual overrides needed.