Design suíço: o grid, a tipografia e como usar hoje

Design suíço é o nome que a maioria das pessoas usa para o Estilo Tipográfico Internacional, um jeito de fazer design gráfico que surgiu na Suíça nos anos 1950. Ele organiza cada página em um grid, compõe o texto em fontes sem serifa limpas, alinha o texto à esquerda e remove a decoração para que o conteúdo fale com clareza. O resultado parece objetivo, ordenado e discretamente confiante, e é por isso que tanto do branding, da sinalização e do design de interfaces de hoje ainda segue suas regras.

Este guia mostra de onde veio o estilo, os princípios que você pode copiar, como montar um grid suíço para formatos reais e como pôr um layout suíço rígido sobre um fundo rico sem perder nenhum dos dois.

De onde veio o Estilo Tipográfico Internacional

O estilo nasceu da tipografia modernista dos anos 1920 e 1930 e tomou forma em escolas e estúdios de design suíços, principalmente em Zurique e na Basileia. Seus praticantes queriam que o design comunicasse informação de forma clara e neutra, para qualquer público, e é daí que vem a palavra internacional.

Vale conhecer alguns nomes e fontes. Josef Müller-Brockmann, que trabalhava em Zurique, fez pôsteres de concertos e de campanhas públicas construídos sobre grids visíveis e depois escreveu o livro Grid Systems in Graphic Design, até hoje uma referência. Emil Ruder, que ensinava tipografia na Basileia, escreveu Typographie, um manual sobre contraste, ritmo e espaço. A tipografia vinha das grotescas: a Akzidenz-Grotesk, uma sem serifa alemã do fim do século XIX, e depois a Helvetica e a Univers, ambas lançadas em 1957.

Os princípios centrais do design suíço

O design suíço é menos um visual e mais um conjunto de decisões. Se você tomar essas decisões, seu trabalho vai parecer suíço mesmo com uma fonte moderna e um gradiente atrás.

• Um grid por baixo de tudo. Colunas, margens e calhas são decididas primeiro, e todo elemento se apoia nelas.
• Tipografia sem serifa. Grotescas de textura uniforme, em geral de uma única família. Veja serifa vs sem serifa.
• Alinhado à esquerda, irregular à direita. O texto se alinha a uma borda; texto centralizado ou justificado é raro.
• Assimetria. Os layouts são equilibrados por peso e espaço, não espelhados em torno do centro.
• Hierarquia por tamanho, peso e posição. Nada de caixas, ornamentos ou sublinhados para indicar importância. Veja hierarquia visual.
• Poucas cores. Muitas vezes preto, branco e uma cor forte, com frequência o vermelho.
• Imagens objetivas. Fotografias e formas geométricas em vez de ilustração decorativa.
• Espaço como estrutura. As áreas vazias são partes planejadas do grid, não sobras.

Como montar um grid suíço para formatos reais

Um grid são três números: a margem em volta da borda, a calha entre as colunas e o número de colunas. Escolha colunas que se dividam bem: seis colunas se dividem em metades e terços, doze em metades, terços, quartos e sextos. Depois confira a conta, para que cada coluna tenha um número inteiro de pixels.

Adicione também uma linha de base. Escolha uma unidade pequena, como 8 px em um post de 1080 px, e faça das alturas de linha e dos espaçamentos verticais múltiplos dela. O texto entre colunas então se alinha, o que explica boa parte de por que as páginas suíças parecem tão assentadas. Altura e comprimento de linha explica como escolher a unidade.

.poster {
  box-sizing: border-box;
  width: 1080px;
  height: 1350px;
  padding: 72px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: 24px;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.poster .kicker { grid-column: 1 / 3; font-size: 24px; line-height: 32px; }
.poster h1 { grid-column: 1 / 6; grid-row: 2; align-self: center; font-size: 112px; line-height: 104px; letter-spacing: -0.02em; font-weight: 700; margin: 0; }
.poster .detail { grid-column: 4 / 7; grid-row: 3; font-size: 36px; line-height: 48px; }

O código usa CSS grid layout. O título ocupa cinco colunas e deixa a sexta vazia de propósito; o detalhe fica na metade direita, embaixo, então a página se equilibra pela assimetria, e não pela centralização.

Regras de tipografia suíça para copiar

O detalhe mais suíço é a escala de tamanhos. Use três ou quatro tamanhos com saltos evidentes, como 24, 36 e 112 px em um post de 1080 px, em vez de uma rampa suave. Títulos grandes costumam ficar melhores com um tracking levemente negativo; espaçamento entre letras mostra os valores.

Como o design suíço combina com fundos ricos

Os pôsteres suíços clássicos muitas vezes usavam cor chapada, mas o grid não exige isso. Um layout rígido é exatamente o que faz um fundo rico funcionar: a tipografia é calma, alinhada e limitada, então um gradiente profundo pode carregar o clima sem a página virar ruído. É o mesmo layout discreto sobre um material rico descrito em minimalismo vs maximalismo.

Três regras mantêm a combinação limpa. Coloque o bloco de texto sobre a parte mais calma do gradiente. Use uma única cor de texto para tudo, em geral branco ou preto. E deixe a fonte de luz do fundo em uma área vazia do grid, para que ela pareça parte da composição. Para muito texto sobre cor, veja texto sobre fundos carregados.

No Gradiently, um Mark renderiza o fundo ao vivo atrás do layout e leva sua região mais calma para trás das palavras, então um bloco de texto suíço mantém o contraste quando você o move entre colunas ou copia o design para outros tamanhos.