Fluid Typography
Fluid Typography (or Fluid Responsive) is an idea that font size changes fluidly with the screen's width, not just changes at breakpoints.
S2 Framework adopts the modern Fluid Type Scale concept — a combination of Fluid Typography and Type Scale. To take advantage of both, we use the open-source Fluid Type Scale Calculator to effortlessly generate all the clamp() values we need.
Thanks to Webflow's Advanced Variable with Function feature, the Fluid Type Scale values are managed in the Variables panel — all in one place, so that you can view and update them very easily.
If you're happy with the overall font sizes provided by default in the S2 Cloneable and don't need to make changes yet, you may skip this chapter.
The Concept
The fluid behavior is achieved using clamp() function in the font-size property, allowing text to scale dynamically with the viewport. And by applying a type scale ratio, we can maintain smooth, harmonious typography across screen sizes without guesswork.
Let’s take a look at the diagram below:
The above diagram explains the basic concept of a 2-step Fluid Type Scale example:
/* CSS generated in the example */
--_text---hero-title--base: clamp(2.5rem, 6.087vi + 1.13rem, 6rem);
--_text---hero-title--lg: clamp(3.125rem, 10.217vi + 0.826rem, 9rem);Here is another example — a simple Single-step Configuration. This is helpful if you want to apply fluid typography to a specific class or variable.
Once you understand the basic concept, making adjustments becomes quite easy.
🤩 Now, with the above basic knowledge, let's explore our default setup.
Text
Fluid Type Scale has been applied to the Body tag and text classes in the S2 Framework:
text-sm, text-xs, text-2xs, text-3xs,
Body = text-base,
text-lg, text-xl, text-2xl, text-3xl
Let's take a look at the default configuration on the larger end of the scale first:
Body / text-base, text-lg, text-xl, text-2xl, text-3xl
Min of base
Desired min of base is 1rem (16px)
Max of base
Desired max if base is 1.125rem (18rem)
Max of xl
1.5rem, which is a reasonable size
Min of 3xl
1.25rem
Max of 3xl
2rem
Here's what we get for the fluid values:
--_text---font-size--base: clamp(1rem, 0.217vi + 0.951rem, 1.125rem);
--_text---font-size--lg: clamp(1.057rem, 0.42vi + 0.963rem, 1.299rem);
--_text---font-size--xl: clamp(1.118rem, 0.664vi + 0.969rem, 1.5rem);
--_text---font-size--2xl: clamp(1.183rem, 0.956vi + 0.967rem, 1.732rem);
--_text---font-size--3xl: clamp(1.25rem, 1.304vi + 0.957rem, 2rem);Let's move on to the smaller sizes!
text-sm, text-xs, text-2xs, text-3xs
The process is similar for the smaller sizes; the min and max values of the base font size should be constant. (This time, as the sizes are quite small, it will be easier to get the desired results by using xs as the baseline step.)
Use xs as base
Easier to set up a scale down
base
Same value
Max of xs
0.875rem (14px)
Min of 3xs
Within a reasonable size
Here's what we get:
--_text---font-size--3xs: clamp(0.66rem, 0.036vi + 0.652rem, 0.681rem);
--_text---font-size--2xs: clamp(0.732rem, 0.069vi + 0.717rem, 0.772rem);
--_text---font-size--xs: clamp(0.813rem, 0.109vi + 0.788rem, 0.875rem);
--_text---font-size--sm: clamp(0.901rem, 0.158vi + 0.866rem, 0.992rem);
--_text---font-size--base: clamp(1rem, 0.217vi + 0.951rem, 1.125rem);Headings
Fluid Type Scale has also been applied to the heading tags and classes:
Heading 1 to Heading 6, and h1 to h6
As before, we can use the Fluid Type Scale Calculator to generate fluid values effortlessly for headings. In S2, h6 serves as the baseline step, matching the font size of Body.
Min of h1
3rem
Max of h1
5rem
Here's what we get:
--_text---heading--h6: clamp(1rem, 0.217vi + 0.951rem, 1.125rem);
--_text---heading--h5: clamp(1.246rem, 0.47vi + 1.14rem, 1.516rem);
--_text---heading--h4: clamp(1.552rem, 0.854vi + 1.36rem, 2.043rem);
--_text---heading--h3: clamp(1.933rem, 1.426vi + 1.613rem, 2.753rem);
--_text---heading--h2: clamp(2.409rem, 2.264vi + 1.899rem, 3.71rem);
--_text---heading--h1: clamp(3rem, 3.478vi + 2.218rem, 5rem);About h7 and h8:
Sometimes you simply need smaller headings — that's where h7 and h8 come in. These are arbitrary classes created to style smaller headings. Since their sizes are too small to benefit from fluid scaling, we use regular fixed font sizes for simplicity.
Superscript & Subscript
sup, sub
S2 applies fluid font styles on sup and sub elements.
We have prepared a Fluid Sup / Sub CSS Generator for the S2 Framework. It is modified from the tool created by Lorenz Woehr.
✦ Fluid Sup / Sub CSS Generator
The generated values are applied to the Webflow Designer for the sup and sub tags, allowing them to scale correctly and maintain proper positioning relative to the font size.
Preview your setup
You can use the Fluid Type Scale Calculator to get the values for each breakpoint in the preview section (please scroll down). In Webflow, the breakpoints are: 1280px, 991px, 767px, and 479px.
Summary
In S2, the fluid values have been applied to the following classes via variables. Editing is super easy!
Body,text-basetext-sm,text-xs,text-2xs,text-3xstext-lg,text-xl,text-2xl,text-3xlHeading 1~Heading 6h1~h6sup,sub
Questions?
Extended readings:
About clamp(): https://developer.mozilla.org/en-US/docs/Web/CSS/clamp
Fluid Typography: https://css-tricks.com/snippets/css/fluid-typography/
Simplified Fluid Typography: https://css-tricks.com/simplified-fluid-typography/
Fluid Superscripts and Subscripts: https://css-tricks.com/fluid-superscripts-and-subscripts/
Last updated