New

Stable version of Uniform CSS now officially released! Release note

Line Heights

Visual reference of all default line-heights.


Visual Reference

The following table visually represents all the line-heights that are available.

Reference Class Leading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia arcu sit amet velit vulputate fermentum. leading-100 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia arcu sit amet velit vulputate fermentum. leading-110 1.1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia arcu sit amet velit vulputate fermentum. leading-120 1.2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia arcu sit amet velit vulputate fermentum. leading-130 1.3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia arcu sit amet velit vulputate fermentum. leading-140 1.4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia arcu sit amet velit vulputate fermentum. leading-150 1.5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia arcu sit amet velit vulputate fermentum. leading-160 1.6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia arcu sit amet velit vulputate fermentum. leading-170 1.7
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia arcu sit amet velit vulputate fermentum. leading-180 1.8
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia arcu sit amet velit vulputate fermentum. leading-190 1.9
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia arcu sit amet velit vulputate fermentum. leading-200 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia arcu sit amet velit vulputate fermentum. leading-210 2.1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia arcu sit amet velit vulputate fermentum. leading-220 2.2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia arcu sit amet velit vulputate fermentum. leading-230 2.3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia arcu sit amet velit vulputate fermentum. leading-240 2.4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia arcu sit amet velit vulputate fermentum. leading-250 2.5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia arcu sit amet velit vulputate fermentum. leading-tightest 1.125
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia arcu sit amet velit vulputate fermentum. leading-tighter 1.25
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia arcu sit amet velit vulputate fermentum. leading-tight 1.375
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia arcu sit amet velit vulputate fermentum. leading-normal 1.5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia arcu sit amet velit vulputate fermentum. leading-loose 1.625
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia arcu sit amet velit vulputate fermentum. leading-looser 1.75
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia arcu sit amet velit vulputate fermentum. leading-loosest 1.875

Basic Usage

Apply the leading-<variant> utility to any text based element.

<h1 class="leading-250">
H1 Heading
</h1>

CSS Variables

You can customize each leading by overriding the following CSS custom properties.

: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;
}