Propriedade CSS font-size

A propriedade CSS font-size define o tamanho do texto. É uma das propriedades tipográficas mais utilizadas e, como unidades como em, ex e % são calculadas em relação a ela, o valor escolhido também afeta o tamanho de outros elementos que dependem dela.

Esta página abrange todas as formas de especificar um tamanho de fonte — palavras-chave, comprimentos e percentagens — explica como as unidades relativas (em, rem, ex, vw/vh) são calculadas e mostra qual abordagem usar em cada situação.

Formas de definir o tamanho da fonte

Você pode definir font-size de quatro formas principais:

absolute-size — uma palavra-chave fixa de uma escala predefinida.
relative-size — uma palavra-chave que ajusta o tamanho herdado para cima ou para baixo.
length — um número explícito seguido de uma unidade.
percentage — um valor relativo ao tamanho de fonte do elemento pai.

As palavras-chave absolute-size mapeiam para uma escala fixa definida pelo navegador:

xx-small
x-small
small
medium (o valor inicial)
large
x-large
xx-large

As palavras-chave relative-size ajustam o tamanho para cima ou para baixo em relação ao valor herdado:

smaller
larger

Comprimentos podem ser relativos (em, ex, rem, ch, vw, vh, px) ou absolutos (in, cm, mm, pt, pc). Uma percentagem define o tamanho da fonte em relação ao tamanho de fonte do elemento pai — 150% equivale a uma vez e meia o tamanho do pai.

Qual devo usar?

Use rem para a maioria dos textos. Ele escala com a configuração de tamanho de fonte do navegador do usuário (bom para acessibilidade) e permanece previsível, pois é sempre relativo ao elemento raiz e não ao elemento pai.
Use em quando quiser que o espaçamento de um componente ou o texto filho escale junto com o tamanho de fonte do próprio componente.
Evite valores em pixels (px) para o texto do corpo se a acessibilidade for importante: pixels fixos ignoram o tamanho padrão preferido pelo leitor.

Valor Inicial	medium
Aplica-se a	Todos os elementos. Também se aplica a ::first-letter e ::first-line.
Herdado	Sim.
Animável	Sim.
Versão	CSS1
Sintaxe DOM	object.style.fontSize = "15px";

Sintaxe

Sintaxe da propriedade CSS font-size

font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit;

Exemplo da propriedade font-size:

Exemplo da propriedade CSS font-size com valores px, em, pt, x-small e % (percentagem)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        font-size: 24pt;
      }
      h3 {
        font-size: 26px;
      }
      p {
        font-size: 1em;
      }
      a {
        font-size: 100%;
      }
      span {
        font-size: x-small;
      }
    </style>
  </head>
  <body>
    <span>This span is written with x-small value.</span>
    <p>This paragraph is written with 1em font-size.</p>
    <a href="https://www.w3docs.com/">This hyperlink is written with 100% font-size.</a>
    <h3>We used x-small font size for this heading.</h3>
    <h1>We set the font size 24pt  for this heading.</h1>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Uso de valores em percentagem

Os valores em percentagem são relativos ao tamanho de fonte do elemento pai. No exemplo abaixo, o título está definido como 125%, portanto é renderizado com um quarto a mais do tamanho de fonte do corpo herdado:

Exemplo da propriedade font-size especificada em percentagem:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h3 {
        font-size: 125%;
      }
    </style>
  </head>
  <body>
    <h3>This heading is 125% of the body font size.</h3>
    <span>This span uses the default (inherited) size.</span>
    <p>This paragraph uses the default (inherited) size.</p>
  </body>
</html>

Uso da unidade em

A unidade em é considerada uma unidade relativa. Ela é baseada no valor calculado do tamanho de fonte do elemento pai. No código abaixo, o parágrafo terá 32px, pois 2×16=32, e o título terá um font-size de 48px pois 3×16=48px. Este método é muito útil porque podemos ter certeza de que todos os elementos filhos serão sempre relativos entre si.

Exemplo da propriedade font-size com o valor "em":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        font-size: 16px;
      }
      p {
        font-size: 2em;
      }
      h2 {
        font-size: 3em;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Here is the heading</h2>
      <p>Here is the text.</p>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Uso da unidade rem

Com a unidade rem, o font-size é sempre relativo ao elemento raiz <html>, independentemente de quão profundamente aninhado esteja o elemento. No exemplo abaixo, o elemento raiz tem 16px, então o título com 1.5rem = 1,5 × 16 = 24px. Como todo rem aponta para o mesmo valor raiz, você evita o problema de acumulação que as unidades em podem causar dentro de elementos aninhados.

Exemplo da propriedade font-size com o valor "rem":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        font-size: 16px;
      }
      h2 {
        font-size: 1.5rem;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Here is the heading</h2>
      <p>Here is the text.</p>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Uso da unidade ex

Com a unidade ex, 1ex equivale à altura-x — a altura da letra minúscula "x" — da fonte atual do elemento. Como a altura-x varia de fonte para fonte, um tamanho baseado em ex depende de qual fonte está em uso, tornando-o menos previsível do que em ou rem. No exemplo abaixo, o texto é dimensionado para 15 vezes a altura-x.

Propriedade CSS font-size

.exunit {
  font-size: 15ex;
}

Uso de unidades de viewport

As unidades de viewport (vw e vh) são usadas para definir o font-size de um elemento em relação ao tamanho do viewport.

1vw = 1% da largura do viewport
1vh = 1% da altura do viewport

Propriedade CSS font-size

.viewport {
  font-size: 120vh;
}

Exemplo da propriedade font-size com o valor "length":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        color: green;
        font-size: 2vh;
      }
      p {
        color: red;
        font-size: 1em;
      }
      .length {
        color: orange;
        font-size: 30px;
      }
      h3 {
        color: lightblue;
        font-size: 3ex;
      }
      h1 {
        color: purple;
        font-size: 24pt;
      }
      a {
        color: blue;
        font-size: 120%;
      }
    </style>
  </head>
  <body>
    <h2>Font-size property</h2>
    <span>This text is written with 2vh font-size.</span>
    <p>This paragraph is written with 1em font-size.</p>
    <div class="length">Example with 30px font-size length </div>
    <h3>Example with 3ex font-size length.</h3>
    <h1>We set the font size 24pt  for this heading.</h1>
    <a href="https://www.w3docs.com/">This hyperlink is written with 100% font-size.</a>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade font-size com valores absolute-size:

Exemplo da propriedade font-size (absolute-size):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .font-xxsmall {
        color: grey;
        font-size: xx-small;
      }
      .font-xsmall {
        color: grey;
        font-size: x-small;
      }
      .font-small {
        color: grey;
        font-size: small;
      }
      .font-medium {
        color: grey;
        font-size: medium;
      }
      .font-large {
        color: grey;
        font-size: large;
      }
      .font-xlarge {
        color: grey;
        font-size: x-large;
      }
      .font-xxlarge {
        color: grey;
        font-size: xx-large;
      }
    </style>
  </head>
  <body>
    <h1>Font-size property</h1>
    <div class="font-xxsmall">Example with font-size xx-small property</div>
    <div class="font-xsmall">Example with font-size x-small property</div>
    <div class="font-small">Example with font-size small property</div>
    <div class="font-medium">Example with font-size medium property</div>
    <div class="font-large">Example with font-size large property</div>
    <div class="font-xlarge">Example with font-size x-large property</div>
    <div class="font-xxlarge">Example with font-size xx-large property</div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade font-size com os valores "smaller" e "larger":

Exemplo da propriedade font-size com os valores "smaller" e "larger":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .smaller {
        color: red;
        font-size: smaller;
      }
      .larger {
        color: red;
        font-size: larger;
      }
    </style>
  </head>
  <body>
    <h1>font-size property</h1>
    <div class="smaller">Example with font-size smaller property</div>
    <div class="larger">Example with font-size larger property</div>
  </body>
</html>

Experimente Você Mesmo »

Valores

Valor	Descrição	Experimente
medium	Define o font-size como medium. Este é o valor padrão desta propriedade.	Experimente »
xx-small	Define o font-size como xx-small.	Experimente »
x-small	Define o font-size como x-small.	Experimente »
small	Define o font-size como small.	Experimente »
large	Define o font-size como large.	Experimente »
x-large	Define o font-size como x-large.	Experimente »
xx-large	Define o font-size como xx-large.	Experimente »
smaller	Torna o font-size menor.	Experimente »
larger	Torna o font-size maior.	Experimente »
length	Especifica o font-size em px, em etc.	Experimente »
%	Define o font-size como uma percentagem do tamanho de fonte do elemento pai.	Experimente »
initial	Faz a propriedade usar seu valor padrão.	Experimente »
inherit	Herda a propriedade do elemento pai.

Propriedades relacionadas

Para controlar o restante da tipografia de um elemento, combine font-size com estas propriedades:

font-family — escolha o tipo de letra.
font-weight — defina o peso do texto.
font-style — aplique estilo itálico ou oblíquo.
line-height — controle o espaçamento vertical entre linhas.
font — a propriedade abreviada que define várias delas de uma vez.

Prática

Quais unidades podem ser usadas para definir a propriedade 'font-size' no CSS?