CSS for Fluid Type Scale

Custom CSS Template for Fluid Type Scale

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.

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 into the template, then place the code in css_custom inside the Global Code 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

/* 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

✦ Configuration of text ✦ Configuration of headings

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

See it on CodePen

/* 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); }