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 has adopted the modern concepts of Fluid Typography and Type Scale, which makes it Fluid Type Scale.

The fluid behavior is effectively achieved using clamp() in the font-size property, allowing text to scale dynamically based on the viewport size. By adopting a type scale ratio, we can ensure smooth, consistent typography that maintains visual harmony across different screen sizes without guesswork.

To take advantage of both, we can use the open-source tool Fluid Type Scale Calculator to generate all the clamp() values we need effortlessly.

If you think the default font size in the S2 Cloneable is fine and you don't have to make any changes yet, you can skip this chapter.

The Concept

Once you understand the concept, you can use the tool to adjust the values to fit your design needs easily. Let's take a look at the below diagram:

The above diagram explains the basic concept of this example: 2-step Fluid Type Scale

// 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. It will be helpful if you want to set up fluid typography for a particular class.

How to update clamp() values according to my design needs?

You can start by opening one of our configurations.

In most cases, all you have to change are the "Base font sizes" in the Fluid Type Scale tool and you will get a new set of clamp() values. Choose your font and use the preview tool to verify your settings.

Text

Below are the default configurations in the S2 Framework.

Body, text-base, text-lg, text-xl, text-2xl, text-3xl

In the cloneable, the base font size, which is the font size that applies to Body via the Webflow Designer, is set according to the below in the tool.

✦ See our Configuration →

Key configs we looked at:

16px

Desired min of base size is 1rem

18px

Desired max if base size is 1.125rem

Max of xl

1.5rem

Max of 3xl

2rem

Min of 3xl

1.25rem

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

Great, 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 a desired results by using xs as the baseline step.

✦ See our Configuration →

Key configs we looked at:

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

Heading 1 to Heading 6, h1 to h6

Similarly, we can use the Fluid Type Scale tool to get the fluid values effortlessly for headings. h6 is the baseline step, and in S2, we want to make it the same as the Body font size.

✦ See our Configuration →

Key configs we looked at:

Max of h1

5rem

Min of h1

3rem

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

The above clamp() values have been applied to the tags Heading 1 to Heading 6, and also to classes h1 to h6.

h7, h8

Sometimes you simply need smaller headings, so, there are h7 and h8. They are arbitrary classes invented to style smaller headings. For simplicity, we can just use regular font sizes.

Superscript & Subscript

sup, sub

S2 also adopted 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. Now, they scale properly with nice positions according to the font size.

Summary

In S2, the fluid values have been applied directly to:

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

This allows you to enjoy the benefits without relying on custom code.

We understand that manually entering all the clamp() values can be a bit cumbersome if you want to change font sizes. This process will become super simple once Webflow supports custom values for variables in the future. Hopefully, this feature will be available soon. 🤞

Usually, you don't need to adjust the sup and sub values. S2's default will scale nicely with different font sizes.