Propriedade font-size
Última atualização: 2026-09-13
font-size Propriedade font-size
A propriedade font-size do CSS define o tamanho do texto. Ela aceita palavras-chave absolutas, comprimentos fixos ou unidades relativas como em e rem, e é uma das propriedades de estilo de texto mais usadas.
| Categoria | |
|---|---|
| Valor Inicial | medium |
| Herdado | Sim |
| Aplica-se A | all |
| Tipo de Animação | font-weight |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
font-size: xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | <length> | <percentage>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | Palavra-chave | Palavras-chave de tamanho absoluto |
<length> | Tipo | Um tamanho de fonte fixo, por exemplo 16px |
<percentage> | Tipo | Uma porcentagem relativa ao tamanho da fonte do elemento pai |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| font-size | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： Prefira unidades relativas (em/rem) para o tamanho da fonte, de modo que o texto se ajuste às configurações do usuário e a layouts responsivos.
Aviso： Evite palavras-chave absolutas como xx-small ou x-small; elas são renderizadas de forma inconsistente entre navegadores.
❓ Perguntas Frequentes
QQual é a diferença entre as unidades px, em e rem no CSS?
Apx é um valor de pixel fixo que não muda com o contexto; em é relativo ao tamanho da fonte do elemento pai e se acumula com o aninhamento; rem é relativo ao elemento raiz (html) e não é afetado pelo aninhamento. Use rem ou clamp() para layouts responsivos, em quando quiser dimensionamento relativo a um pai, e px para valores como bordas que não devem escalar com a fonte.
QQual é o tamanho de fonte padrão que os navegadores usam para páginas web?
AO valor padrão é medium, que a maioria dos navegadores renderiza como 16px. Definir html { font-size: 62.5% } faz 1rem equivaler a 10px, o que simplifica cálculos em múltiplos de dez, mas observe que afeta todos os elementos que usam rem, então use com cuidado.
QComo um valor em porcentagem de font-size é calculado em relação ao pai?
AUma porcentagem é resolvida em relação ao tamanho da fonte do elemento pai: se o pai for 16px, font-size: 150% equivale a 24px. Ela escala proporcionalmente com o pai, comportando-se como em, e convém para texto enfatizado ou listas que precisam escalar com seu contexto.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
