---
description: Custom CSS Template for Fluid Type Scale
---

# CSS for Fluid Type Scale

{% hint style="warning" %}
You can skip this page if you are unfamiliar with custom CSS or do not intend to update Fluid Type Scale by using custom CSS.
{% endhint %}

If any of the following apply to you and you are comfortable with codes, **custom CSS** can help you implement font size changes more efficiently:

* You prefer not to manually input fluid values for each class in the Style panel.
* You want to preview your configurations.



## CSS Template

You can copy and paste the values generated by the [**Fluid Type Scale Calculator**](https://www.fluid-type-scale.com/) into the template, then place the code in `css_custom` inside the <mark style="color:green;">**Global Code**</mark> component. This will override the font size setup applied to variables, classes, the body, and headings.

[See it in action on CodePen using S2's default](https://codepen.io/pen/ZYYKGGZ)

```css
/* override the values of 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: ;
}
/* apply the variables */
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); }
```



## Example of larger overall font size

<mark style="color:blue;">✦</mark> [Configuration of text](https://www.fluid-type-scale.com/calculate?minFontSize=18\&minWidth=360\&minRatio=1.125\&maxFontSize=24\&maxWidth=1280\&maxRatio=1.2\&steps=3xs%2C2xs%2Cxs%2Csm%2Cbase%2Clg%2Cxl%2C2xl%2C3xl\&baseStep=base\&prefix=_text---font-size-\&useContainerWidth=false\&includeFallbacks=false\&useRems=true\&remValue=16\&decimals=3\&previewFont=Inter\&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground\&previewWidth=1280)\
<mark style="color:blue;">✦</mark> [Configuration of headings](https://www.fluid-type-scale.com/calculate?minFontSize=18\&minWidth=360\&minRatio=1.2\&maxFontSize=24\&maxWidth=1280\&maxRatio=1.333\&steps=h6%2Ch5%2Ch4%2Ch3%2Ch2%2Ch1\&baseStep=h6\&prefix=_text---heading-\&useContainerWidth=false\&includeFallbacks=false\&useRems=true\&remValue=16\&decimals=3\&previewFont=Inter\&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground\&previewWidth=1280)

Here is an example of a "larger" overall font size setup:

[See it on CodePen](https://codepen.io/pen/Kwwmwwv)

```css
/* overriding values of the font size variables */
:root {
  --_text---font-size--3xs: clamp(0.702rem, 0.037vi + 0.694rem, 0.723rem);
  --_text---font-size--2xs: clamp(0.79rem, 0.136vi + 0.76rem, 0.868rem);
  --_text---font-size--xs: clamp(0.889rem, 0.266vi + 0.829rem, 1.042rem);
  --_text---font-size--sm: clamp(1rem, 0.435vi + 0.902rem, 1.25rem);
  --_text---font-size--base: clamp(1.125rem, 0.652vi + 0.978rem, 1.5rem);
  --_text---font-size--lg: clamp(1.266rem, 0.929vi + 1.057rem, 1.8rem);
  --_text---font-size--xl: clamp(1.424rem, 1.28vi + 1.136rem, 2.16rem);
  --_text---font-size--2xl: clamp(1.602rem, 1.722vi + 1.214rem, 2.592rem);
  --_text---font-size--3xl: clamp(1.802rem, 2.275vi + 1.29rem, 3.11rem);
  --_text---heading--h6: clamp(1.125rem, 0.652vi + 0.978rem, 1.5rem);
  --_text---heading--h5: clamp(1.35rem, 1.13vi + 1.096rem, 1.999rem);
  --_text---heading--h4: clamp(1.62rem, 1.818vi + 1.211rem, 2.665rem);
  --_text---heading--h3: clamp(1.944rem, 2.798vi + 1.314rem, 3.553rem);
  --_text---heading--h2: clamp(2.333rem, 4.179vi + 1.392rem, 4.736rem);
  --_text---heading--h1: clamp(2.799rem, 6.111vi + 1.424rem, 6.313rem);
}
/* apply the variables */
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); }
```



