Estilizar texto com CSS: fontes, tamanho, peso, sublinhado, alinhamento
Playground de estilo de texto CSS
Texto em CSS: fonte, tamanho, negrito, sublinhado, centralizar | We.Inc
Um playground ao vivo para texto em CSS: família de fonte, tamanho em px, rem ou clamp(), peso, estilo do sublinhado, alinhamento, altura de linha e espaçamento, com classes do Tailwind.
Estilize texto em CSS com algumas poucas propriedades: font-family escolhe a fonte, font-size define o tamanho (rem é o melhor), font-weight: 700 deixa em negrito, text-decoration adiciona um sublinhado e text-align: center centraliza. line-height e letter-spacing controlam o espaçamento. Mude qualquer uma delas no playground abaixo e copie o CSS.
As propriedades que você mais vai usar
Objetivo
CSS
Tailwind
Negrito
font-weight: 700
Itálico
font-style: italic
Sublinhado
text-decoration: underline
Centralizar texto
text-align: center
Texto maior
font-size: 1.25rem
Linhas mais espaçadas
line-height: 1.6
leading-relaxed (1.625)
Em vez de seis páginas de referência separadas, este único playground cobre fonte, tamanho, peso, estilo, detalhes do sublinhado, alinhamento, altura de linha e espaçamento entre letras, escreve o CSS e as classes do Tailwind conforme você muda e traz receitas testadas para centralizar texto, font stacks e carregar fontes web.
Digite a sua própria frase no playground ou mantenha o texto de exemplo.
Mude os controles de fonte, unidade de tamanho, peso, decoração e espaçamento. A prévia e o CSS se atualizam na hora.
Copie o bloco de CSS, ou as classes do Tailwind com as mesmas configurações.
Use as receitas mais abaixo para centralizar, montar font stacks e usar @font-face.
O texto corrido fica mais legível entre 16 e 18 pixels, com altura de linha de 1.5 a 1.7 e linhas de cerca de 60 a 75 caracteres.
Defina os tamanhos de fonte em rem para que sigam a configuração do navegador do leitor. Use clamp() em títulos que devem crescer com a tela.
Carregue só os pesos de fonte que você usa. Cada peso extra de uma fonte web é mais um arquivo para baixar.
Evite sublinhar texto que não é link. Os leitores esperam que palavras sublinhadas sejam clicáveis.
Perguntas frequentes
Como deixo um texto em negrito com CSS?
Use font-weight: bold ou um número como 600 ou 700. Números entre 100 e 900 escolhem entre os pesos que a fonte oferece. Se a fonte só tiver o peso regular, o navegador simula o negrito engrossando as letras, o que fica mais pesado e menos nítido que um arquivo de negrito de verdade.
Como centralizo um texto na vertical?
text-align só centraliza na horizontal. Para centralizar na vertical dentro de uma caixa, transforme a caixa em um contêiner flex ou grid: display: grid; place-items: center; centraliza o texto nos dois sentidos em uma linha. Para uma única linha em uma barra de altura fixa, line-height igual à altura da barra também funciona.
Como mudo a cor ou a espessura do sublinhado?
Use text-decoration-color, text-decoration-thickness e text-underline-offset. Por exemplo, text-decoration: underline; text-decoration-color: #4F98FB; text-decoration-thickness: 2px; text-underline-offset: 4px; gera um sublinhado azul mais grosso com espaço abaixo das letras.
line-height deve ter unidade?
Geralmente não. Um valor sem unidade como 1.5 é multiplicado pelo tamanho de fonte de cada elemento, então títulos e letras miúdas dentro do bloco mantêm um espaçamento sensato. Um valor fixo como 24px é herdado como está e pode apertar textos maiores.
O que é um font stack?
Uma lista de fontes separadas por vírgula em font-family. O navegador usa a primeira disponível e desce na lista se ela estiver faltando, terminando em uma família genérica como sans-serif ou serif, que sempre existe.
Unidades de tamanho: px, rem e clamp()
Pixels dão um tamanho exato que ignora o tamanho de texto preferido pelo leitor. rem é relativo ao tamanho de fonte da raiz, 16px por padrão, então 1.125rem vale 18px para a maioria das pessoas e cresce para quem define um padrão maior.
clamp(min, preferred, max) serve para tamanhos que devem acompanhar a janela. clamp(1.75rem, 1.2rem + 2.5vw, 3rem) nunca fica menor que 28px nem maior que 48px e varia suavemente entre os dois. Mantenha uma parte em rem no valor do meio para que o zoom do navegador e as configurações de texto continuem fazendo efeito.
Padrões legíveis
A maioria dos problemas de leitura vem de três configurações: texto pequeno demais, linhas longas demais e linhas apertadas demais. Um max-width de cerca de 65ch nos parágrafos, um tamanho de fonte de pelo menos 1rem e uma altura de linha perto de 1.6 resolvem a maior parte antes de qualquer estilização.
Títulos grandes pedem o contrário: altura de linha mais justa, por volta de 1.1 a 1.2, e muitas vezes um letter-spacing levemente negativo. Rótulos pequenos em maiúsculas ficam mais legíveis com um pouco de letter-spacing positivo.
Carregar fontes web sem deixar a página lenta
Cada fonte web é um download que pode atrasar o texto. font-display: swap mostra a fonte reserva de imediato e troca quando a fonte web chega, então o leitor nunca fica olhando para texto invisível. Hospedar os arquivos WOFF2 você mesmo evita uma conexão com outro domínio.
Se você usa o Google Fonts, peça só as famílias e os pesos de que precisa em um único link e adicione as dicas de preconnect que ele sugere. Escolher uma fonte reserva no stack com proporções parecidas reduz o salto quando a fonte é trocada.
Centralizar texto na horizontal e na vertical
Horizontal: text-align
text-align centraliza as linhas dentro do bloco. Para centralizar o próprio bloco, dê a ele uma largura e margin-inline: auto.
Nos dois sentidos: grid com place-items
Duas linhas de CSS no contêiner centralizam qualquer conteúdo nas duas direções, seja qual for o tamanho.
Sublinhados com cara de design
Cor, espessura, deslocamento e estilo
As propriedades de decoração mudam o sublinhado sem mexer na cor do texto. text-decoration-skip-ink impede que as linhas cortem as letras descendentes.
Carregar uma fonte com @font-face ou Google Fonts
Fonte auto-hospedada com @font-face
Aponte src para o seu arquivo WOFF2. Um bloco para cada peso e estilo que você realmente usa.
Link do Google Fonts
Peça só os pesos que você usa. display=swap define o font-display para você.
Padrões legíveis para começar
Uma base de texto pequena e sensata
Tamanho do corpo, altura de linha e largura de linha definidos uma vez; títulos mais justos. Ajuste as cores e os tamanhos ao seu design.
Equivalentes no Tailwind
CSS e as classes correspondentes do Tailwind (tema padrão)