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