Tipografia suíça e interfaces
Em 1959, Emil Ruder publicou um ensaio na revista Typographische Monatsblätter que ainda hoje me parece mais relevante do que a maior parte do que se escreve sobre design de interfaces.[1]
O argumento central era simples: a tipografia tem uma função antes de ter uma forma. A legibilidade não é uma restrição — é o ponto de partida.
A grelha como argumento
O sistema tipográfico suíço não era decoração. Era uma posição filosófica: a ordem serve o conteúdo, não o contrário. A grelha tornava explícitas as decisões que outros designers tomavam de forma intuitiva e inconsistente.
Há um paralelo direto com sistemas de design modernos. Um design system bem construído faz a mesma coisa: torna explícitas as decisões que de outra forma viveriam apenas na cabeça das pessoas.
O que não está documentado não existe. O que existe sem documentação é acidente.
Este princípio aplica-se diretamente a decisões tipográficas. Uma escala definida em código é uma decisão documentada — auditável, propagável, impossível de ignorar acidentalmente:
Um bloco de código em CSS
e como fica inline code no meio de uma prágrafo?
/* Escala tipográfica — tamanhos fluidos com clamp() */
:root {
--text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--text-lg: clamp(1.25rem, 1.1rem + 0.65vw, 1.625rem);
--text-xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.75rem);
--text-display: clamp(3rem, 2.25rem + 3vw, 5.5rem);
/* Entrelinha */
--leading-tight: 1.1;
--leading-normal: 1.5;
--leading-loose: 1.7;
}O código acima é o deste sítio. Cada token é uma intenção expressa, não um número solto num ficheiro de design.
Comparação de abordagens tipográficas
Simplificando brutalmente, a diferença entre escola suíça e abordagens mais expressivas:
| Dimensão | Tipografia suíça | Abordagem expressiva |
|---|---|---|
| Hierarquia | Construída pelo tamanho e peso | Construída pela cor e posição |
| Grelha | Estrutura visível e respeitada | Ponto de partida, não limite |
| Ornamento | Ausente por princípio | Usado com intenção |
| Emoção | Transmitida pela estrutura | Transmitida pela forma |
| Falha comum | Frieza, impessoalidade | Ruído, inconsistência |
Nenhuma abordagem é superior em abstrato. A questão é sempre: o que o conteúdo exige?
O que isto tem a ver com interfaces
O problema do design de interfaces moderno não é falta de expressão — é falta de disciplina. Há demasiado movimento, demasiada cor, demasiada variação tipográfica a servir a vaidade do designer em vez do utilizador.
As melhores interfaces que conheço têm uma qualidade suíça: a sensação de que cada decisão foi tomada, não aconteceu.
Isso é o que continuo a tentar fazer.
O ensaio chama-se Typographie als Ausdruck e foi republicado em várias coletâneas. A tradução inglesa mais acessível está no livro Typography: A Very Short Introduction de Paul Luna, que o cita extensamente. ↩︎