Custom CSS for Font Sizes

Webflow does not yet allow custom values to be applied to variables. However, if any of the following apply to you, custom CSS can help you implement font size changes more efficiently:

• You want true fluid behavior on text and your custom classes.

• You want to override the default absolute values in the Text > Font Size variables.

• You prefer not to manually input fluid values for each class in the Style panel.

To simplify this process, we've prepared a CSS template that allows you to override font size variables and the font sizes of text classes effortlessly.

Simply copy and paste values generated by the Fluid Type Scale Calculator into the template and place the code inside css_custom in the Global Code component.

<style>
/* overriding values of the font size variables */
:root {
  --_text---font-size--3xs: ;
  --_text---font-size--2xs: ;
  --_text---font-size--xs: ;
  --_text---font-size--sm: ;
  --_text---font-size--base: ;
  --_text---font-size--lg: ;
  --_text---font-size--xl: ;
  --_text---font-size--2xl: ;
  --_text---font-size--3xl: ;
  --_text---heading--h6: ;
  --_text---heading--h5: ;
  --_text---heading--h4: ;
  --_text---heading--h3: ;
  --_text---heading--h2: ;
  --_text---heading--h1: ;
}
/* applying the above variables to the text classes */
body       { font-size: var(--_text---font-size--base); }
.text-3xs  { font-size: var(--_text---font-size--3xs); }
.text-2xs  { font-size: var(--_text---font-size--2xs); }
.text-xs   { font-size: var(--_text---font-size--xs); }
.text-sm   { font-size: var(--_text---font-size--sm); }
.text-base { font-size: var(--_text---font-size--base); }
.text-lg   { font-size: var(--_text---font-size--lg); }
.text-xl   { font-size: var(--_text---font-size--xl); }
.text-2xl  { font-size: var(--_text---font-size--2xl); }
.text-3xl  { font-size: var(--_text---font-size--3xl); }
h6, .h6    { font-size: var(--_text---heading--h6); }
h5, .h5    { font-size: var(--_text---heading--h5); }
h4, .h4    { font-size: var(--_text---heading--h4); }
h3, .h3    { font-size: var(--_text---heading--h3); }
h2, .h2    { font-size: var(--_text---heading--h2); }
h1, .h1    { font-size: var(--_text---heading--h1); }
</style>

Example of a larger font size setup:

✦ Configuration from --3xs to --base → ✦ Configuration from --base to --3xl → ✦ Configuration from --h6 to --h1 →

<style>
/* overriding values of the font size variables */
:root {
  --_text---font-size--3xs: clamp(0.742rem, 0.288vi + 0.678rem, 0.908rem);
  --_text---font-size--2xs: clamp(0.824rem, 0.358vi + 0.743rem, 1.029rem);
  --_text---font-size--xs: clamp(0.914rem, 0.44vi + 0.815rem, 1.167rem);
  --_text---font-size--sm: clamp(1.014rem, 0.538vi + 0.893rem, 1.323rem);
  --_text---font-size--base: clamp(1.125rem, 0.652vi + 0.978rem, 1.5rem);
  --_text---font-size--lg: clamp(1.19rem, 0.943vi + 0.977rem, 1.732rem);
  --_text---font-size--xl: clamp(1.258rem, 1.291vi + 0.968rem, 2rem);
  --_text---font-size--2xl: clamp(1.33rem, 1.703vi + 0.947rem, 2.31rem);
  --_text---font-size--3xl: clamp(1.407rem, 2.192vi + 0.914rem, 2.667rem);
  --_text---heading--h6: clamp(1.125rem, 0.652vi + 0.978rem, 1.5rem);
  --_text---heading--h5: clamp(1.401rem, 1.078vi + 1.159rem, 2.021rem);
  --_text---heading--h4: clamp(1.746rem, 1.701vi + 1.363rem, 2.724rem);
  --_text---heading--h3: clamp(2.175rem, 2.602vi + 1.59rem, 3.671rem);
  --_text---heading--h2: clamp(2.71rem, 3.892vi + 1.834rem, 4.947rem);
  --_text---heading--h1: clamp(3.376rem, 5.724vi + 2.088rem, 6.667rem);
}
/* applying the above variables to the text classes */
body       { font-size: var(--_text---font-size--base); }
.text-3xs  { font-size: var(--_text---font-size--3xs); }
.text-2xs  { font-size: var(--_text---font-size--2xs); }
.text-xs   { font-size: var(--_text---font-size--xs); }
.text-sm   { font-size: var(--_text---font-size--sm); }
.text-base { font-size: var(--_text---font-size--base); }
.text-lg   { font-size: var(--_text---font-size--lg); }
.text-xl   { font-size: var(--_text---font-size--xl); }
.text-2xl  { font-size: var(--_text---font-size--2xl); }
.text-3xl  { font-size: var(--_text---font-size--3xl); }
h6, .h6    { font-size: var(--_text---heading--h6); }
h5, .h5    { font-size: var(--_text---heading--h5); }
h4, .h4    { font-size: var(--_text---heading--h4); }
h3, .h3    { font-size: var(--_text---heading--h3); }
h2, .h2    { font-size: var(--_text---heading--h2); }
h1, .h1    { font-size: var(--_text---heading--h1); }
</style>