Tamanho e peso da fonte
Use text-sm até text-9xl e font-thin até font-black para controlar o destaque visual do seu texto.
Tamanho e peso da fonte é uma aula grátis de Tailwind CSS Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Tailwind CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Tailwind CSS Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
Tailwind's Font Size Scale
Set text size with the text-* scale, from text-xs up to text-9xl. Pick from these steps instead of typing pixels, and your typography stays consistent.
<p class="text-xs">Extra Small (12px)</p>
<p class="text-sm">Small (14px)</p>
<p class="text-base">Base (16px)</p>
<p class="text-lg">Large (18px)</p>
<p class="text-xl">Extra Large (20px)</p>
<p class="text-2xl">2XL (24px)</p>
<p class="text-4xl">4XL (36px)</p>
<p class="text-6xl">6XL (60px)</p>Display and Hero Text Sizes
For big display text on hero sections, reach for text-7xl, text-8xl, or text-9xl. Pair them with font-extrabold and tracking-tight for headlines that grab attention.
<h1 class="text-7xl font-black tracking-tight text-gray-900">
Make it big.
</h1>Font Weight Utilities
Control thickness with font weight: font-normal for body, font-semibold for labels, font-bold for headings, and font-extrabold or font-black for big emphasis.
<p class="font-thin">Thin (100)</p>
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>
<p class="font-extrabold">Extrabold (800)</p>
<p class="font-black">Black (900)</p>Combining Size and Weight
Size and weight are independent, so they team up: text-sm font-medium for a nav label, text-4xl font-bold for a heading. Together they build hierarchy.
<!-- Article typographic hierarchy -->
<h1 class="text-4xl font-bold text-gray-900 mb-2">Main Headline</h1>
<h2 class="text-2xl font-semibold text-gray-700 mb-4">Section Title</h2>
<p class="text-base font-normal text-gray-600 mb-2">Body paragraph text...</p>
<span class="text-xs font-medium text-gray-400">Caption or metadata</span>Responsive Font Sizes
Type can scale with the screen. Add a breakpoint prefix like md: to any size — text-3xl md:text-5xl is small on phones and large on desktops.
<h1 class="text-2xl md:text-4xl lg:text-6xl font-extrabold text-gray-900">
Scales with the screen
</h1>Font Style: Italic
Add italic to slant text and not-italic to reset it. It is great for quotes and citations — italic font-light text-gray-500 gives that classic testimonial feel.
<blockquote class="italic font-light text-gray-500 text-lg border-l-4 border-indigo-400 pl-4">
'Tailwind makes styling enjoyable again.'
</blockquote>
<cite class="text-sm font-medium text-gray-700">— A happy developer</cite>Font Variant Numeric
For numbers, tabular-nums makes every digit the same width, so prices and stats line up neatly in tables and columns. A small touch that looks very tidy.
<!-- Tabular numbers align in columns -->
<table>
<tr>
<td class="tabular-nums text-right">1,234.56</td>
</tr>
<tr>
<td class="tabular-nums text-right">98,765.00</td>
</tr>
</table>Practical: Navigation Typography
Nav links love a small, medium look: text-sm font-medium. Mark the active link by bumping it to font-semibold text-indigo-600 so it stands apart.
<nav class="flex gap-6">
<a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-900">Home</a>
<a href="#" class="text-sm font-semibold text-indigo-600">Products</a>
<a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-900">About</a>
</nav>Practical: Article Body Text
Comfortable body text is text-base or text-lg with relaxed spacing and text-gray-700, not harsh black. Add max-w-prose to keep lines at an easy reading width.
<article class="max-w-prose mx-auto">
<p class="text-lg font-normal text-gray-700 leading-relaxed">
This is body text set at a comfortable reading size.
The max-w-prose constraint keeps lines short enough
to read without losing your place.
</p>
</article>Practical: Data Display Typography
For dashboards, make numbers pop: text-3xl font-bold text-gray-900 for a value, with a smaller text-sm uppercase tracking-wider label above it.
<div class="text-center">
<p class="text-sm font-medium text-gray-500 uppercase tracking-wider">
Total Users
</p>
<p class="text-3xl font-bold text-gray-900 tabular-nums">
24,781
</p>
</div>Common Font Size Reference
A quick mental map: text-xs for captions, text-base for body, text-2xl to text-4xl for headings, text-5xl and up for hero text. Match each with the right weight.
Quick Check
Quick check! See how size and weight stuck. 🔤
Lesson Recap
Nice! text-* controls size, font-thin through font-black sets weight, and mixing size, weight, and color builds hierarchy. Next up: text color and opacity.
Perguntas Frequentes
A aula “Tamanho e peso da fonte” é grátis?
Sim — o texto completo de “Tamanho e peso da fonte” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Tailwind CSS Academy, atualize para CoddyKit PRO. O curso de Tailwind CSS Academy inclui 4 aulas no total.
O que vou aprender em “Tamanho e peso da fonte”?
Use text-sm até text-9xl e font-thin até font-black para controlar o destaque visual do seu texto. Você pratica Tailwind CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Tailwind CSS Academy?
Nenhuma experiência prévia é necessária. Tailwind CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Tamanho e peso da fonte”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Tailwind CSS Academy?
Sim. Cada aula de Tailwind CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Tamanho e peso da fonte
- Cor e opacidade do texto
- Altura da linha e espaçamento entre letras
- Alinhamento e decoração do texto