Aperfeiçoando o Texto com Utilitários de Tipografia
O Tailwind CSS oferece um conjunto robusto de utilitários para gerenciar tipografia, permitindo controlar facilmente tamanhos de fonte, pesos de fonte e alturas de linha. Esses utilitários ajudam a garantir que o texto seja estilizado de forma consistente e de fácil leitura em diferentes dispositivos e tamanhos de tela.
Tamanho da Fonte
Os utilitários de tamanho de fonte no Tailwind CSS permitem ajustar o tamanho do texto. Esses utilitários seguem uma convenção de nomenclatura que facilita a compreensão e aplicação de diferentes tamanhos.
| Font Size | Description |
|---|---|
text-xs | Extra small text. |
text-sm | Small text. |
text-base | Base text (default size). |
text-lg | Large text. |
text-xl | Extra large text. |
text-2xl, text-3xl, text-4xl, text-5xl, text-6xl | Increasingly larger text sizes. |
index.html
Peso da Fonte
As utilidades de peso da fonte controlam a espessura ou intensidade do texto. O Tailwind CSS oferece diversas utilidades para abranger uma ampla variedade de pesos de fonte, desde o mais fino até o mais intenso.
| Font Weight | Description |
|---|---|
font-thin | Thin font weight. |
font-light | Light font weight. |
font-normal | Normal font weight. |
font-medium | Medium font weight. |
font-semibold | Semi-bold font weight. |
font-bold | Bold font weight. |
font-extrabold | Extra bold font weight. |
font-black | Black font weight. |
index.html
Altura da Linha
As utilidades de altura da linha controlam o espaçamento vertical entre as linhas de texto. Uma altura de linha adequada pode melhorar a legibilidade e a aparência visual geral dos blocos de texto.
| Line Height | Description |
|---|---|
leading-none | No line height. |
leading-tight | Tight line height. |
leading-snug | Snug line height. |
leading-normal | Normal line height. |
leading-relaxed | Relaxed line height. |
leading-loose | Loose line height. |
leading-3, leading-4, leading-5, etc. | Specific numeric line height. |
index.html
Nota
Para obter informações específicas sobre tamanho da fonte, peso da fonte ou altura da linha, acesse os seguintes links:
1. Qual classe deve ser utilizada para definir o tamanho da fonte como extra grande?
2. Qual classe utilitária você usaria para deixar o texto em negrito?
3. Qual classe define o espaçamento entre linhas como relaxado?
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Can you give examples of how to use these typography utilities in Tailwind CSS?
What are the best practices for combining font size, weight, and line height?
Are there any tips for making text more readable with Tailwind CSS?
Awesome!
Completion rate improved to 3.57Aperfeiçoando o Texto com Utilitários de Tipografia
Deslize para mostrar o menu
O Tailwind CSS oferece um conjunto robusto de utilitários para gerenciar tipografia, permitindo controlar facilmente tamanhos de fonte, pesos de fonte e alturas de linha. Esses utilitários ajudam a garantir que o texto seja estilizado de forma consistente e de fácil leitura em diferentes dispositivos e tamanhos de tela.
Tamanho da Fonte
Os utilitários de tamanho de fonte no Tailwind CSS permitem ajustar o tamanho do texto. Esses utilitários seguem uma convenção de nomenclatura que facilita a compreensão e aplicação de diferentes tamanhos.
| Font Size | Description |
|---|---|
text-xs | Extra small text. |
text-sm | Small text. |
text-base | Base text (default size). |
text-lg | Large text. |
text-xl | Extra large text. |
text-2xl, text-3xl, text-4xl, text-5xl, text-6xl | Increasingly larger text sizes. |
index.html
Peso da Fonte
As utilidades de peso da fonte controlam a espessura ou intensidade do texto. O Tailwind CSS oferece diversas utilidades para abranger uma ampla variedade de pesos de fonte, desde o mais fino até o mais intenso.
| Font Weight | Description |
|---|---|
font-thin | Thin font weight. |
font-light | Light font weight. |
font-normal | Normal font weight. |
font-medium | Medium font weight. |
font-semibold | Semi-bold font weight. |
font-bold | Bold font weight. |
font-extrabold | Extra bold font weight. |
font-black | Black font weight. |
index.html
Altura da Linha
As utilidades de altura da linha controlam o espaçamento vertical entre as linhas de texto. Uma altura de linha adequada pode melhorar a legibilidade e a aparência visual geral dos blocos de texto.
| Line Height | Description |
|---|---|
leading-none | No line height. |
leading-tight | Tight line height. |
leading-snug | Snug line height. |
leading-normal | Normal line height. |
leading-relaxed | Relaxed line height. |
leading-loose | Loose line height. |
leading-3, leading-4, leading-5, etc. | Specific numeric line height. |
index.html
Nota
Para obter informações específicas sobre tamanho da fonte, peso da fonte ou altura da linha, acesse os seguintes links:
1. Qual classe deve ser utilizada para definir o tamanho da fonte como extra grande?
2. Qual classe utilitária você usaria para deixar o texto em negrito?
3. Qual classe define o espaçamento entre linhas como relaxado?
Obrigado pelo seu feedback!
