font-size
En esta página
| Clase | Propiedades CSS |
|---|---|
text-xs |
font-size: var(--text-xs); /* 0.75rem (12px) */ \nline-height: var(--text-xs--line-height); /* calc(1 / 0.75) */ |
text-sm |
font-size: var(--text-sm); /* 0.875rem (14px) */ \nline-height: var(--text-sm--line-height); /* calc(1.25 / 0.875) */ |
text-base |
font-size: var(--text-base); /* 1rem (16px) */ \nline-height: var(--text-base--line-height); /* calc(1.5 / 1) */ |
text-lg |
font-size: var(--text-lg); /* 1.125rem (18px) */ \nline-height: var(--text-lg--line-height); /* calc(1.75 / 1.125) */ |
text-xl |
font-size: var(--text-xl); /* 1.25rem (20px) */ \nline-height: var(--text-xl--line-height); /* calc(1.75 / 1.25) */ |
text-2xl |
font-size: var(--text-2xl); /* 1.5rem (24px) */ \nline-height: var(--text-2xl--line-height); /* calc(2 / 1.5) */ |
text-3xl |
font-size: var(--text-3xl); /* 1.875rem (30px) */ \nline-height: var(--text-3xl--line-height); /* calc(2.25 / 1.875) */ |
text-4xl |
font-size: var(--text-4xl); /* 2.25rem (36px) */ \nline-height: var(--text-4xl--line-height); /* calc(2.5 / 2.25) */ |
text-5xl |
font-size: var(--text-5xl); /* 3rem (48px) */ \nline-height: var(--text-5xl--line-height); /* 1 */ |
text-6xl |
font-size: var(--text-6xl); /* 3.75rem (60px) */ \nline-height: var(--text-6xl--line-height); /* 1 */ |
text-7xl |
font-size: var(--text-7xl); /* 4.5rem (72px) */ \nline-height: var(--text-7xl--line-height); /* 1 */ |
text-8xl |
font-size: var(--text-8xl); /* 6rem (96px) */ \nline-height: var(--text-8xl--line-height); /* 1 */ |
text-9xl |
font-size: var(--text-9xl); /* 8rem (128px) */ \nline-height: var(--text-9xl--line-height); /* 1 */ |
text-(length:<custom-property>) |
font-size: var(<custom-property>); |
text-[<value>] |
font-size: <value>; |
Examples#
Basic example#
Use utilities like text-sm and text-lg to set the font size of an element:
{
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<!-- [!code classes:text-sm,text-base,text-lg,text-xl,text-2xl] -->
<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>
Setting the line-height#
Use utilities like text-sm/6 and text-lg/7 to set the font size and line-height of an element at the same time:
{
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
<!-- [!code classes:text-sm/6,text-sm/7,text-sm/8] -->
<p class="text-sm/6 ...">So I started to walk into the water...</p>
<p class="text-sm/7 ...">So I started to walk into the water...</p>
<p class="text-sm/8 ...">So I started to walk into the water...</p>
Using a custom value#
Responsive design#
Customizing your theme#
You can also provide default line-height, letter-spacing, and font-weight values for a font size:
@theme {
--text-tiny: 0.625rem;
--text-tiny--line-height: 1.5rem; /* [!code highlight] */
--text-tiny--letter-spacing: 0.125rem; /* [!code highlight] */
--text-tiny--font-weight: 500; /* [!code highlight] */
}