Design suíço: a grelha, a letra e como o usar hoje

Design suíço é o nome que a maioria das pessoas dá ao Estilo Tipográfico Internacional, uma forma de fazer design gráfico que surgiu na Suíça nos anos 1950. Organiza cada página numa grelha, compõe a letra em tipos sem serifas limpos, alinha o texto à esquerda e retira a decoração para que o conteúdo fale com simplicidade. O resultado parece objetivo, ordenado e discretamente confiante, e é por isso que tanto do branding, da sinalética e do design de interfaces de hoje ainda segue as suas regras.

Este guia explica de onde veio o estilo, os princípios que podes copiar, como construir uma grelha suíça para formatos reais e como pôr uma composição suíça rigorosa sobre um fundo rico sem perder nem uma nem outro.

De onde veio o Estilo Tipográfico Internacional

O estilo nasceu da tipografia modernista dos anos 1920 e 1930 e ganhou forma nas escolas e nos ateliers de design suíços, sobretudo em Zurique e Basileia. Os 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 a pena conhecer alguns nomes e tipos de letra. Josef Müller-Brockmann, a trabalhar em Zurique, fez cartazes de concertos e de sensibilização pública assentes em grelhas visíveis, e mais tarde escreveu o livro Grid Systems in Graphic Design, ainda hoje uma referência. Emil Ruder, que ensinou tipografia em Basileia, escreveu Typographie, um manual sobre contraste, ritmo e espaço. A letra vinha das grotescas: a Akzidenz-Grotesk, uma sem serifas 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 do que um conjunto de decisões. Se tomares estas decisões, o teu trabalho vai ler-se como suíço mesmo com um tipo de letra moderno e um gradiente por trás.

• Uma grelha por baixo de tudo. Colunas, margens e goteiras decidem-se primeiro, e todos os elementos assentam nelas.
• Letra sem serifas. Grotescas de textura uniforme, normalmente de uma só família. Vê com serifa ou sem serifa.
• Alinhado à esquerda, não justificado. O texto alinha por uma margem; o texto centrado e o justificado são raros.
• Assimetria. As composições equilibram-se pelo peso e pelo espaço, não por espelho em torno do centro.
• Hierarquia por tamanho, peso e posição. Sem caixas, ornamentos ou sublinhados a assinalar importância. Vê hierarquia visual.
• Poucas cores. Muitas vezes preto, branco e uma cor forte, frequentemente o vermelho.
• Imagens objetivas. Fotografias e formas geométricas em vez de ilustração decorativa.
• O espaço como estrutura. As áreas vazias são partes planeadas da grelha, não sobras.

Como construir uma grelha suíça para formatos reais

Uma grelha são três números: a margem à volta, a goteira entre colunas e o número de colunas. Escolhe colunas que se dividam bem: seis colunas dividem-se em metades e terços, doze em metades, terços, quartos e sextos. Depois confirma as contas, para que cada coluna tenha um número inteiro de píxeis.

Junta também uma linha de base. Escolhe uma unidade pequena, como 8 px numa publicação de 1080 px, e faz das entrelinhas e do espaçamento vertical múltiplos dela. O texto de colunas diferentes fica assim alinhado, e isso é boa parte da razão pela qual as páginas suíças parecem tão assentes. Entrelinha e comprimento da 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 pormenor fica na metade direita, em baixo, por isso a página equilibra-se pela assimetria e não pelo centro.

Regras de tipografia suíça que podes copiar

O pormenor mais suíço é a escala de tamanhos. Usa três ou quatro tamanhos com saltos óbvios, como 24, 36 e 112 px numa publicação de 1080 px, em vez de uma rampa suave. Os títulos grandes costumam ficar melhor com um tracking ligeiramente negativo; espaçamento entre letras mostra os valores.

Como o design suíço combina com fundos ricos

Os cartazes suíços clássicos eram muitas vezes de cor lisa, mas a grelha não o exige. Uma composição rigorosa é exatamente o que permite que um fundo rico funcione: a letra é calma, alinhada e contida, por isso um gradiente profundo pode transportar o ambiente sem que a página se torne ruído. É a mesma composição discreta sobre um material rico descrita em minimalismo ou maximalismo.

Três regras mantêm a combinação limpa. Põe o bloco de texto sobre a parte mais calma do gradiente. Usa uma só cor de texto para tudo, normalmente branco ou preto. E deixa a fonte de luz do fundo numa área vazia da grelha, para que se leia como parte da composição. Para muitas palavras sobre cor, vê letra sobre fundos agitados.

Na Gradiently, um Mark desenha o fundo ao vivo por trás da composição e leva a sua região mais calma para trás das palavras, por isso um bloco de texto suíço mantém o contraste quando o mudas de coluna ou copias o design para outros tamanhos.