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.
Last updated
Fluid Typography (or Fluid Responsive) is an idea that font size changes fluidly with the screen's width, not just changes at breakpoints.
Last updated
In the S2 Framework, we adopted the modern concepts of Fluid Typography and Type Scale.
The fluid behavior can be achieved nicely 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 to generate all the clamp() values we need effortlessly.
Below are the default configurations in the S2 Framework. Once you understand the concept, you can use the tool to adjust the values to fit your design needs easily.
This diagram explains the basic concept of an Example of a 2-step Fluid Type Scale.
Here is another example, which is 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.
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.
Key configs to look 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 font-size value:
text-sm, text-xs, text-2xs, text-3xs
The process is similar, the min and max values of the base font size should be constant.
Key configs to look at:
Use --xs as base
Easier to set up a scale down
Max of --xs
0.875rem (14px)
Min of --3xs
Within a reasonable size
✦ Alternative configuration: Scale down more on smaller screens →
✦ Alternative configuration: Scale down even more →
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.
Configurations to get the clamp() value for h1 to h6
h6 is the baseline step, and it is the same as the root font size.
Key configs to look at:
Max of --h1
5rem
Min of --h1
3rem
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.
In the configuration, we get our desired max sizes 0.875rem and 0.755rem; and the min sizes are also within reasonable value.
sup, sub
S2 also adopted fluid font styles on sup and sub elements.
We prepare 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 →
On the S2 Framework, the CSS styles are applied seamlessly to the Webflow Designer at the tag level. They look perfect!
The following setups require custom CSS and are not yet included in the framework’s cloneable. Adding them to your site is optional.
You can add this to your custom CSS to scale fonts down for devices smaller than the iPhone SE (319px or below). The clamp() value is based on this configuration.
The variables below in the custom CSS already exist in the variables panel. The clamp() values give the variables the power of fluid behavior according to the default font size values in the S2 cloneable.
However, since Webflow does not yet allow adding custom values to variables; if you want to apply such variables to the font-size values of other classes, you can place this custom code in the custom of the Global Code component.
Extended reading:
