Textos sobre design

Por onde começar

Dois destes mudam o jeito de trabalhar em vez de apenas explicar alguma coisa. A razão de contraste do WCAG transforma uma discussão estética em um número que qualquer um pode conferir, e px contra rem contra em resolve uma decisão que determina em silêncio se o seu site respeita o tamanho de fonte que alguém escolheu no navegador.

Depois desses, hex, RGB e HSL é a base sobre a qual os outros textos de cor se apoiam, e é curto.

O que estes textos têm em comum

Cada valor de uma folha de estilos é uma decisão que alguém tomou sobre uma troca, e a maioria tem um padrão que vence em silêncio quando ninguém decide. Uma unidade escolhe entre o seu controle e o do leitor. Um espaço de cor escolhe entre como um valor é guardado e como é percebido. Uma razão de contraste escolhe entre a aparência que você queria e as pessoas que conseguem ler.

O que se escreve aqui é sobre o que cada valor realmente controla, inclusive nos casos em que a resposta honesta é que não importa. Canto arredondado e sombra de caixa são quase só sintaxe. sRGB contra Display P3 e escolher cores para o modo escuro não são, e os dois pegam de surpresa quem supôs que uma paleta simplesmente se transferiria.

Perguntas frequentes

É melhor usar px, rem ou em no CSS?

Use rem para tamanhos de fonte e quase todos os espaçamentos, porque escala com a configuração do navegador e quem aumentou o texto padrão recebe o que pediu. Use em quando um valor deve escalar em relação ao tamanho de fonte do próprio elemento, como o preenchimento dentro de um botão. Use px para o que é realmente fixo, como uma borda de um pixel.

Por que minhas cores ficam mais apagadas depois de exportar uma captura?

Porque o original foi capturado em um gamut amplo como Display P3 e o destino assumiu sRGB. Os números são transferidos sem o perfil que lhes dava sentido, então as cores saturadas caem dentro do espaço menor e achatam. Converter de propósito, em vez de deixar acontecer sozinho, preserva a intenção.

Dá para montar um tema escuro invertendo o claro?

Não com bom resultado. Branco puro sobre preto puro produz um halo que dificulta a leitura, cores saturadas parecem brilhar contra um fundo escuro, e toda razão de contraste que passava no tema claro precisa ser medida de novo. Um tema escuro é uma segunda paleta, não uma transformação da primeira.