Para aplicar as cores da marca a uma fonte colorida, descubra quais posições da paleta pintam cada parte dos caracteres. Em seguida, defina uma paleta com @font-palette-values e aplique seu nome ao título com font-palette. Trabalhe com palavras reais antes de fechar as cores. Uma combinação que parece equilibrada na letra de amostra pode pintar de um jeito muito diferente um acento, uma vírgula ou a parte mais fina de um número.

Quando uma fonte colorida ajuda a composição?

Comece por um trecho curto que merece tratamento gráfico próprio. O nome de uma série editorial, a data de um festival ou a abertura de um catálogo são bons pontos para experimentar. Nesses casos, a cor pode separar o desenho das letras do corpo de texto sem criar uma imagem para cada título. Se a página contém muitos títulos vizinhos, monte uma amostra com o conjunto completo. Um único título colorido pode orientar a leitura, enquanto vários blocos no mesmo tratamento podem disputar espaço.

Mantenha o texto na estrutura da página e deixe o estilo a cargo da fonte. Isso permite atualizar o nome, selecionar uma palavra e reproduzir o conteúdo quando a fonte demora a carregar. Para uma assinatura que precisa conservar uma composição muito específica, compare a versão digitada com o arquivo oficial da marca. Se o desenho original combina letras desenhadas à mão e proporções ajustadas individualmente, a paleta de uma fonte só resolve a distribuição de cores. Avalie separadamente a forma, a proporção e o espaçamento antes de decidir onde cada recurso será usado.

Como descobrir o que cada índice pinta?

Monte uma página de prova com a palavra que será publicada, seguida de outras letras, números e sinais que podem aparecer. Use o mesmo arquivo que o site vai carregar. Se a fonte oferece mais de uma paleta, comece pela indicada na documentação da família ou teste a primeira. Para descobrir o que o índice zero controla, atribua a ele uma cor temporária fácil de reconhecer. Repita com o índice um e siga até identificar as partes que você quer personalizar.

Anote o que mudou em cada índice. A mesma posição pode pintar o preenchimento de uma letra e o reflexo de outra. Uma fonte com gradiente também pode usar um índice numa parada de cor cuja influência aparece distribuída ao longo da forma. A introdução da equipe do Chrome ao COLRv1 mostra recursos como gradientes e composição em camadas. Ao revisar a fonte escolhida, confira também se o arquivo inclui a pontuação e os acentos necessários em português. O título de uma edição futura pode revelar uma lacuna que o nome atual nunca usa.

Como declarar a paleta no CSS?

Para uma família chamada Cartaz, um ponto de partida é @font-palette-values --cartaz-dia { font-family: "Cartaz"; base-palette: 0; override-colors: 0 #22204c, 1 #ad3b30; }. O elemento que usa essa família recebe font-palette: --cartaz-dia. O nome precisa ser o mesmo nos dois pontos e a família declarada na regra precisa corresponder à fonte usada. Substitua os índices do exemplo pelos que você observou na prova.

Se o desenho já tem cores secundárias satisfatórias, mantenha os índices correspondentes sem alteração. A regra preserva as entradas da paleta base onde não há substituição. O rascunho do módulo CSS Fonts 4 detalha os descritores da regra e como os índices são aplicados. Para criar uma versão escura, declare outra paleta com nome distinto. Teste primeiro o preenchimento principal sobre a superfície escura e depois revise contornos, sombras e reflexos. Assim fica mais fácil identificar qual camada precisa mudar quando um trecho perde definição.

Como preservar a leitura do título?

Faça uma prova em escala real antes de conferir a ampliação. Procure as partes do desenho que carregam o reconhecimento da palavra, como hastes, curvas e acentos. O preenchimento principal de uma letra pode ter contraste confortável e a parte fina do acento ainda desaparecer sobre o fundo. Veja o título no celular, sobre a superfície exata em que ele será publicado. Se a página usa mais de um fundo, teste cada fundo com a mesma palavra antes de adicionar uma paleta diferente.

Para começar o ajuste, reduza o protagonismo das camadas decorativas e mantenha a forma essencial legível. Evite avaliar o título apenas pela média das cores. Inspecione as partes que realmente encostam no fundo e as regiões onde a própria letra mistura duas cores próximas. O guia de contraste em sites ajuda a montar a prova com o tamanho e o peso de texto reais. Se a leitura continuar difícil após ajustar a paleta, teste a mesma palavra em outra fonte. Um desenho muito delicado pode exigir uma escala maior do que a composição comporta.

O que muda se a fonte falhar ou vier sem um glifo?

Defina uma segunda família na pilha e teste a página bloqueando a requisição da fonte principal. Confira se o título mantém espaço suficiente para quebrar e se os botões abaixo continuam alcançáveis. A cor de texto comum precisa funcionar nesse estado, inclusive quando o navegador usa a segunda família para um único caractere. Alguns arquivos oferecem glifos monocromáticos que ajudam nessa transição. Confirme a existência deles no arquivo que o site realmente usa.

Repita a prova com um título que tenha caracteres como Ã, ç e ê, além de algarismos e sinais. Compare a altura aparente, o alinhamento do acento e o espaço até a linha seguinte. Se a quebra mudar quando entra uma família diferente, ajuste a largura ou a altura de linha do componente em vez de forçar espaços dentro do texto. Para títulos que ocupam duas linhas, o guia de quebras de linha com text-wrap: balance mostra como revisar a composição conforme a largura varia.

Como entregar a paleta para a próxima edição?

Guarde uma amostra com palavras e números que representem o projeto. Inclua a versão clara, a escura e a versão em que a família de reserva é usada. Anote ao lado de cada amostra qual arquivo foi carregado, os índices alterados e quais camadas precisam continuar legíveis. Quando a fonte receber uma atualização, repita o teste de mapeamento para confirmar que os índices ainda pintam as mesmas partes. Conserve o título em texto durante esse processo para que a prova passe pelas mesmas regras de largura e quebra da página pública.

Teste uma atualização completa usando o nome mais comprido que a equipe espera publicar. Simule uma conexão lenta e confira se a altura do bloco muda a ponto de empurrar outros elementos. Depois, passe pelos temas e volte ao primeiro para verificar se a paleta inicial é restaurada. Deixe registrada a combinação de fundo e fonte aprovada para cada caso. Com essa referência, quem editar a página pode testar um título novo sem precisar reconstruir o estudo de cores de cada camada.

Se a tipografia também aparecer em miniaturas de compartilhamento, compare a versão exportada com a página. Uma captura feita antes de a fonte terminar de carregar pode gravar a família de reserva na imagem. Aguarde a confirmação de carregamento no fluxo de exportação e confira uma palavra com acento. Na imagem final, veja a miniatura em tamanho reduzido, porque camadas legíveis em tela cheia podem se fundir. A equipe pode reservar a paleta mais simples para essa escala e registrar essa escolha junto das amostras. Compare a legibilidade dos algarismos, especialmente quando duas datas aparecem lado a lado.