Auge
Paletas derivadas do círculo de Goethe, combinação de famílias com hierarquia, legibilidade medida e um compilado trimestral de tendências. Escolha por onde começar.
Revista
Artigos curtos sobre cor, tipografia e percepção, para ler ou ouvir. Cada um tem data, referências verificadas, arquivos para baixar e uma música para acompanhar.
Teoria
Duas ferramentas e uma base teórica comum. A de cor deriva paletas a partir do círculo de Goethe, de intenções, de setores, de métodos de estúdio, de referências culturais e de dinâmicas musicais. A de tipografia faz o mesmo com famílias tipográficas e combinações. Esta página explica o que está por trás das duas.
Em 1810, Goethe recusou a explicação de Newton e colocou o olho no centro: o que vemos depende do objeto, da iluminação e da percepção. Daí ele deriva um círculo de seis matizes, um lado positivo e um negativo, uma intensificação em direção ao purpúreo, e três regimes de combinação.
Amarelo, vermelho-amarelo, escarlate. Goethe os descreve como ativos, quentes, que se aproximam de quem olha. O amarelo é a cor imediatamente vizinha da luz; o vermelho-amarelo é o lado ativo em sua maior energia.
Azul, vermelho-azul. Passivos, frios, que afastam. O azul carrega consigo um princípio de treva: atrai e ao mesmo tempo puxa para longe.
Cada lado pode ser empurrado em direção ao vermelho. No purpúreo os dois se encontram — é o cume, ao qual Goethe atribui dignidade e gravidade.
A união do amarelo com o azul. Ali, diz ele, olho e alma descansam: não se quer ir além, e não se pode.
As cores são atos da luz, atos e sofrimentos.
Goethe, Zur Farbenlehre, prefácio, 1810
Antes do vocabulário moderno de esquemas, Goethe já classificava as combinações em três — e dava seu veredito sobre cada uma.
opostos no círculo
Os opostos do círculo. O olho, forçado a uma só cor, produz por conta própria a oposta, e só então se sente completo. Carregam em si a condição de totalidade: é o par mais estável e o menos surpreendente.
um espaço de distância
Um espaço de distância no círculo — amarelo e azul, amarelo e vermelho, azul e vermelho. Dizem alguma coisa, ainda que não tudo. É onde mora quase todo trabalho interessante.
vizinhas no círculo
Vizinhas no círculo. Não produzem efeito desagradável, mas ficam aquém: falta-lhes caráter. Servem quando outra coisa carrega o sistema.
O que o século XX chamou de esquemas são relações geométricas no círculo. Todos estão no instrumento de cor, e a geometria é preservada enquanto você arrasta as bolas.
Monocromático varia luminosidade e croma num só matiz. Análogo fica em vizinhança. Complementar cruza o círculo. Tríade divide em três. Complementar dividido troca o oposto pelos dois vizinhos dele — mantém a tensão e reduz o choque. Tetrádico forma um retângulo e entrega dois pares opostos.
Uma paleta se comporta de dois modos diferentes conforme o suporte, e confundir os dois é a origem de boa parte da frustração entre tela e impressão. Arraste os círculos abaixo: as sobreposições são calculadas de verdade pelo navegador, somando ou subtraindo.
Feixes de luz somados. Vermelho, verde e azul se sobrepõem e produzem ciano, magenta e amarelo; os três juntos dão branco. É o modelo da tela, do projetor, do LED. Somar luz clareia.
Tintas que filtram a luz refletida pelo papel. Ciano, magenta e amarelo sobrepostos absorvem quase tudo e tendem ao preto — na prática um preto sujo, por isso a impressão acrescenta o K. Somar pigmento escurece.
Todo espaço de cor é um sistema de coordenadas. A diferença está em o que as coordenadas medem: números convenientes para a máquina, ou distâncias que o olho reconhece. HSL é do primeiro tipo. OKLab, do segundo. Estas ferramentas calculam tudo em OKLab, e o que vem abaixo mostra por quê.
Em HSL, "luminosidade 55%" é a média entre o canal mais forte e o mais fraco, sem nenhuma relação com o brilho que o olho vê. Um amarelo e um azul declarados com a mesma luminosidade parecem um claro e um escuro. Em OKLab, o L é calibrado sobre medições de percepção: dois tons com o mesmo L parecem igualmente claros, seja qual for o matiz. Mova o controle abaixo e compare as duas fileiras.
Ao misturar duas cores, a máquina desenha uma linha reta entre elas. Em RGB e HSL, essa linha atravessa uma zona morta: o meio do caminho entre um azul e um amarelo é um cinza sujo. Em OKLab a linha passa por tons que ainda têm vida, porque o espaço foi desenhado para que a reta pareça uma transição. É o que faz o degradê e as escalas de tom destas ferramentas.
Nem toda cor que o OKLab descreve existe em sRGB: um azul muito claro e muito saturado não cabe na tela. A saída fácil é cortar os canais que passam de 255, e o resultado muda de matiz. A saída certa, que estas ferramentas usam, é reduzir o croma por busca binária até a cor caber, mantendo o L e o matiz. A cor fica menos intensa, mas continua sendo a mesma cor.
OKLab foi publicado por Björn Ottosson em 2020 como uma correção prática dos espaços CIELAB e IPT, ajustada para que as distâncias e os matizes batessem melhor com os dados perceptivos. Entrou no CSS Color 4 e é hoje o espaço recomendado para interpolar cor no navegador.
A mesma sequência de oito matizes, com a luminosidade fixada no valor do controle. Em HSL o brilho salta de um matiz para o outro; em OKLab fica estável.
A faixa de cima é a mistura em RGB, a de baixo em OKLab. O marcador mostra a cor no ponto escolhido em cada uma. Toque nas duas bolinhas para trocar as cores de partida pelas da sua paleta.
Uma combinação pode ser bonita e ilegível ao mesmo tempo. A razão de contraste do WCAG não mede beleza: mede a diferença de luminância entre o texto e o fundo, que é o que decide se uma pessoa com visão comum, cansada ou reduzida consegue ler. Experimente abaixo.
O olho pede totalidade: diante de uma cor, produz por conta própria a que falta.
Texto grande, 24 px em negrito — pede 3,0 para 1.
Texto corrido, 16 px — pede 4,5 para 1. Este parágrafo é o que mais importa, porque é o que as pessoas leem por mais tempo.
Interface e ícones — 3,0 para 1
Cada cor vira uma luminância relativa, de 0 (preto) a 1 (branco), com os canais RGB linearizados e ponderados pela sensibilidade do olho (o verde pesa 71%, o vermelho 21%, o azul 7%). A razão é (L clara + 0,05) dividido por (L escura + 0,05). Vai de 1 (mesma cor) a 21 (preto sobre branco).
Texto corrido: 4,5 para 1 (nível AA) ou 7 para 1 (AAA). Texto grande, a partir de 24 px ou 19 px em negrito: 3,0 (AA) ou 4,5 (AAA). Elementos de interface e ícones: 3,0. Abaixo de 3,0 nada é legível para uma parte grande das pessoas, mesmo que pareça nítido para você.
O azul pesa pouco na luminância, por isso um azul saturado sobre branco passa e um laranja igualmente saturado falha: o laranja carrega muito verde e vermelho, que são claros para o olho. Duas cores de matizes opostos e mesmo brilho, as mais vibrantes lado a lado, costumam ter razão perto de 1: elas vibram exatamente porque o olho não consegue separá-las por luminância.
Ela não vê tamanho, peso, espaçamento nem o cansaço. Um texto que passa com 4,6 em corpo 16 e peso fino continua difícil. E a fórmula não distingue daltonismo: para isso, as ferramentas simulam as três formas de visão de cor reduzida. A razão é o mínimo, não o suficiente.
O olho pede totalidade: diante de uma cor, produz por conta própria a que falta.
Goethe, Zur Farbenlehre, § 805
A escolha de uma família começa por identificar a que família histórica ela pertence — porque é isso que define como ela se comporta em texto longo, em tamanho grande e em tela pequena.
A altura das minúsculas em relação às maiúsculas. Alta lê bem em tamanho pequeno e em tela; baixa tem elegância e pede corpo maior. Duas famílias com alturas de x muito diferentes brigam quando postas lado a lado.
A diferença entre a haste grossa e a fina. Alto contraste — as modernas, as didonas — brilha em título e some em corpo pequeno. Baixo contraste aguenta condições ruins de leitura.
O quanto letras como c, e, s se fecham. Aberturas amplas mantêm as letras distinguíveis à distância e em corpo pequeno; fechadas dão densidade e ar editorial.
Condensada economiza espaço e acelera; estendida ocupa e desacelera. O ritmo entre letra e contraforma é o que faz um parágrafo parecer uniforme ou manchado.
O comprimento da linha. Entre 45 e 75 caracteres é a faixa em que o olho encontra o início da próxima linha sem esforço. Linha longa demais exige mais entrelinha para compensar.
Os tamanhos derivam de uma razão constante — quarta justa, quinta, áurea. A hierarquia fica previsível e as decisões param de ser arbitrárias.
O erro comum é buscar semelhança. Duas famílias parecidas não se harmonizam: elas competem, e a diferença pequena parece defeito.
Uma serifada de alto contraste no título contra uma sem serifa humanista no corpo. A diferença é clara, a hierarquia se resolve sozinha e nenhuma das duas parece erro.
Famílias desenhadas juntas para conviver — a versão serifada, a sem serifa e a monoespaçada do mesmo projeto. Harmonia garantida, contraste menor, risco de monotonia.
Toda a hierarquia feita por peso, tamanho, largura e caixa. É a saída mais difícil de errar e a que mais depende de disciplina de espaçamento.
Mesmo com estruturas diferentes, altura de x e largura próximas fazem as duas parecerem escolhidas juntas. É o critério que o instrumento usa para pontuar as combinações.
Uma família tipográfica chega em vários formatos, e cada um serve a um lugar. Confundi-los custa peso na página, licenças mal usadas ou recursos que não aparecem. O essencial cabe numa tabela.
| Formato | Ano | Onde usar | Tamanho relativo | O que é |
|---|---|---|---|---|
| WOFF2 | 2014 | Web, sempre | 1× | O padrão da web. Compressão Brotli, cerca de 30% menor que WOFF. Todo navegador atual lê. |
| WOFF | 2009 | Web, só como reserva | 1,4× | O primeiro empacotamento para a web, com compressão zlib. Só faz sentido para navegadores muito antigos. |
| OTF | 1996 | Desktop, impressão, apps | 2× | OpenType: um contêiner que pode trazer curvas cúbicas (CFF) e recursos como ligaturas, versaletes e algarismos alternativos. |
| TTF | 1991 | Desktop, apps, Android | 2× | TrueType: curvas quadráticas e instruções de ajuste de pixel. Universal, mas costuma ser maior que o OTF equivalente. |
| Variável | 2016 | Web e desktop | 1 arquivo em vez de 6 a 18 | Um só arquivo com eixos contínuos: peso, largura, tamanho óptico, inclinação. Substitui a família inteira e anima entre pesos. |
| EOT, SVG | 1997, 2008 | Nenhum lugar | — | Formatos do Internet Explorer e do iOS antigo. Não devem mais ser publicados. |
Só WOFF2, com um subconjunto latino (e latino estendido se houver acentos além do português). Se a família tem três pesos ou mais, a versão variável em WOFF2 costuma pesar menos do que dois arquivos estáticos e dá acesso a todos os pesos intermediários. Declare font-display: swap e pré-carregue apenas a fonte do texto principal.
OTF quando existir, porque traz os recursos OpenType completos e curvas mais leves; TTF quando o software pede. Para impressão e PDF, os dois se incorporam sem problema.
Uma fonte completa pode trazer cirílico, grego e vietnamita que a peça nunca vai usar. Os bancos entregam subconjuntos por escrita; no CSS, unicode-range faz o navegador baixar só o bloco necessário. É a maior economia depois do WOFF2.
Emoji e famílias de exibição em várias cores usam as tabelas COLR/CPAL ou OpenType-SVG, dentro de um arquivo OTF ou WOFF2 normal. Ícones como fonte foram substituídos por SVG inline na maioria dos projetos.
Uma licença de desktop não cobre a publicação de WOFF2 num site, e a de web costuma limitar visitas por mês. Famílias livres (SIL Open Font License, Apache) permitem os dois usos e a conversão entre formatos; as comerciais precisam ser lidas uma a uma.
A página de Tipografia gera o @font-face para cada formato e o link da CDN do Fontsource, que serve WOFF2 já subconjuntado.
Uma paleta bonita pode ser ilegível, e o olho de quem a escolheu é o pior juiz disso. Esta grade responde a uma pergunta prática: se eu escrever com uma cor desta paleta sobre um fundo de outra, alguém consegue ler?
O número é a razão de contraste entre as duas — quanto maior, mais separadas elas estão para o olho. Cada célula está pintada com o par de verdade, então a própria grade mostra o resultado: onde o número some, o texto também some.
A linha é o fundo, a coluna é o texto. Toque numa célula para ver o par em tamanho real e corrigir o que não passa.
Arraste as paradas na régua. O espaço de interpolação muda tudo: em sRGB dois tons cruzados passam por um meio cinzento; em OKLab o caminho é perceptualmente reto e não afunda.
Arquivos de imagem para apresentação, arquivos de troca para software de design, e código para implementação.
Nada salvo ainda. Fica só neste navegador.
A paleta e as famílias aplicadas a peças reais, em pacotes por campo: digital, produtos, papel, rua, vestuário e telas em ambiente. Tudo é desenhado aqui, em vetor, e sai em SVG ou PNG.
Cada nível tem família, peso, degrau da escala, entrelinha, entreletra, caixa e cor próprios. Toque num nível para ajustá-lo; use o botão da direita para ligar e desligar os que o projeto não usa.
| Nível | Família | Corpo | Peso | Entrelinha | Cor |
|---|
Cole aqui o texto real do projeto. Cada linha vira um nível da hierarquia, e a amostra abaixo se redesenha ao vivo com a paleta, o corpo e a escala escolhidos.
Comece a linha com # para título, ## para subtítulo, ### para rótulo, > para citação, ! para destaque, -- para referência, e envolva em [colchetes] para botão. Linha sem prefixo vira parágrafo.
Todas as famílias deste instrumento vêm de bancos que permitem baixar, hospedar e usar comercialmente. Vale conferir a licença de cada uma no próprio banco antes de distribuir.
| Banco | O que é | Formato entregue |
|---|
Nada salvo ainda.
A paleta e as famílias aplicadas a peças reais, em pacotes por campo: digital, produtos, papel, rua, vestuário e telas em ambiente. Tudo é desenhado aqui, em vetor, e sai em SVG ou PNG.
Descreva o que você precisa fazer. O instrumento atravessa os dois anteriores — o círculo de Goethe do lado da cor, o banco de famílias do lado da tipografia — e devolve três propostas completas, cada uma com paleta, combinação tipográfica, aplicação desenhada e o raciocínio por trás.
As três nunca são variações da mesma ideia: a primeira lê a convenção do campo, a segunda a contraria, e a terceira entra por um caminho lateral. Tudo é calculado no seu navegador, sem consultar nada fora dele.
Cole o texto real do projeto: cada proposta abaixo o redesenha ao vivo com a própria paleta e as próprias famílias. Corpo, escala, medida, entrelinha e entreletra valem para as três, e mudam na hora.
Comece a linha com # para título, ## para subtítulo, ### para rótulo, > para citação, ! para destaque, -- para referência e [texto] para botão.
A paleta e as famílias aplicadas a peças reais, em pacotes por campo: digital, produtos, papel, rua, vestuário e telas em ambiente. Tudo é desenhado aqui, em vetor, e sai em SVG ou PNG.
Um compilado trimestral do que as casas de previsão, as fundições tipográficas e os observatórios de comportamento estão publicando — reduzido a quatro eixos: cor, tipografia, combinações e aplicações. Cada eixo vira um banner que você pode baixar, e a paleta e as famílias de cada edição abrem direto nos outros instrumentos.
Quatro resumos em formato de cartão, gerados a partir da edição escolhida. Saem em SVG vetorial ou PNG de 1200 por 630, que é a medida de pré-visualização de link.
As edições anteriores continuam acessíveis. Nada é apagado quando entra uma nova.
Todo o conteúdo vive numa única estrutura de dados no código, a constante TREND, com uma entrada por trimestre. Acrescentar uma edição é inserir um objeto no começo da lista, com período, resumo, os quatro eixos e as fontes de cada um. Nada mais precisa ser tocado: as abas, os banners, o arquivo e os botões que levam aos instrumentos se montam sozinhos a partir dela.
Marque o que precisa e baixe tudo num pacote só.