Princípios de design gráfico que todo designer deveria adotar.

Os designers gráficos descobriram quase tudo com que você está lidando na tela. Eles descobriram isso antes de você nascer, com orçamentos menores, ferramentas piores e a disciplina implacável de um prazo final que saía da impressora às três da manhã.

Cada onda de design digital redescobre esse trabalho lenta e mal. Inventamos um novo sistema de grade a cada cinco anos. Renomeamos hierarquia como "peso visual" e fingimos que é novidade. Discutimos sobre espaço em branco como se fosse uma apresentação de startup.

A área já resolveu a maior parte disso. O trabalho está em uma edição encadernada da Wired de 1995 ou em um livro de bolso da Penguin de 1947, esperando que você realmente o observe. A impressão não é um museu. É uma biblioteca funcional na qual você pode entrar, pegar o que precisa e sair.

Por que a impressão resolveu isso primeiro e nós continuamos esquecendo

A impressão tinha limitações das quais o digital ainda finge estar isento. Uma página é uma tela fixa. Uma página dupla de revista custa dinheiro de verdade para imprimir e enviar.

Cada decisão tinha um custo, e esse custo impunha contenção editorial. Os designers gráficos também tinham que lutar pela atenção do leitor contra a próxima página, não contra o TikTok. A competição era honesta. As ferramentas se limitavam a tipografia, imagem, cor, papel e grade.

Com esses cinco elementos, Massimo Vignelli construiu a identidade da Unimark para a American Airlines. Paula Scher criou os pôsteres mais icônicos da Pentagram. Wim Crouwel construiu a linguagem visual do Museu Stedelijk. Cinco ferramentas, décadas de cânone.

Os designers digitais têm mil ferramentas e a maioria de nós ainda não consegue criar uma landing page que respeite o leitor. A limitação não está nas ferramentas. A limitação é que ninguém nos obrigou a estudar o cânone.

Os sete princípios que a impressão descobriu

Deixando o romantismo de lado, restam sete princípios que a impressão dominou e nos quais o digital continua tropeçando.

1. Hierarquia. Um elemento é o lead. Tudo o mais está a serviço do lead.

2. Grade. Uma grade é um contrato com o leitor, não uma gaiola para o designer.

3. Ritmo. Página após página deve parecer uma peça musical, não uma máquina caça-níqueis.

4. Escala. Coisas grandes são grandes porque merecem ser, coisas pequenas são pequenas porque também merecem ser pequenas.

5. Contraste. Peso da fonte, cor, densidade, escala. O contraste é como o olhar se move.

6. Moderação. A maioria das decisões são decisões para remover, não para adicionar.

7. Respeito pelo leitor. O tempo, a atenção e a inteligência do leitor são o orçamento que você gasta.

Esses sete princípios estão presentes em toda grande obra impressa. Eles aparecem em um livro de bolso da Penguin da era Tschichold e na capa da Bloomberg Businessweek sob a direção de Richard Turley. Aparecem da mesma forma em um mapa de metrô de Vignelli e na abertura de uma reportagem da revista New York Times Magazine. Os nomes mudam, os princípios permanecem.

Hierarquia e grade: escolha um lead, ancore-o a um contrato

Abra qualquer edição da Bloomberg Businessweek da era Richard Turley, aproximadamente de 2010 a 2014. Cada página dupla tem um lead. O lead é enorme, o texto de apoio é pequeno, a imagem grita ou sussurra, e não há confusão sobre por onde começar.

Compare isso com uma página de marketing típica de SaaS em 2026. O título principal, a linha do meio, o subtítulo, os três marcadores de destaque, o depoimento e a mancha degradê, todos querem ser o lead. Nenhum deles é. O leitor abandona a página.

A solução para a impressão é drástica. Olhe para a tela, pergunte-se qual elemento é o lead e, em seguida, torne todos os outros elementos visivelmente menores, mais leves ou mais discretos. Se dois elementos estão competindo, você não tem hierarquia. Você tem ruído disfarçado de hierarquia.

O lead precisa se destacar em algum lugar. Esse lugar é a grade. Jan Tschichold reformulou a linha de livros de bolso da Penguin no final da década de 1940, utilizando uma grade tão disciplinada que os livros ainda parecem modernos.

Wim Crouwel fez o mesmo pelo design cívico holandês. Massimo Vignelli implementou o sistema Unigrid em todos os folhetos do Serviço Nacional de Parques dos Estados Unidos, e esses folhetos ainda estão em circulação, ainda legíveis, ainda belos, cinquenta anos depois.

Uma grade não é o sistema de doze colunas que vem instalado no seu framework de front-end. Uma grade é a promessa de que os títulos começam no mesmo lugar, que as legendas ficam em uma coluna conhecida, que as margens internas não se movem, que o olhar pode confiar na página. O leitor não vê a grade. O leitor a sente.

A maioria dos produtos digitais não tem uma grade. Eles têm um layout que sobreviveu à última revisão de design. Isso não é a mesma coisa.

Ritmo e escala: projete a segunda página, conquiste o tamanho

Um designer gráfico pensa em páginas duplas, não em páginas. Um diretor de arte de revista planeja como uma matéria se inicia, respira, acelera e termina, da mesma forma que um editor de cinema corta uma cena. A revista Wired, na época de Carson e Plunkett, era famosa por isso. Cada matéria era uma canção, não uma nota isolada.

O design digital, em sua grande maioria, pensa em telas individuais. A matéria principal recebe cem horas de atenção, a segunda rolagem recebe quinze minutos, a terceira não recebe nada. Depois, nos perguntamos por que nossas páginas de marketing se retraem abaixo da dobra.

Roube a ideia. Esboce a página inteira como uma sequência de batidas. Se você não consegue descrever o ritmo em voz alta, a página não tem um.

A escala é a prima barulhenta do ritmo. Os pôsteres do Public Theater de Paula Scher são uma aula sobre escala. O texto preenche o pôster, cortado nas bordas, com uma única espessura fazendo todo o trabalho.

O tamanho é a mensagem. Você lê o texto porque o texto é o ambiente.

O design digital tende a usar letras grandes como uma atmosfera, em vez de uma declaração. Títulos de 48 pixels que dizem "Bem-vindo à plataforma que capacita sua equipe" não são grandes porque mereceram. São grandes porque o sistema de design forneceu um token display-xl e alguém o usou.

A regra da impressão é simples. Se um texto é grande, as palavras dentro dele precisam valer esse espaço. Ou as palavras merecem o tamanho ou o tamanho diminui. Não há uma terceira opção.

Os cinco pecados digitais que os princípios de impressão corrigem

A maioria dos designs digitais ruins se baseia em um dos cinco erros recorrentes. Cada um deles possui um princípio de impressão que o corrige imediatamente.

| Princípio de impressão | Pecado digital comum | A correção |

|---|---|---|

| Hierarquia | Tudo tem o mesmo tamanho, nada se destaca | Escolha o elemento que se destaca, reduza o restante visivelmente |

| Grade | Layout decorativo, sem estrutura subjacente | Defina uma grade real, alinhe todos os elementos a ela, sem exceções |

| Moderação | Muitas fontes, muito chrome | Limite as fontes a duas, elimine bordas, sombras e gradientes desnecessários | | Escala | Tipografia grande com palavras fracas | Faça com que as palavras justifiquem o tamanho ou reduza o tamanho da fonte | | Contraste | Interface plana cinza sobre cinza sem ponto focal | Adicione contraste real de peso, ponto focal de cor real, mudança real de densidade |

Leia a tabela uma vez e depois leia seu próprio produto. Você encontrará pelo menos três desses pecados na tela que lançou este mês. Tudo bem, quase todo mundo os comete. O importante é identificá-los para que você possa eliminá-los.

Moderação e respeito: os dois princípios difíceis de aprender

A obra de Vignelli foi uma guerra contra a decoração. Ele usou cinco tipos de letra, no total, pelo resto de sua carreira, depois de um certo ponto. Ele acreditava que a maioria dos problemas de design era causada pela adição de algo que deveria ter sido removido. Ele estava certo em quase todos os casos.

A moderação é o princípio mais difícil de internalizar porque o trabalho visível no design é o que você adiciona. Ninguém aplaude o gradiente que você removeu, o ícone que você cortou, a terceira fonte que você se recusou a carregar. O leitor aplaude, silenciosamente, ao terminar de ler a página.

Uma regra pessoal útil: antes de publicar uma tela, remova três elementos e veja se o design ainda funciona. Se funcionar, mantenha os elementos removidos.

O respeito pelo leitor é o princípio que a contenção serve. O cânone da impressão trata o leitor como um adulto. A Penguin presumia que você conseguiria ler um romance de quatrocentas páginas em fonte Garamond tamanho 11 sem indicadores de rolagem, sem barra de progresso, sem tempo estimado de leitura.

O digital passou quinze anos insultando silenciosamente seus leitores. Marcadores de tempo de leitura, barras de progresso, seções "TLDR" dentro de artigos que são resumos. A suposição é que o leitor não consegue lidar com o texto sem um guia.

Esqueça essa suposição. Seu leitor é um adulto. Ele o recompensará lendo.

Como ler uma ótima página dupla editorial

Pegue uma edição antiga da revista do New York Times, ou uma Bloomberg Businessweek da época de Turley, ou qualquer relatório anual da Pentagram. Abra em uma página dupla de reportagem. Agora, observe com atenção.

Observe o lead. Há apenas um. Pode ser o título, a imagem ou uma citação.

Observe onde o lead está posicionado, quase sempre em uma interseção da grade, nunca centralizado apenas por centralizar. Observe o texto de apoio, menor, geralmente mais leve, nunca competindo com o lead.

Observe o espaço em branco, maior do que você espera, bem planejado, não acidental. Observe as legendas, minúsculas, ancoradas a uma coluna fixa. Observe as folhas, que permanecem em um lugar conhecido e não se movem.

Isso é uma grade funcionando. Isso é hierarquia funcionando. Isso é ritmo funcionando.

Cada uma dessas decisões foi tomada propositalmente, por uma pessoa, a serviço do leitor.

Lições de tipografia que se traduzem com clareza

A tipografia impressa está décadas à frente da tipografia digital em três aspectos específicos.

Primeiro, proporção de escala. Designers de impressão escolhem uma escala tipográfica e a seguem à risca. Terça maior, quarta perfeita, proporção áurea, etc.

O designer digital escolhe "bem, o sistema de design tem oito tamanhos, e eu vou usar a maioria deles". Isso não é uma escala. É um buffet.

Segundo, comprimento da linha e entrelinhamento. O padrão para impressão estabeleceu cerca de sessenta e seis caracteres por linha para o corpo do texto, com entrelinhamento de aproximadamente cento e quarenta por cento do tamanho da fonte. O design web rotineiramente publica parágrafos com cento e vinte caracteres de largura e entrelinhamento mínimo porque o sistema de design assim o determinou.

Terceiro, combinação de tipos. A regra para impressão é de duas famílias tipográficas, no máximo, e elas precisam ter funções diferentes. Exibição e texto, ou serifada e sem serifa.

A regra digital, de alguma forma, tornou-se "use a Inter e adicione mais quatro fontes porque a equipe de marketing gosta delas". Limite suas fontes a duas e sua hierarquia ficará mais nítida da noite para o dia.

Lições sobre espaço em branco e design de capa

Espaço em branco não é o negativo do design. É design. A escola suíça ensinava isso na década de 1950 e, de alguma forma, perdemos esse ensinamento duas vezes desde então.

Observe um pôster de Müller-Brockmann. O espaço em branco desempenha uma função estrutural. Ele emoldura o texto, guia o olhar e oferece um ponto de apoio para os elementos mais chamativos.

Espaço em branco não é ausência de conteúdo. É a parte da página que torna o conteúdo legível. Produtos digitais têm pavor de espaço em branco porque pixels vazios parecem espaço desperdiçado. Mas não são.

São o respiro que permite ao leitor permanecer na página. Uma landing page com o dobro de espaço em branco converte melhor do que a mesma página com o dobro de texto. Teste com seu próprio produto. Observe o que acontece.

A capa de uma revista tem dois segundos para cumprir sua função em uma banca de jornal. Ela precisa sinalizar a marca, vender a matéria principal e ter uma aparência atraente mesmo em tamanho miniatura. Designers editoriais vêm resolvendo esse problema há cem anos.

O destaque da sua página inicial, a tela de boas-vindas, o ícone do seu aplicativo, a imagem para compartilhar nas redes sociais. Tudo isso são capas. A mesma regra dos dois segundos.

Roube a estratégia. Uma ideia dominante, uma âncora tipográfica, uma imagem que não pisca. Se o seu destaque precisa de três linhas de texto para se explicar, ele não é um destaque.

O que não se traduz da impressão para o digital

A impressão não resolveu tudo. Seja honesto sobre o que o cânone não pode lhe oferecer.

A impressão não resolveu a interatividade. Uma página não responde a um toque. O cânone não ensina nada sobre estado, feedback, tratamento de erros ou o momento em que o usuário faz algo que você não previu.

A impressão não resolveu o movimento. Designers editoriais pensam em termos de estática. Movimento é uma arte que se aprende com animação, cinema e jogos, não com uma página dupla de revista.

A impressão não resolveu o layout responsivo. A grade de impressão ensina disciplina, mas a grade responsiva é um problema que você resolve além disso.

O princípio sobrevive, a implementação não. Pegue os princípios, deixe as suposições. É assim que se rouba corretamente.

Construindo um sistema de design influenciado pela impressão

Você pode incorporar tudo isso em um sistema de design sem que ninguém o considere esnobe. O truque é codificar os princípios como restrições, não como enfeites.

Limite suas fontes a duas. Limite seus tamanhos de fonte a seis, em uma escala real. Limite seus tokens de cor a um conjunto funcional, com um único acento que justifique sua intensidade.

Limite seus tokens de espaçamento a um ritmo que se mantenha em todos os breakpoints. Limite seus tokens de sombra e borda ao menor conjunto que cumpra sua função.

Em seguida, escreva as regras de uso. O espaçamento entre linhas em qualquer vista é o maior elemento. A grade é sagrada e o alinhamento é inegociável. O espaço em branco é um token, não um resíduo.

O enfeite só é adicionado quando desempenha uma função estrutural. Essas regras estão contidas na documentação do sistema de design, ao lado dos componentes, e são revisadas na análise crítica de design da mesma forma que o código é revisado em pull requests.

Um sistema de design sem princípios é um pacote de adesivos. Um sistema de design com princípios de impressão incorporados é uma publicação.

A Bauhaus entendeu isso na década de 1920. Tschichold o codificou em "A Nova Tipografia" em 1928. A escola suíça o operacionalizou na década de 1950.

A Pentagram comercializa esse sistema há sessenta anos. Os princípios são estáveis, o meio é o que está em constante mudança.

Um breve workshop que você pode realizar com seu próprio produto

Escolha uma tela do seu produto atual. A tela principal da página inicial, o painel de controle, a página de configurações, qualquer uma. Sente-se com um objeto impresso que você admira: uma página dupla de revista, uma página de relatório anual, a abertura de um livro de bolso, qualquer coisa da Pentagram, Vignelli ou Scher. Coloque-os lado a lado.

Faça cinco perguntas. Qual é o foco principal de cada um? Para onde o olhar se dirige primeiro, segundo e terceiro? Quantas fontes e tamanhos estão em uso e quanto espaço em branco é intencional em comparação com o espaço em branco acidental?

Em seguida, faça os cortes. Remova três elementos, reduza a altura da fonte, limite as fontes a dois. Mova o lead para uma interseção real da grade. Adicione espaço em branco até que a página respire.

Avalie a nova versão com as mesmas cinco perguntas. A melhoria será óbvia.

Faça isso uma vez por semana durante um mês. Seu olhar se recalibrará. Suas telas ficarão mais silenciosas e nítidas. Sua equipe começará a notar.

É isso que a educação em leitura a distância proporciona, e você pode adquiri-la em uma tarde.

O cânone é uma biblioteca de trabalho, trate-o como tal

Os nomes neste artigo não são história. Vignelli, Tschichold, Crouwel, Scher, Müller-Brockmann, Carson, Turley, Pentagram, Penguin, Bloomberg Businessweek, The New York Times Magazine. Eles são uma biblioteca de trabalho da qual você pode se valer esta semana.

Seus livros ainda estão impressos. Suas páginas ainda estão online. Os princípios deles ainda valem.

Compre uma monografia. Assine uma revista impressa. Mantenha um anuário de design na mesa onde você trabalha. Consulte-os quando estiver sem ideias.

O cânone sempre será mais eficaz do que o seu painel do Pinterest. A área já resolveu a maioria dos seus problemas. As obras estão lá, esperando que você as explore. Explore.