Elements logo

Font size

Utilities for controlling the font size of an element

Class reference

ClassProperties
text-87.5font-size: 87.5%
text-3xsfont-size: 0.5rem
text-2xsfont-size: 0.625rem
text-xsfont-size: 0.75rem
text-smfont-size: 0.875rem
text-basefont-size: 1rem
text-lgfont-size: 1.125rem
text-xlfont-size: 1.25rem
text-2xlfont-size: 1.5rem
text-3xlfont-size: 1.75rem
text-4xlfont-size: 2rem
text-5xlfont-size: 2.25rem
text-6xlfont-size: 3rem
text-7xlfont-size: 3.5rem

Usage

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

xs
The quick brown fox jumped over the lazy dog.
sm
The quick brown fox jumped over the lazy dog.
base
The quick brown fox jumped over the lazy dog.
lg
The quick brown fox jumped over the lazy dog.
xl
The quick brown fox jumped over the lazy dog.
2xl
The quick brown fox jumped over the lazy dog.
3xl
The quick brown fox jumped over the lazy dog.
4xl
The quick brown fox jumped over the lazy dog.
5xl
The quick brown fox jumped over the lazy dog.
6xl
The quick brown fox jumped over the lazy dog.
7xl
The quick brown fox jumped over the lazy dog.
<p class="text-xs ...">The quick brown fox ...</p>
<p class="text-sm ...">The quick brown fox ...</p>
<p class="text-base ...">The quick brown fox ...</p>
<p class="text-lg ...">The quick brown fox ...</p>
<p class="text-xl ...">The quick brown fox ...</p>
<p class="text-2xl ...">The quick brown fox ...</p>
<p class="text-3xl ...">The quick brown fox ...</p>
<p class="text-4xl ...">The quick brown fox ...</p>
<p class="text-5xl ...">The quick brown fox ...</p>
<p class="text-6xl ...">The quick brown fox ...</p>
<p class="text-7xl ...">The quick brown fox ...</p>

Responsive

To control the font size of an element at a specific breakpoint, add a {screen}: prefix to any existing font size utility. For example, use md:text-lg to apply the text-lg utility at only medium screen sizes and above.

<p class="text-base **md:text-lg** ...">The quick brown fox jumped over the lazy dog.</p>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.