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
  1. Guide & Documentation
  2. Basic Concepts

Units

Units that commonly used on websites.

PreviousUtility ClassesNextFluid Typography

Last updated 3 months ago

Understanding rem, unitless, em, and px:

Visit this section to learn more about the purpose of fluid font sizes that use rem as unit:

rem

Use rem for most parts of your website. Rem units are relative to the root (HTML) element, making them ideal for fluid, scalable, and consistent sizing.

- (unitless)

Ideal for line-height as using em may lead to unexpected results. Unitless values ensure that the line height scales proportionally with the font size.

em

Great for spacing between text and elements. It scales nicely relative to the parent element's text size, providing responsive and proportional spacing.

px

Use px when on borders and small spaces that are fixed and unlikely to change. It helps to display correctly and eliminates the need for calculations.

Fluid Typography