Fluid Responsive

Fluid Responsive (or Fluid Typography) is an idea that font-size changes fluidly with the screen's width, not just changes at breakpoints.

In the S2 Framework, we adopted the fluid responsive CSS generated by the excellent tool made by the Client-First team. In S2's default setup, we removed some unnecessary decimals for better performance.

Base text

By default, S2 uses the below configuration. You can generate a larger rem setup and replace the CSS in Global-Code if it is more suitable for your website.

Screen width	1rem equals to	Explanation
≤ 319px	12px - 14px	Increase the chance your website’s responsiveness to survive on narrow devices.
320px to 479px	16px	It is easier for site building when you have a constant value. Fluid size growing is not obvious at this range. Using 16px prevents zoom-in effect when visitors tap on input fields.
480px to 1440px	16px - 18px	Increase the rem value on larger screens for smooth and better readiness.
1441px to 1920px	18px	In most case, 18px should be good enough. You may increase this value.
≥ 1921px	/	Stop scaling at max breakpoint.

This is how it looks like using the tool. The ~px you can see on top of the tool refers to how many px do 1rem equals at different screen widths.

Screencapture of the CSS generator

So, the Fluid Responsive code included by default in the S2 Framework is:

html { font-size: 1.125rem; }
@media screen and (max-width:1920px) { html { font-size: 1.125rem; } }
@media screen and (max-width:1440px) { html { font-size: calc(0.937695rem + 0.208vw); } }
@media screen and (max-width:479px) { html { font-size: 1rem; } }
@media screen and (max-width:319px) { html { font-size: calc(0.749607rem + 0.629vw); } }

If you want a larger overall font size for your website, you may follow the below example.

Larger overall font size

html { font-size: 1.25rem; }
@media screen and (max-width:1920px) { html { font-size: 1.25rem; } }
@media screen and (max-width:1440px) { html { font-size: calc(1.062695rem + 0.208vw); } }
@media screen and (max-width:479px) { html { font-size: 1.125rem; } }
@media screen and (max-width:319px) { html { font-size: calc(0.874607rem + 0.629vw); } }

Visit this CSS generator with further explanation here: https://finsweet.com/client-first/docs/fluid-responsive

Headings

For headings, a modern concept of Type Scale is adopted in the S2 Framework. We can get the values easily by using a magical open-source tool — Fluid Type Scale.

The values have been applied to the tags Heading 1 to Heading 6, and also to classes h1 to h6. And, as sometimes you simply need smaller headings, there are h7 and h8.

You can import our config for headings to the tool by visiting here. h6 is the baseline step.

--s2-h8: clamp(0.644rem, -0.05vi + 0.659rem, 0.619rem);
--s2-h7: clamp(0.803rem, 0.064vi + 0.784rem, 0.835rem);
--s2-h6: clamp(1rem, 0.25vi + 0.925rem, 1.125rem);
--s2-h5: clamp(1.246rem, 0.541vi + 1.084rem, 1.516rem);
--s2-h4: clamp(1.552rem, 0.982vi + 1.258rem, 2.043rem);
--s2-h3: clamp(1.933rem, 1.64vi + 1.442rem, 2.753rem);
--s2-h2: clamp(2.409rem, 2.604vi + 1.629rem, 3.71rem);
--s2-h1: clamp(3rem, 4vi + 1.803rem, 5rem);

The min. values of h7 and h8 in the clamp() calculations are manually adjusted to prevent the values from getting too small.

The min. value of h8 changes to: 0.75rem The min. value of h7 changes to: 0.875rem

--s2-h8: clamp(0.75rem, -0.05vi + 0.659rem, 0.619rem);
--s2-h7: clamp(0.875rem, 0.064vi + 0.784rem, 0.835rem);

Superscript and Subscript

S2 adopted fluid font styles on sup and sub elements.

We prepare a CSS generator, a modified tool originally created by Lorenz Woehr: https://codepen.io/realanthonyc/pen/emOXEMz

On the S2 Framework, the CSS styles are applied nicely to the Webflow Designer at the tag level. They look perfect!

Extended reading:

Fluid Typography | CSS-TricksCSS-Tricks

Simplified Fluid Typography | CSS-TricksCSS-Tricks

Fluid Superscripts And Subscripts | CSS-TricksCSS-Tricks