S2 Framework
Clone S2 in Webflow
English
English
  • Welcome
    • S2 is flow simple!
    • Getting Started
  • How to use the Cloneable?
  • Guide & Documentation
    • Basic Concepts
      • Styling in Webflow
      • Utility Classes
      • Units
      • Fluid Typography
    • Variables
      • Colors vs Palettes
      • Colors in S2
      • Text
      • Variable Groups
    • Naming Strategies
      • Class Naming
      • Other Naming Strategies
      • Naming Custom Attributes
    • Structure
      • HTML Structure
      • Global Code
    • S2 Attributes
    • S2 Components
  • Editions
    • Build your own S2
      • One-page Style Guide
      • Lite Edition
  • More
    • FAQs
    • Ready to switch to S2?
      • Frameworks Comparison Overview
      • From Client-First
      • From MAST or The Saddle
      • From Lumos
    • Tools and Resources
    • Read More
      • Foundations of S2
      • Our Approaches
  • Links
    • 🤘Clone in Webflow
    • 🪵Changelog & Roadmap
  • Copyright & Terms
Powered by GitBook
On this page
  • Font Family
  • Font Size
  1. Guide & Documentation
  2. Variables

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 applied Fluid Type Scale on some key tags and classes using variables, 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

The variables for font sizes under Text > Font Size in the Variables panel:

3xs ← 2xs ← xs ← sm ← base → lg → xl → 2xl → 3xl

About Fluid Type Scale and fluid values, please refer to this section: Fluid Typography

PreviousColors in S2NextVariable Groups

Last updated 4 days ago