Docs executáveis de CSS: Font-size CSS

Q: Como mudar o tamanho da fonte no CSS?

Defina a propriedade font-size no elemento: p { font-size: 18px; }. Ela aceita comprimentos (px, rem, em), porcentagens e palavras-chave como large.

Q: Como mudar o tamanho da fonte no HTML?

Com CSS, em uma folha de estilo ou em um atributo style: . A antiga tag está obsoleta no HTML5 e não deve ser usada.

Q: Devo usar px, em ou rem no font-size?

Use rem para a maior parte do texto: ele acompanha a configuração de fonte do navegador do usuário e não se multiplica. Use em quando um tamanho deve seguir o pai, como um ícone dentro de um botão. O px não segue o tamanho de fonte padrão que o leitor define no navegador, então evite-o no texto do corpo.

Q: Por que meu font-size em em fica cada vez maior?

Porque em é relativo ao tamanho de fonte do pai, então elementos aninhados se multiplicam: 1.2em dentro de 1.2em é 1,44 vez a base. Troque para rem, que é sempre relativo ao elemento raiz.

Como definir o tamanho da fonte no CSS

A propriedade font-size define o tamanho do texto. Coloque-a em qualquer elemento e todo texto dentro dele herda o tamanho, a menos que um filho defina o seu.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .small { font-size: 12px; }
    .normal { font-size: 16px; }
    .big { font-size: 1.5rem; }
    .huge { font-size: 48px; }
  </style>
</head>
<body>
  <p class="small">12px</p>
  <p class="normal">16px (the browser default)</p>
  <p class="big">1.5rem (24px)</p>
  <p class="huge">48px</p>
</body>
</html>

Para mudar o tamanho da fonte no HTML, você continua usando CSS. Acrescente um atributo style () ou uma regra em uma folha de estilo. A tag  dos anos 1990 está obsoleta e não tem lugar em uma página moderna.

As unidades que o font-size aceita

Valor	Exemplo	É relativo a
`px`	`16px`	Nada: um tamanho fixo
`rem`	`1.25rem`	O tamanho de fonte do elemento raiz `<html>` (16px por padrão)
`em`	`1.2em`	O tamanho de fonte do elemento pai
`%`	`120%`	O tamanho de fonte do pai, como `em` (`120%` é `1.2em`)
Palavra-chave	`large`	Uma escala predefinida em torno do padrão `medium`
Palavra-chave relativa	`smaller`, `larger`	Um degrau a partir do tamanho do pai
Viewport	`4vw`	A largura da viewport (4% dela)
Função	`clamp(1rem, 4vw, 2rem)`	Fluido entre um mínimo e um máximo

Digite um valor e veja o tamanho que o navegador calcula:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { border: 1px dashed #9ca3af; padding: 8px; margin: 12px 0; }
  </style>
</head>
<body>
  <label>font-size: <input id="val" value="1.5rem" size="20"></label>
  <p id="sample">The quick brown fox</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.fontSize = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).fontSize;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Experimente 20px, 2em, 150%, x-large, smaller e 5vw. Um valor inválido, como big, é ignorado e o texto mantém o último tamanho válido.

rem vs em: a diferença que pega

rem sempre olha para o elemento raiz, então 1.2rem tem o mesmo tamanho onde quer que apareça. em olha para o pai, então os tamanhos se multiplicam quando os elementos são aninhados:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>em compounds</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .em { font-size: 1.2em; }
    .rem { font-size: 1.2rem; }
    div { border-inline-start: 3px solid #2563eb; padding-inline-start: 8px; }
  </style>
</head>
<body>
  <div class="em">1.2em
    <div class="em">1.2em inside
      <div class="em" id="deep-em">1.2em inside again</div>
    </div>
  </div>
  <div class="rem">1.2rem
    <div class="rem">1.2rem inside
      <div class="rem" id="deep-rem">1.2rem inside again</div>
    </div>
  </div>
</body>
</html>

A caixa em mais interna tem 16 × 1.2 × 1.2 × 1.2 = 27.648px. A caixa rem mais interna continua com 19.2px. Essa multiplicação é útil em um componente cujas partes devem crescer juntas, e uma surpresa em todo o resto. A página de unidades compara todas as unidades de comprimento.

Palavras-chave: de xx-small a xx-large

As palavras-chave absolutas seguem uma escala fixa em torno de medium, que é igual ao tamanho padrão do usuário (16px, se ele não mudou):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size keywords</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-size: xx-small;">xx-small</p>
  <p style="font-size: x-small;">x-small</p>
  <p style="font-size: small;">small</p>
  <p style="font-size: medium;">medium</p>
  <p style="font-size: large;">large</p>
  <p style="font-size: x-large;">x-large</p>
  <p style="font-size: xx-large;">xx-large</p>
  <script>
    document.querySelectorAll('p').forEach((p) => {
      p.textContent += ': ' + getComputedStyle(p).fontSize;
    });
  </script>
</body>
</html>

Com os 16px padrão, small tem 13px, large 18px, x-large 24px e xx-large 32px. As palavras-chave servem para um trabalho rápido, mas um design system costuma querer a própria escala em rem.

Tamanho de fonte fluido com clamp()

Um título que deve crescer com a tela, mas nunca ficar pequeno ou grande demais, é uma chamada de clamp(): o mínimo, um tamanho preferido que acompanha a tela e o máximo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fluid heading</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 {
      /* never below 1.5rem, never above 3rem, 5vw in between */
      font-size: clamp(1.5rem, 5vw, 3rem);
      margin: 0;
    }
  </style>
</head>
<body>
  <h1 id="title">Fluid heading</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'computed: ' + getComputedStyle(document.getElementById('title')).fontSize;
  </script>
</body>
</html>

Em uma prévia com 800px de largura, 5vw dá 40px, que fica entre 24px e 48px, então ele vence. A página do clamp trata de tipografia fluida em detalhe.

Definir um tamanho base para a página toda

Defina o tamanho uma vez no body (ou no html) e dimensione todo o resto em relação a ele:

html { font-size: 100%; }  /* respects the user's setting, usually 16px */
body { font-size: 1rem; }
h1   { font-size: 2.25rem; }
small, .caption { font-size: 0.875rem; }

Evite truques como html { font-size: 62.5%; }, a menos que todo tamanho da página seja definido em rem depois, e nunca defina um tamanho fixo em px no html: isso sobrescreve o tamanho de fonte que o leitor escolheu no navegador, e há quem dependa disso para conseguir ler.

Observações de acessibilidade

Texto de corpo com 16px ou mais é um bom mínimo para leitura em tela.
Tamanhos em rem e em seguem a configuração de fonte padrão do usuário. Tamanhos em px seguem o zoom da página, mas não essa configuração.
No iPhone, o Safari dá zoom na página quando você foca um input com fonte menor que 16px. Dê aos campos de formulário font-size: 1rem ou mais para evitar isso.

Erros comuns

Usar a tag . Ela está obsoleta. Use a propriedade font-size.
Tamanhos em aninhados que crescem ou encolhem sem controle. Use rem, a menos que você queira a multiplicação.
Um tamanho fixo em px no html. Ele sobrescreve a configuração de fonte do próprio leitor.
Esquecer que os títulos já têm tamanho. <h1> tem 2em por padrão, então é preciso h1 { font-size: 1em; } se você quiser o tamanho do texto do corpo.
Só unidades de viewport. font-size: 3vw fica ilegível no celular e enorme em um monitor largo. Envolva em clamp().

Perguntas frequentes

Como mudar o tamanho da fonte no CSS?

Defina a propriedade font-size no elemento: p { font-size: 18px; }. Ela aceita comprimentos (px, rem, em), porcentagens e palavras-chave como large.

Como mudar o tamanho da fonte no HTML?

Com CSS, em uma folha de estilo ou em um atributo style: . A antiga tag  está obsoleta no HTML5 e não deve ser usada.

Qual é o tamanho de fonte padrão dos navegadores?

16px para o texto do corpo, a menos que o usuário tenha mudado isso nas configurações do navegador. É esse valor que 1rem e a palavra-chave medium valem por padrão.

Devo usar px, em ou rem no font-size?

Use rem para a maior parte do texto: ele acompanha a configuração de fonte do navegador do usuário e não se multiplica. Use em quando um tamanho deve seguir o pai, como um ícone dentro de um botão. O px não segue o tamanho de fonte padrão que o leitor define no navegador, então evite-o no texto do corpo.

Por que meu font-size em em fica cada vez maior?

Porque em é relativo ao tamanho de fonte do pai, então elementos aninhados se multiplicam: 1.2em dentro de 1.2em é 1,44 vez a base. Troque para rem, que é sempre relativo ao elemento raiz.

Conceitos relacionados