Fontes e tamanhos
A escolha de fonte muda completamente a personalidade de uma página, mesmo com o mesmo texto e o mesmo layout por baixo.
Estudar esta lição interativa →Duas páginas com exatamente o mesmo HTML podem parecer completamente diferentes só pela fonte escolhida: uma serifada remete a jornal ou livro; uma sem serifa (sans-serif) remete a interface digital moderna. A propriedade font-family controla essa escolha, e a boa prática é sempre listar mais de uma opção, em ordem de preferência, como plano B caso a primeira não esteja disponível no dispositivo de quem visita.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Três famílias de fonte lado a lado: serifada, sem serifa e monoespaçada.
Um exemplo de produto real: sites de código (como documentação técnica ou o próprio GitHub) usam fonte monoespaçada especificamente para trechos de código, porque cada caractere ocupa a mesma largura, o que alinha colunas de código perfeitamente, algo que uma fonte comum não garante. Já o texto normal da interface desses mesmos sites usa uma fonte sem serifa, mais legível em telas pequenas.
Nem todo dispositivo tem toda fonte instalada. font-family: 'Segoe UI', Arial, sans-serif; tenta a primeira, cai para a segunda se a primeira faltar, e por fim usa qualquer fonte sem serifa do sistema (a última opção genérica, sempre disponível) se nenhuma das nomeadas existir. Nunca deixe de terminar a lista com uma opção genérica (serif, sans-serif ou monospace).
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Ajuste font-family e font-size.