New

Stable version of Uniform CSS now officially released! Release note

Typography

Learn how to customize typography settings.


Typography Properties

You can customize full range of typography based properties such as line-height and font-size. In this guide, you will learn which variants are available for each typography group and how you can customize them. For a visual reference of all typography properties and its variants, view the Cheatsheet.


Default Typography

The following default typography settings are applied. To see a visual reference of all typography related properties, visit Cheatsheet.

@use "uniform" as * with (
$config: (
font-families: (
sans: (sans-serif),
serif: (serif),
mono: (monospace),
),

font-sizes: (
2xs: (
font-size: rem(10),
line-height: var(--leading-loosest),
),
xs: (
font-size: rem(12),
line-height: var(--leading-loosest),
),
sm: (
font-size: rem(14),
line-height: var(--leading-looser),
),
md: (
font-size: rem(16),
line-height: var(--leading-looser),
),
lg: (
font-size: rem(18),
line-height: var(--leading-loose),
),
xl: (
font-size: rem(20),
line-height: var(--leading-loose),
),
2xl: (
font-size: rem(24),
line-height: var(--leading-normal),
),
3xl: (
font-size: rem(28),
line-height: var(--leading-tight),
),
4xl: (
font-size: rem(32),
line-height: var(--leading-tighter),
),
5xl: (
font-size: rem(36),
line-height: var(--leading-tighter),
),
6xl: (
font-size: rem(40),
line-height: var(--leading-tighter),
),
7xl: (
font-size: rem(48),
line-height: var(--leading-tighter),
),
8xl: (
font-size: rem(56),
line-height: var(--leading-tighter),
),
9xl: (
font-size: rem(64),
line-height: var(--leading-tightest),
),
10xl: (
font-size: rem(72),
line-height: var(--leading-tightest),
),
11xl: (
font-size: rem(88),
line-height: var(--leading-tightest),
),
12xl: (
font-size: rem(104),
line-height: var(--leading-tightest),
),
13xl: (
font-size: rem(120),
line-height: var(--leading-tightest),
)
),

font-weights: (
ultralight: 100,
extralight: 200,
light: 300,
regular: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
ultrabold: 900
),

leadings: (
tightest: 1.125,
tighter: 1.25,
tight: 1.375,
normal: 1.5,
loose: 1.625,
looser: 1.75,
loosest: 1.875,
),

trackings: (
tightest: -0.08em,
tighter: -0.04em,
tight: -0.02em,
normal: 0,
loose: 0.02em,
looser: 0.04em,
loosest: 0.08em,
)
)
);

Customizing Font Families

You can customize font-families by passing in key value pairs to the font-families setting in your configuration.

// main.scss

@use "uniform" as * with (
$config: (
font-families: (
// custom
helvetica: ("Helvetica Now Display", system-ui, sans-serif)
),
)
);
/* main.css */

.font-helvetica { font-family: "Helvetica Now Display", system-ui, sans-serif; }

Customizing Font Sizes

You can customize font-sizes by passing in key value pairs to the font-sizes setting in your configuration. Font-size variants require both font-size and line-height to be defined.

// main.scss

@use "uniform" as * with (
$config: (
font-sizes: (
heading: (
font-size: 40px,
line-height: 1.2,
)
),
)
);
/* main.css */

.text-heading {
font-size: 40px;
line-height: 1.2;
}

Customizing Line Height

You can customize line-heights by passing in key value pairs to the leadings setting in your configuration.

// main.scss

@use "uniform" as * with (
$config: (
leadings: (
custom: 1.2,
),
)
);
/* main.css */

.leading-custom {
line-height: 1.2;
}

Customizing Letter Spacing

You can customize letter-spacings by passing in key value pairs to the trackings setting in your configuration.

// main.scss

@use "uniform" as * with (
$config: (
trackings: (
custom: 1em;
),
)
);
/* main.css */

.tracking-custom {
letter-spacing: 1em;
}

Customizing via CDN

If you are using the precompiled version of Uniform, you can customize theme properties by overriding predefined CSS variables. The following typography CSS variables can be overwritten.

Font Family CSS Variables

:root {
--font-sans: sans-serif;
--font-serif: serif;
--font-mono: monospace;
}

Font Size CSS Variables

:root {
--font-2xs: 0.625rem;
--font-xs: 0.75rem;
--font-sm: 0.875rem;
--font-md: 1rem;
--font-lg: 1.125rem;
--font-xl: 1.25rem;
--font-2xl: 1.5rem;
--font-3xl: 1.75rem;
--font-4xl: 2rem;
--font-5xl: 2.25rem;
--font-6xl: 2.5rem;
--font-7xl: 3rem;
--font-8xl: 3.5rem;
--font-9xl: 4rem;
--font-10xl: 4.5rem;
--font-11xl: 5.5rem;
--font-12xl: 6.5rem;
--font-13xl: 7.5rem;
}

Font Leading CSS Variables

:root {
--font-2xs-leading: var(--leading-loosest);
--font-xs-leading: var(--leading-loosest);
--font-sm-leading: var(--leading-looser);
--font-md-leading: var(--leading-looser);
--font-lg-leading: var(--leading-loose);
--font-xl-leading: var(--leading-loose);
--font-2xl-leading: var(--leading-normal);
--font-3xl-leading: var(--leading-tight);
--font-4xl-leading: var(--leading-tighter);
--font-5xl-leading: var(--leading-tighter);
--font-6xl-leading: var(--leading-tighter);
--font-7xl-leading: var(--leading-tighter);
--font-8xl-leading: var(--leading-tighter);
--font-9xl-leading: var(--leading-tightest);
--font-10xl-leading: var(--leading-tightest);
--font-11xl-leading: var(--leading-tightest);
--font-12xl-leading: var(--leading-tightest);
--font-13xl-leading: var(--leading-tightest);
}

Font Weight CSS Variables

:root {
--ultralight: 100;
--extralight: 200;
--light: 300;
--regular: 400;
--medium: 500;
--semibold: 600;
--bold: 700;
--extrabold: 800;
--ultrabold: 900;
}

Leading CSS Variables

:root {
--leading-tightest: 1.125;
--leading-tighter: 1.25;
--leading-tight: 1.375;
--leading-normal: 1.5;
--leading-loose: 1.625;
--leading-looser: 1.75;
--leading-loosest: 1.875;
}

Tracking CSS Variables

:root {
--tracking-tightest: -0.08em;
--tracking-tighter: -0.04em;
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-loose: 0.02em;
--tracking-looser: 0.04em;
--tracking-loosest: 0.08em;
}

Disabling Defaults

If you wish to remove defaults, pass null to any theme property. Additionally, you can add your own by assigning theme settings to the extend map.

@use "uniform" as * with (
$config: (
font-families: null,
font-sizes: null,
leadings: null,

extend: (
font-families: (
sans: sans-serif
)
)
)
)