Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Aperfeiçoando o Texto com Utilitários de Tipografia | Conceitos Fundamentais e Estilização Básica
Tailwind CSS para Desenvolvimento Web

bookAperfeiç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 SizeDescription
text-xsExtra small text.
text-smSmall text.
text-baseBase text (default size).
text-lgLarge text.
text-xlExtra large text.
text-2xl, text-3xl, text-4xl, text-5xl, text-6xlIncreasingly larger text sizes.
index.html

index.html

copy

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 WeightDescription
font-thinThin font weight.
font-lightLight font weight.
font-normalNormal font weight.
font-mediumMedium font weight.
font-semiboldSemi-bold font weight.
font-boldBold font weight.
font-extraboldExtra bold font weight.
font-blackBlack font weight.
index.html

index.html

copy

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 HeightDescription
leading-noneNo line height.
leading-tightTight line height.
leading-snugSnug line height.
leading-normalNormal line height.
leading-relaxedRelaxed line height.
leading-looseLoose line height.
leading-3, leading-4, leading-5, etc.Specific numeric line height.
index.html

index.html

copy

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?

question mark

Qual classe deve ser utilizada para definir o tamanho da fonte como extra grande?

Select the correct answer

question mark

Qual classe utilitária você usaria para deixar o texto em negrito?

Select the correct answer

question mark

Qual classe define o espaçamento entre linhas como relaxado?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 7

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Awesome!

Completion rate improved to 3.57

bookAperfeiç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 SizeDescription
text-xsExtra small text.
text-smSmall text.
text-baseBase text (default size).
text-lgLarge text.
text-xlExtra large text.
text-2xl, text-3xl, text-4xl, text-5xl, text-6xlIncreasingly larger text sizes.
index.html

index.html

copy

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 WeightDescription
font-thinThin font weight.
font-lightLight font weight.
font-normalNormal font weight.
font-mediumMedium font weight.
font-semiboldSemi-bold font weight.
font-boldBold font weight.
font-extraboldExtra bold font weight.
font-blackBlack font weight.
index.html

index.html

copy

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 HeightDescription
leading-noneNo line height.
leading-tightTight line height.
leading-snugSnug line height.
leading-normalNormal line height.
leading-relaxedRelaxed line height.
leading-looseLoose line height.
leading-3, leading-4, leading-5, etc.Specific numeric line height.
index.html

index.html

copy

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?

question mark

Qual classe deve ser utilizada para definir o tamanho da fonte como extra grande?

Select the correct answer

question mark

Qual classe utilitária você usaria para deixar o texto em negrito?

Select the correct answer

question mark

Qual classe define o espaçamento entre linhas como relaxado?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 7
some-alt