Text
Font Family
Setting up the site's font family under Font Family variables ensures consistent typography throughout the site and makes it easy to update the font family globally without having to change each element individually.
Font Size
S2 adopted Fluid Type Scale on some key tags and classes, including:
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
About Fluid Type Scale and fluid values, please refer to this section: Fluid Typography
In S2, we also have these variables for font sizes under Text > Font Size:
3xs
← 2xs
← xs
← sm
← base
→ lg
→ xl
→ 2xl
→ 3xl
Ideally, we would like to apply the below fluid values to these variables, which are the same as the text-
classes.
However, as Webflow does not allow applying custom values to variables yet, we have entered absolute values equivalent to our default fluid typography at different breakpoints in the Variable panel.
Advanced:
If you want to have true fluid behavior on custom classes that use these variables, or if you want to override these absolute values, you can place custom CSS in the Global Code component.
Last updated