Font Size

Utilities for controlling the font size of an element.

Class

Properties

text-scale-1

font-size: var(--font-scale-1-size) !important

line-height: var(--font-scale-1-line-height) !important

text-scale-10

font-size: var(--font-scale-10-size) !important

line-height: var(--font-scale-10-line-height) !important

text-scale-2

font-size: var(--font-scale-2-size) !important

line-height: var(--font-scale-2-line-height) !important

text-scale-3

font-size: var(--font-scale-3-size) !important

line-height: var(--font-scale-3-line-height) !important

text-scale-4

font-size: var(--font-scale-4-size) !important

line-height: var(--font-scale-4-line-height) !important

text-scale-5

font-size: var(--font-scale-5-size) !important

line-height: var(--font-scale-5-line-height) !important

text-scale-6

font-size: var(--font-scale-6-size) !important

line-height: var(--font-scale-6-line-height) !important

text-scale-7

font-size: var(--font-scale-7-size) !important

line-height: var(--font-scale-7-line-height) !important

text-scale-8

font-size: var(--font-scale-8-size) !important

line-height: var(--font-scale-8-line-height) !important

text-scale-9

font-size: var(--font-scale-9-size) !important

line-height: var(--font-scale-9-line-height) !important

Usage

Control the font size of an element using the text-scale-{size} utilities.

1The quick brown fox jumped over the lazy dog.

2The quick brown fox jumped over the lazy dog.

3The quick brown fox jumped over the lazy dog.

4The quick brown fox jumped over the lazy dog.

5The quick brown fox jumped over the lazy dog.

6The quick brown fox jumped over the lazy dog.

7The quick brown fox jumped over the lazy dog.

8The quick brown fox jumped over the lazy dog.

9The quick brown fox jumped over the lazy dog.

10The quick brown fox jumped over the lazy dog.

<p className="text-scale-1">The quick brown fox ...</p>
<p className="text-scale-2">The quick brown fox ...</p>
<p className="text-scale-3">The quick brown fox ...</p>
<p className="text-scale-4">The quick brown fox ...</p>
<p className="text-scale-5">The quick brown fox ...</p>
<p className="text-scale-6">The quick brown fox ...</p>
<p className="text-scale-7">The quick brown fox ...</p>
<p className="text-scale-8">The quick brown fox ...</p>
<p className="text-scale-9">The quick brown fox ...</p>
<p className="text-scale-10">The quick brown fox ...</p>