Tipografia avançada: dar uma voz à marca

A tipografia é a voz, não a decoração

A apresentação da landing Sereno correu bem — muito bem, até. Mas à saída da sala, o cliente deixou escapar uma frase que muda o seguimento do projeto: «É bonito. Agora quero que se reconheça a Sereno de olhos fechados.» O diretor do Studio Mango olha para ti: «Isso é tipografia.» Ele tem razão: uma interface é composta a 90 % por texto. Muda a tipografia de um produto e mudas a sua voz — antes mesmo da cor, antes das imagens.

No capítulo 2, definiste uma escala de tamanhos em rácio 1,25 e duas famílias escolhidas um pouco à pressa. Era suficiente para prototipar; já não é suficiente para uma identidade. Este capítulo desce um andar: como ler a personalidade de uma fonte, como casar duas sem dissonância, como afinar a medida e os detalhes de microtipografia que separam o amador do profissional — e como tornar tudo isso fluido entre mobile e desktop com uma única linha de CSS.

Ler a personalidade de uma fonte

Uma fonte não é «bonita» ou «feia»: tem traços de carácter mensuráveis. As serifas (as pequenas terminações das letras) evocam a herança, a edição, o calor; a sua ausência evoca a neutralidade moderna. O contraste entre cheios e finos — a diferença de espessura dentro de uma mesma letra — traz elegância quando é forte, robustez quando é fraco. A altura de x (o tamanho das minúsculas em relação às maiúsculas) influencia a legibilidade nos tamanhos pequenos. As formas abertas ou fechadas de letras como o «e» ou o «a» tornam uma fonte acolhedora ou rígida.

Não precisas de te tornar tipógrafo: precisas deste vocabulário para fazer um briefing. E a IA é também aqui um excelente professor particular — mostra-lhe duas fontes e pergunta: «compara a personalidade da Fraunces e da Playfair Display em termos de serifas, contraste e formas; qual traduz melhor “calma premium calorosa” e porquê?». Obténs uma análise argumentada, e sobretudo as palavras para justificar a tua escolha ao cliente amanhã.

Casar duas famílias sem nota falsa

A regra de ouro do casamento tipográfico cabe numa frase: contraste franco ou parentesco total, nunca o meio-termo. Duas fontes quase idênticas (duas sem serifa geométricas, por exemplo) criam uma dissonância subtil — o olho sente que algo está errado sem saber o quê. Duas fontes francamente diferentes (uma serifada com carácter forte para os títulos, uma sem serifa neutra para o corpo) valorizam-se mutuamente. É o duo mais seguro, e é o da Sereno: a Fraunces que fala, a Inter que se apaga.

Segundo critério, menos conhecido: a altura de x comparável. Se a fonte de títulos tiver minúsculas proporcionalmente muito maiores do que a do corpo, as duas parecerão mal calibradas lado a lado, mesmo com tamanhos «idênticos». Por fim, limita-te a duas famílias — a terceira fica reservada a casos muito particulares (código a apresentar, um número de dashboard em display). Cada família suplementar é um peso de carregamento e um risco de cacofonia.

Propõe 3 pares de fontes Google Fonts para a Sereno, app de meditação, direção «calma, premium, calorosa»:
- para cada par: a fonte de títulos, a fonte de corpo, e 2 frases que justifiquem o casamento em termos de serifas, contraste cheios/finos e altura de x
- restrição: a fonte de corpo deve manter-se impecável a 16 px e em espessura 400
- exclui: as fontes vistas em todo o lado sem intenção (nada de Montserrat nem de Roboto por defeito)
Depois recomenda UM par e explica em que se distingue dos outros dois para este produto preciso.

A medida: 45 a 75 caracteres, nem mais um

A medida é o comprimento de uma linha de texto, contado em caracteres. Abaixo de 45, o olho salta de linha sem parar e a leitura torna-se entrecortada; acima de 75, o olho perde-se no regresso à linha e relê a mesma linha duas vezes. A zona de conforto situa-se entre 45 e 75 caracteres, com um ideal à volta de 65 para os textos longos. É o erro mais frequente da web: parágrafos esticados por toda a largura de um ecrã de 27 polegadas, ou seja, 150 caracteres ou mais — ilegível, por mais cuidado que tenha o resto.

A solução cabe numa propriedade: max-width: 65ch nos blocos de texto (a unidade ch vale aproximadamente a largura de um carácter da fonte corrente). Combina-a com a altura de linha: quanto mais longa a medida, mais generosa deve ser a entrelinha para ajudar o olho a encontrar a linha seguinte. E quanto ao alinhamento, uma regra simples na web: alinhado à esquerda, nunca justificado — a justificação cria rios de espaços irregulares que os navegadores gerem mal, sobretudo sem hifenização.

/* Bloco de leitura confortável */
.prose {
  max-width: 65ch;          /* medida: ~65 caracteres */
  font-size: var(--text-base);
  line-height: var(--leading-body);  /* 1.6 para esta medida */
  text-align: left;          /* nunca justify na web */
  text-wrap: pretty;         /* evita palavras órfãs no fim do parágrafo */
}

.prose + .prose { margin-top: var(--space-6); }

/* Os títulos: medida mais curta, entrelinha apertada */
h1, h2 {
  max-width: 22ch;
  line-height: var(--leading-tight);
  text-wrap: balance;        /* equilibra as linhas dos títulos */
}

A tipografia fluida com clamp()

A tua escala do capítulo 2 é estática: um h1 a 3,052 rem tem esse tamanho em todo o lado. Ora, 49 px é perfeito em desktop e esmagador num telemóvel de 375 px. A resposta clássica era uma cascata de media queries; a resposta moderna cabe numa função: clamp(min, valor-fluido, max). Dás um tamanho mínimo, um tamanho máximo, e entre os dois um valor que respira com a largura do ecrã (em vw). O título cresce continuamente de 2 rem em mobile até 3,05 rem em desktop, sem nenhum salto.

Um detalhe de acessibilidade crucial: nunca uses vw sozinho na parte fluida. Um tamanho em vw puro ignora o zoom do navegador — um utilizador com baixa visão que faça zoom a 200 % veria o texto… ficar do mesmo tamanho. A fórmula segura combina sempre uma parte em rem e uma parte em vw: clamp(2rem, 1.4rem + 2.6vw, 3.05rem). O rem garante que o zoom e as preferências de tamanho de letra do sistema são respeitados.

:root {
  /* Escala fluida — rácio 1.25 conservado nos extremos */
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --text-xl:   clamp(1.35rem, 1.2rem + 0.8vw, 1.75rem);
  --text-2xl:  clamp(1.6rem, 1.35rem + 1.2vw, 2.2rem);
  --text-3xl:  clamp(1.9rem, 1.5rem + 1.9vw, 2.75rem);
  --text-4xl:  clamp(2.25rem, 1.7rem + 2.8vw, 3.4rem);
}

Converte a minha escala tipográfica estática (abaixo) numa escala fluida com clamp():
[cola aqui os teus tokens --text-* atuais]
Restrições:
- viewport de referência: 375 px (mobile) a 1280 px (desktop)
- cada clamp combina rem + vw (nunca vw sozinho, para respeitar o zoom do navegador)
- conserva o rácio 1.25 entre níveis nos dois extremos
- entrega o bloco :root final, depois uma tabela recapitulativa: tamanho a 375 px / a 768 px / a 1280 px para cada nível
Por fim, indica as alturas de linha recomendadas por nível.

Hierarquizar sem aumentar

O reflexo do principiante para hierarquizar é o tamanho: mais importante = maior. Mas o tamanho é apenas uma alavanca entre cinco, e muitas vezes a menos refinada. A espessura distingue um título de uma etiqueta com o mesmo tamanho. A caixa — um antetítulo em versaletes espaçadas («MEDITAÇÃO GUIADA») acima de um grande título — cria um andar de hierarquia elegante que não consome nenhum pixel a mais. A cor recua um texto secundário (--color-text-muted) sem o encolher. O espaço isola e, portanto, valoriza. Combina duas alavancas discretas em vez de uma única alavanca berrante: é a diferença entre uma página que grita e uma página que fala.

Uma palavra sobre as fontes variáveis, o standard moderno: um único ficheiro contém todas as espessuras (e por vezes outros eixos, como a ótica ou a largura). Vantagem dupla: carregas um ficheiro em vez de quatro, e podes usar espessuras intermédias precisas (550 em vez da escolha binária 500/600). A Fraunces, justamente, é variável e expõe um eixo «ótico» que suaviza ou afirma o desenho consoante o tamanho — exatamente o género de detalhe que torna uma identidade reconhecível «de olhos fechados».

Microtipografia: os detalhes que fazem profissional

Resta a camada final, invisível quando está bem feita e gritante quando falta. Os apóstrofos curvos (o apóstrofo reto é um vestígio de máquina de escrever), as aspas angulares (« » quando a identidade as adota), os espaços insecáveis entre um número e a sua unidade — o português tem convenções precisas que o texto gerado por IA nem sempre respeita. Pede sistematicamente uma passagem: «aplica as convenções tipográficas portuguesas a todos os textos da página».

Do lado técnico, três reflexos de entrega: serve as fontes em woff2 (o formato comprimido moderno), acrescenta font-display: swap para que o texto apareça imediatamente com uma fonte de sistema enquanto espera pela verdadeira, e verifica a licença — as fontes Google Fonts são livres, mas uma fonte premium encontrada «algures» pode sair cara ao cliente em caso de fiscalização. Duas famílias bem servidas pesam menos de 200 Ko; é o orçamento a não ultrapassar para que o premium não se pague em segundos de carregamento.