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 Concept of Fluid Type Scale

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

✦ See our Configuration

Key points:
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.)

✦ See our Configuration

Key points:
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);

Want to scale down more aggressively?

Here are two examples for reference:

✦ Alternative configuration: Scale down more on smaller screens

✦ Alternative configuration: Scale down even more

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.

✦ See our Configuration

Key points:
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.

Normally, you don't need to adjust the sup and sub values — S2's default setup scales perfectly with any different font sizes, regardless of your typography settings.

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.

Screenshot to show how to get the values for Font Size variables

Summary

In S2, the fluid values have been applied to the following classes via variables. Editing is super easy!

• Body, text-base

• text-sm, text-xs, text-2xs, text-3xs

• text-lg, text-xl, text-2xl, text-3xl

• Heading 1 ~ Heading 6

• h1 ~ h6

• sup, sub

Questions?

How to customize the clamp() values according to my design?

You can start by opening one of our configurations.

In most cases, all you need to update in the Fluid Type Scale Calculator are the min and max values of the base font size to generate a new set of clamp() values.

Choose your preferred font in the tool to preview and verify your settings.

Then, apply your custom clamp() values directly to the font-size in Webflow Designer.

How to set up a bigger overall font sizes?

If you are happy with S2's default type scales and setup, you can get an overall bigger fluid font size values effortlessly. Just follow these steps:

1. Open the Fluid Type Scale Calculator using our configuration links.

2. Change the Base font size of Maximum (Desktop) into e.g. 22px or 24px.

3. Change the Base font size of Minimum (Mobile) into e.g. 18px.

Scaling font sizes down for very small devices?

You can use custom CSS to scale fonts down for devices smaller than the iPhone SE (319px or below). Here is an example based on this configuration.

/* smaller font size on very small devices */
@media screen and (max-width:319px) { body { font-size: clamp(0.875rem, 2.532vi + 0.495rem, 1rem); } }

This is optional and usually unnecessary. It is not included in the framework's cloneable yet.

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/