Curso de CSS / Fontes, tamanho do texto e altura de linha
Use font-family para definir uma lista de fontes alternativas, font-size para configurar o tamanho do texto e line-height para controlar o espaçamento entre linhas. Um line-height sem unidade se adapta ao tamanho da fonte de cada elemento, facilitando o gerenciamento de estilos de texto herdados.
Defina uma lista de fontes alternativas em ordem
body {
font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;
}O navegador verifica a lista de fontes em ordem. Se uma fonte não estiver disponível ou não tiver um caractere, outra fonte pode renderizar esse caractere, portanto, uma frase pode usar várias fontes. sans-serif é uma família genérica sem serifas, em vez de um produto de fonte específico. Coloque entre aspas os nomes de fontes que contêm espaços.
Listar uma fonte em font-family não a baixa. Este exemplo usa fontes instaladas e não carrega nenhuma fonte da web separada. Para usar uma fonte da web, forneça seu arquivo real através de @font-face ou de uma folha de estilo de provedor, e verifique a URL e a permissão para usá-la. Veja MDN: font-family.
Escolha o tamanho e o peso da fonte para cada função
| Propriedade | valor de exemplo | Resultados a verificar |
|---|---|---|
| font-size | Corpo 1rem, título 2rem | Se a raiz for 16px, então 16px·32px |
| font-weight | Corpo 400, Título 700 | Diferença entre letras normais e em negrito |
| line-height | Texto 1,6 | Altura da linha igual a 1,6 vezes o tamanho da fonte |
rem é baseado no tamanho de fonte do HTML. Diferentes preferências de navegador podem resultar em valores de pixel diferentes para o mesmo 1rem. Antes de alterar o texto para px fixo porque o texto parece pequeno, verifique o valor raiz e a fonte real. Mesmo que o tamanho seja o mesmo, o tamanho visual e a posição da quebra de linha variam dependendo do design da fonte. Para comparar as referências das unidades, consulte Cores e unidades CSS: px, em, rem e porcentagens.
400 geralmente corresponde a normal, e 700 corresponde a bold. Os resultados variarão dependendo do peso fornecido pela fonte, e pesos ausentes podem ser substituídos por valores próximos ou sintetizados. Significados importantes no documento são expressos usando strong do HTML, e a espessura visual é controlada usando CSS. Nem todas as letras em negrito são semanticamente significativas.
Compare a herança de line-height com número e com em
line-height ajuda a determinar a altura de uma caixa de linha; não significa simplesmente o espaço vazio entre os caracteres, e não é o mesmo que a altura do glifo. Use margin separadamente para espaçamento entre parágrafos. Para mais detalhes, veja Estilos de parágrafos e listas com CSS.
Compare quando o tamanho da fonte do pai é 16px e o tamanho da fonte do filho é 32px. O line-height: 1.6 do pai herda o múltiplo em si, resultando em uma altura de linha do filho de 51,2px. line-height: 1.6em herda a medida de 25,6px calculada a partir do seu pai. Se as letras grandes do seu filho ocuparem várias linhas, as linhas podem parecer apertadas ou sobrepostas.
| declaração parental | Altura de linha do pai 16px | Altura de linha herdada pelo filho 32px |
|---|---|---|
| line-height: 1.6 | 25,6px | 51,2px |
| line-height: 1.6em | 25,6px | 25,6px |
Esses cálculos de herança assumem que o elemento filho não possui uma declaração line-height separada. Um valor declarado no elemento filho tem precedência sobre um herdado. Uma linha de base sem unidade facilita o ajuste do tamanho de títulos e outros textos enquanto mantém a altura de linha proporcional. Veja MDN: altura da linha.
Limite a largura de leitura
max-width: 65ch limita a largura de leitura usando a largura de avanço do glifo “0” da fonte. Isso não garante exatamente 65 caracteres por linha. A quebra real depende da fonte, peso, caracteres e largura disponível. Escolha uma largura útil lendo parágrafos longos realistas.
A referência de comprimento CSS define unidades relativas à fonte, incluindo ch, e explica suas medidas de referência. Veja MDN: comprimento.
Verifique fontes renderizadas e valores calculados
Salve todo o código abaixo como UTF-8 em fonts.html e abra-o em seu navegador. Inclui parágrafos com fontes pequenas e parágrafos de comparação de 32px para que você possa verificar a relação entre tamanho e espaçamento entre linhas.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Compare fonts and line spacing</title>
<style>
html { font-size: 100%; }
body { margin: 24px; color: #333; font-family: "Noto Sans KR", "Malgun Gothic", sans-serif; }
main { max-width: 65ch; }
h1 { font-size: 2rem; font-weight: 700; }
.copy { font-size: 1rem; font-weight: 400; line-height: 1.6; }
.compare { font-size: 16px; margin-block: 24px; padding: 16px; background: #eef6f2; }
.unitless { line-height: 1.6; }
.length { line-height: 1.6em; }
.large { margin: 0; font-size: 32px; }
</style>
</head>
<body>
<main>
<h1>Small Garden fonts</h1>
<p class="copy">The garden has plants that prefer sunlight and plants that grow in shade. Read their labels to find a suitable location for each one. Adjust the line spacing of this long paragraph to compare how easily the same text can be read.</p>
<h2>Unitless line height</h2>
<div class="compare unitless"><p class="large">Line spacing scales with the font size.</p></div>
<h2>Line spacing specified by em</h2>
<div class="compare length"><p class="large">The computed line height is inherited from the parent.</p></div>
</main>
</body>
</html>- Selecione o parágrafo body nas ferramentas de desenvolvimento. A font-family em Computed é uma lista de candidatos e não garante o nome real da fonte em uso. No Chrome·Edge, você pode verificar as fontes reais usadas em Rendered Fonts dentro de Computed. Outros navegadores podem ter estruturas de menu diferentes, como um painel dedicado para fontes.
- Compare a altura de linha calculada de dois parágrafos .large. O valor sem unidade é 51,2px e o valor em em é 25,6px. Altere 1.6em no segundo elemento pai para 1.6 para ver se a diferença desaparece, depois reverta.
- Altere a altura de linha de .copy para 1.2 e 1.8, um valor de cada vez. Certifique-se de que o posicionamento das linhas mude enquanto mantém o tamanho da fonte. É difícil perceber a diferença apenas olhando para frases curtas de uma linha, então use parágrafos longos.
- Altere a largura máxima de main para 45ch. Verifique se o parágrafo quebra mais cedo e depois reverta para 65ch. Se a largura da sua janela já for estreita o suficiente, alterar o limite superior pode fazer pouca diferença.
O guia Chrome DevTools para fontes locais também explica como inspecionar Rendered Fonts. Se a fonte esperada estiver ausente, verifique sua instalação e os caracteres suportados. Para uma fonte da web vinculada separadamente, inspecione sua resposta e quaisquer erros de bloqueio no painel Network. Uma fonte instalada localmente pode ser usada sem uma solicitação de rede, então uma solicitação ausente sozinha não indica falha da fonte.
