CSS for Fluid Type Scale

Custom CSS Template for Fluid Type Scale

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 want to override the fixed values in the font size variables.

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

• You want to preview your configurations quickly.

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

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