Escolha cores, tipografia e unidades no CSS

Uma interface legível não nasce de colocar muitas cores e fontes na página. Ela nasce de uma hierarquia: o olhar percebe primeiro o mais importante e ainda consegue ler o restante com conforto. Nesta aula, você vai construir essa hierarquia com valores de cor, propriedades tipográficas e unidades CSS.

Tipografia é o sistema de escolhas aplicado ao texto: família, tamanho, peso, espaçamento e altura de linha. Pense na sinalização de um aeroporto. O destino precisa chamar atenção, mas horário e portão também precisam ser legíveis. Se tudo tiver o mesmo destaque, a pessoa demora para decidir para onde olhar. No CSS, font-size, font-weight e line-height estabelecem esses níveis. O limite da analogia é que uma página também precisa adaptar texto às preferências e ao dispositivo do usuário.

Dê nomes técnicos às escolhas de cor

A propriedade color define a cor do primeiro plano, normalmente o texto. background-color define a cor de fundo. Um valor hexadecimal tem canais de vermelho, verde e azul:

body {
  color: #1f2937;
  background-color: #f8fafc;
}

a {
  color: rgb(37 99 235);
}

Hexadecimal e rgb() são formas diferentes de representar cor, não níveis de qualidade. O critério importante é o contraste entre texto e fundo. Cor também não deve carregar uma informação sozinha: um erro pode ter vermelho, mas precisa de texto ou ícone que explique o problema.

Monte uma escala tipográfica curta

Comece com uma família disponível no sistema e poucos níveis:

body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

h1 {
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 750;
}

font-family aceita alternativas porque uma fonte pode não existir naquele computador. line-height sem unidade multiplica o tamanho do texto. No exemplo, o corpo usa uma altura de linha equivalente a 1,6 vez a própria fonte. Isso dá espaço para as linhas sem amarrá-las a um número fixo.

Escolha a referência da medida

px é uma unidade absoluta no modelo do CSS. rem é relativa ao tamanho de fonte do elemento raiz; em, ao tamanho do próprio elemento ou do pai, conforme a propriedade; % depende da referência definida para aquela propriedade. Pense em uma receita: “20 gramas” é uma quantidade fixa; “metade da mistura” depende do total. Da mesma forma, uma medida relativa só faz sentido quando você identifica sua referência.

Use rem para tamanhos de fonte e espaçamentos que devem acompanhar a escala do documento. Use % quando a dimensão deve ser uma fração do espaço disponível. px continua útil para detalhes controlados, como uma borda fina. Não existe uma unidade vencedora para toda situação.

No laboratório, altere :root de 16px para 20px. O título em 2rem e os espaçamentos em rem crescem; a borda em 2px permanece igual. Essa é a volta ao comportamento técnico: a referência de cada unidade determina o resultado. Depois troque a cor principal e verifique se categoria, borda e botão continuam coerentes. Sua microprática é prever cada mudança antes de executar.

Na próxima aula, vamos descobrir por que largura, preenchimento e borda podem produzir uma caixa maior do que o número escrito em width.