SimpleCSS
  • ☀️Light
  • 🌙Dark
  • 💻System
Download

🔠 Typography Utilities

📐 What are typography utilities used for?

Typography utilities let you control font weight and font size directly from your HTML. They are built on top of the global font-size tokens so headings and body text stay consistent across the entire design system.

Most utilities also have responsive variants, allowing you to change font size or weight from a specific breakpoint using the pattern .{utility}-{breakpoint} (for example: .fs-xl-md or .fw-700-lg).

💠 Examples

The examples below show how to combine font sizes and font weights using the .fs-* and .fw-* utilities.

.fs-1

.fs-2

.fs-3

.fs-4

.fs-5

.fs-6

.fs-xs — Extra-small text.

.fs-sm — Small text.

.fs-md — Medium text.

.fs-lg — Large text.

.fs-xl — Extra-large text.

.fs-xxl — Extra-extra-large text.

.fw-100 — Thin

.fw-200 — Extra Light

.fw-300 — Light

.fw-400 — Regular

.fw-500 — Medium

.fw-600 — Semi Bold

.fw-700 — Bold

.fw-800 — Extra Bold

.fw-900 — Black

This text is medium weight and size by default, becomes extra large at the md breakpoint and bold from the lg breakpoint. (.fs-md .fs-xl-md .fw-400 .fw-700-lg)

💻 HTML Code

fs-1

fs-2

fs-3

fs-4

fs-5

fs-6

Extra small text (.fs-xs)

Small text (.fs-sm)

Medium / body text (.fs-md)

Large text (.fs-lg)

Extra large text (.fs-xl)

Extra-extra large text (.fs-xxl)

Thin weight (.fw-100)

Extra light (.fw-200)

Light (.fw-300)

Regular (.fw-400)

Medium (.fw-500)

Semi-bold (.fw-600)

Bold (.fw-700)

Extra-bold (.fw-800)

Black (.fw-900)

This text is medium weight and size by default, becomes extra large at the md breakpoint and bold from the lg breakpoint. (.fs-md .fs-xl-md .fw-400 .fw-700-lg)

📏 Typography Utilities & Breakpoints

Typography utilities follow a predictable naming pattern and can be combined freely.
Most of them also offer responsive variants by appending a breakpoint suffix such as -xs, -sm, -md, -lg, -xl, or -xxl.

.fw-100
.fw-100-{breakpoint}

Sets the font weight to 100, globally or from a specific breakpoint.

.fw-200
.fw-200-{breakpoint}

Sets the font weight to 200, globally or from a specific breakpoint.

.fw-300
.fw-300-{breakpoint}

Sets the font weight to 300, globally or from a specific breakpoint.

.fw-400
.fw-400-{breakpoint}

Sets the font weight to 400, globally or from a specific breakpoint.

.fw-500
.fw-500-{breakpoint}

Sets the font weight to 500, globally or from a specific breakpoint.

.fw-600
.fw-600-{breakpoint}

Sets the font weight to 600, globally or from a specific breakpoint.

.fw-700
.fw-700-{breakpoint}

Sets the font weight to 700, globally or from a specific breakpoint.

.fw-800
.fw-800-{breakpoint}

Sets the font weight to 800, globally or from a specific breakpoint.

.fw-900
.fw-900-{breakpoint}

Sets the font weight to 900, globally or from a specific breakpoint.

.fs-1
.fs-1-{breakpoint}

Applies the --font-size-h1 token, globally or responsively.

.fs-2
.fs-2-{breakpoint}

Applies the --font-size-h2 token, globally or responsively.

.fs-3
.fs-3-{breakpoint}

Applies the --font-size-h3 token, globally or responsively.

.fs-4
.fs-4-{breakpoint}

Applies the --font-size-h4 token, globally or responsively.

.fs-5
.fs-5-{breakpoint}

Applies the --font-size-h5 token, globally or responsively.

.fs-6
.fs-6-{breakpoint}

Applies the --font-size-h6 token, globally or responsively.

.fs-xs
.fs-xs-{breakpoint}

Applies the --font-size-xs token, with responsive variants available.

.fs-sm
.fs-sm-{breakpoint}

Applies the --font-size-sm token, with responsive variants available.

.fs-md
.fs-md-{breakpoint}

Applies the --font-size-md token, with responsive variants available.

.fs-lg
.fs-lg-{breakpoint}

Applies the --font-size-lg token, with responsive variants available.

.fs-xl
.fs-xl-{breakpoint}

Applies the --font-size-xl token, with responsive variants available.

.fs-xxl
.fs-xxl-{breakpoint}

Applies the --font-size-xxl token, with responsive variants available.

⚙️ Variables CSS

Variable Description
--font-size Default font size.
--font-size-lg Large font size.
--font-size-md Medium font size.
--font-size-sm Small font size.
--font-size-xl Extra-large font size.
--font-size-xs Extra-small font size.
--font-size-xxl Extra extra-large font size.
--font-size-h1 Font size for heading H1.
--font-size-h2 Font size for heading H2.
--font-size-h3 Font size for heading H3.
--font-size-h4 Font size for heading H4.
--font-size-h5 Font size for heading H5.
--font-size-h6 Font size for heading H6.