Font Size

Set the font size for an element.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

fs-xs
font-size: 0.75rem;
fs-sm
font-size: 0.875rem;
fs-md
font-size: 1rem;
fs-lg
font-size: 1.125rem;
fs-xl
font-size: 1.25rem;
fs-xxl
font-size: 1.5rem;
fs-3xl
font-size: 1.875rem;
fs-4xl
font-size: 2.25rem;
fs-5xl
font-size: 3rem;
fs-6xl
font-size: 3.75rem;
fs-7xl
font-size: 4.5rem;
fs-8xl
font-size: 6rem;
fs-9xl
font-size: 8rem;

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:fs-(value)
Small≥640px
md:fs-(value)
Medium≥768px
lg:fs-(value)
Large≥1024px
xxl:fs-(value)
Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:fs-(value)

Negative Values

Use negative variants to apply negative font size values.

Use the -- syntax to apply negative numeric values.

Syntax:fs--(value)