Propriedade CSS font-weight – Valores, Dicas e Exemplos

A propriedade CSS font-weight define o quão negrito ou espesso os caracteres de uma fonte aparecem. Você pode especificar o peso com uma palavra-chave (normal, bold), uma palavra-chave relativa (bolder, lighter), ou um valor numérico de 100 a 900.

Um tipo gráfico geralmente inclui vários pesos distintos como arquivos de fonte separados. O navegador só consegue renderizar os pesos que a fonte efetivamente fornece. Muitas fontes incluem apenas dois — normal (400) e bold (700) — portanto, solicitar font-weight: 300 pode redirecionar para o peso disponível mais próximo em vez de desenhar uma variante verdadeiramente leve. As fontes variáveis são a exceção: elas incorporam um eixo de peso contínuo e podem renderizar qualquer valor sem arquivos separados.

Esta página aborda valores de palavras-chave e numéricos, como bolder / lighter são resolvidos, animação de peso e o que esperar quando um peso solicitado não está disponível.

Valor Inicial	normal
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.fontWeight = "bolder";`

Sintaxe

font-weight: normal | bold | bolder | lighter | <number> | initial | inherit;

Valores

Valor	Descrição
`normal`	Peso padrão. Equivalente a `400`.
`bold`	Peso negrito. Equivalente a `700`.
`bolder`	Um passo mais pesado que o peso calculado do elemento pai (veja a tabela abaixo).
`lighter`	Um passo mais leve que o peso calculado do elemento pai (veja a tabela abaixo).
`100`–`900`	Peso numérico em passos de 100 — do mais fino (100) ao mais pesado (900).
`initial`	Redefine para o valor inicial da propriedade (`normal`).
`inherit`	Herda o peso calculado do elemento pai.

Exemplo básico

O exemplo abaixo aplica bolder a um parágrafo para que ele apareça mais pesado que o texto ao redor.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.bolder {
        font-weight: bolder;
      }
    </style>
  </head>
  <body>
    <h2>Font-weight property example</h2>
    <p class="bolder">We used a bolder text here.</p>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Todos os valores de palavras-chave e numéricos

O exemplo abaixo coloca todos os valores principais lado a lado para que você possa compará-los visualmente.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.normal {
        font-weight: normal;
      }
      p.lighter {
        font-weight: lighter;
      }
      p.bold {
        font-weight: bold;
      }
      p.bolder {
        font-weight: bolder;
      }
      p.fweight {
        font-weight: 600;
      }
    </style>
  </head>
  <body>
    <h2>Font-weight property example</h2>
    <p class="normal">We used normal weight here.</p>
    <p class="lighter">This is a lighter weight.</p>
    <p class="bold">We used bold weight here.</p>
    <p class="bolder">We used a bolder text here.</p>
    <p class="fweight">We set font-weight 600 here.</p>
  </body>
</html>

Experimente Você Mesmo »

A escala de peso numérico

Os valores numéricos vão de 100 (mais fino) a 900 (mais espesso) em passos de 100. Cada passo tem um nome convencional usado por designers tipográficos:

Valor	Nome comum
100	Thin (Hairline)
200	Extra Light (Ultra Light)
300	Light
400	Normal (Regular)
500	Medium
600	Semi Bold (Demi Bold)
700	Bold
800	Extra Bold (Ultra Bold)
900	Black (Heavy)

normal mapeia para 400 e bold mapeia para 700, portanto esses pares palavra-chave/número são sempre intercambiáveis. Use um valor numérico quando precisar de controle mais fino — por exemplo, font-weight: 500 fornece um cabeçalho "médio" que é mais pesado que o texto do corpo, mas mais leve que um cabeçalho totalmente negrito.

Quando a fonte não tem o peso solicitado

Se a fonte não fornece o peso exato que você solicita, o navegador recorre ao peso mais próximo disponível. É por isso que font-weight: 100 e font-weight: 300 podem parecer idênticos quando a fonte inclui apenas 400 (Regular) e 700 (Bold). Sempre carregue ou declare os pesos específicos que o seu design usa — consulte @font-face e font-display para saber como fazer isso de forma eficiente.

Como bolder e lighter são resolvidos

bolder e lighter são relativos ao peso herdado do elemento pai. Eles não simplesmente somam ou subtraem 100. Em vez disso, o navegador mapeia o peso calculado do pai para uma escala mais grosseira de três níveis antes de aplicar o passo:

Peso herdado	`bolder` torna-se	`lighter` torna-se
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

Isso significa que aninhar dois elementos bolder não continua ficando cada vez mais pesado indefinidamente — ao atingir 900, permanece nesse valor.

<!DOCTYPE html>
<html>
  <head>
    <title>bolder resolution example</title>
    <style>
      .parent {
        font-weight: 400; /* normal */
      }
      .child {
        font-weight: bolder; /* resolves to 700 */
      }
      .grandchild {
        font-weight: bolder; /* resolves to 900, then stops */
      }
    </style>
  </head>
  <body>
    <p class="parent">
      Parent at normal (400).
      <span class="child">
        Child becomes bold (700).
        <span class="grandchild">Grandchild becomes black (900).</span>
      </span>
    </p>
  </body>
</html>

Animando font-weight

font-weight é animável, portanto você pode fazer a transição entre pesos de forma suave com transições CSS ou animações. A interpolação suave funciona apenas com fontes variáveis, pois as fontes estáticas possuem apenas arquivos de peso discretos. Em uma fonte estática, o navegador passa para o peso disponível mais próximo no ponto médio da transição.

.heading {
  font-weight: 400;
  transition: font-weight 0.3s ease;
}

.heading:hover {
  font-weight: 700;
}

Para mudanças de peso contínuas e suaves — por exemplo, um efeito hover que desliza do fino ao negrito — use uma fonte variável com a propriedade font-variation-settings:

.heading {
  /* "wght" is the weight axis on variable fonts */
  font-variation-settings: "wght" 400;
  transition: font-variation-settings 0.3s ease;
}

.heading:hover {
  font-variation-settings: "wght" 700;
}

Dicas e acessibilidade

Carregue os pesos que você usa. Ao buscar fontes do Google Fonts ou outro serviço, solicite cada peso explicitamente na URL ou no descritor @font-face. Se um peso não for carregado, o navegador sintetiza um negrito falso que geralmente é de qualidade inferior à variante real.
Não use o peso sozinho para transmitir significado. Texto em negrito é apenas uma pista visual. Para texto que precisa carregar importância semântica, use <strong> (que possui font-weight: bold por padrão) para que as tecnologias assistivas possam comunicar a ênfase.
Fique atento ao contraste em pesos leves. Os pesos 100–300 reduzem a espessura dos traços e podem ficar abaixo dos limites de contraste do WCAG, especialmente em tamanhos pequenos e em fundos coloridos. Verifique as proporções de contraste com a ferramenta de seleção de cores e mantenha o texto do corpo em 400 ou mais pesado.
Prefira valores numéricos em sistemas de design. Palavras-chave como bold são imprecisas. Usar 700 torna a intenção explícita e mais fácil de auditar.

Propriedades relacionadas

font — abreviação que define font-weight junto com estilo, tamanho e família em uma única declaração.
font-style — controla as variantes itálico e oblíquo.
font-size — define o tamanho do texto.
font-family — escolhe qual tipo gráfico é usado.
@font-face — declara fontes personalizadas e seus intervalos de peso disponíveis.
font-display — controla como o navegador renderiza o texto enquanto uma fonte personalizada está sendo carregada.

Prática

O que a propriedade CSS 'font-weight' controla?

Ela especifica o peso ou espessura da fonte.Ela especifica o estilo da fonte.Ela define como as extremidades das linhas são desenhadas quando as fontes são delineadas.Ela determina se o texto é apresentado em peso negrito ou normal.Ela determina a largura das tabulações no texto.

Peso herdado	`bolder` torna-se	`lighter` torna-se
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

Peso herdado	`bolder` torna-se	`lighter` torna-se
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

Peso herdado	`bolder` torna-se	`lighter` torna-se
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700