Skip to main content
🏠CustomizationFont SizeVersion: Next

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