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

[Canonical HTML page](https://gradiently.design/pt-br/guide/swiss-design)

O design suíço deu ao design gráfico o grid, o amor pela tipografia sem serifa e o hábito de deixar a estrutura falar. Ainda é o caminho mais rápido para layouts calmos e seguros.

## The short version

- O design suíço, também chamado de Estilo Tipográfico Internacional, surgiu na Suíça nos anos 1950 e valorizava clareza, objetividade e ordem acima da decoração.
- Suas ferramentas centrais são um grid modular, tipografia sem serifa como Akzidenz-Grotesk, Helvetica e Univers, texto alinhado à esquerda e irregular à direita e layouts assimétricos.
- A hierarquia no design suíço vem do tamanho, do peso e da posição no grid, e não de ornamentos, caixas ou muitas cores.
- Layouts suíços combinam bem com fundos gradientes ricos, porque o grid rígido mantém as palavras calmas enquanto o campo de cor carrega o clima.
- Você pode aplicar os princípios suíços a posts e slides escolhendo um grid de colunas para cada formato e posicionando todos os elementos nele.

**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.

| Fonte | Origem | Por que os designers suíços a usavam |
| --- | --- | --- |
| Akzidenz-Grotesk | Fundição Berthold, Berlim, fim do século XIX | Uma grotesca simples e robusta, sem floreios decorativos |
| Helvetica | Fundição Haas, Suíça, 1957 | Neutra, de textura uniforme; vendida primeiro como Neue Haas Grotesk |
| Univers | Desenhada por Adrian Frutiger, 1957 | Uma família grande e sistemática de pesos e larguras |

As três fontes mais associadas ao design suíço. Hoje você chega à mesma sensação com muitas grotescas de licença aberta.

## 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](https://gradiently.design/pt-br/guide/serif-vs-sans-serif).
- **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](https://gradiently.design/pt-br/guide/visual-hierarchy).
- **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.

- Papel de pôster: #f4f1ea
- Preto de impressão: #111111
- Vermelho sinal: #d52b1e
- Cinza quente: #8a8a85

Uma paleta suíça clássica: papel, preto, um vermelho e um cinza para o texto secundário. A contenção na cor deixa o grid e a tipografia conduzirem o design.

## 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.

| Formato | Tamanho | Grid | Largura da coluna |
| --- | --- | --- | --- |
| Post do Instagram | 1080×1350 | 6 colunas, margem 72, calha 24 | 136 px |
| Post do X | 1600×900 | 8 colunas, margem 80, calha 24 | 159 px |
| Slides 16:9 | 1920×1080 | 12 colunas, margem 96, calha 24 | 122 px |
| Pôster A3 a 300 dpi | 3508×4961 | 6 colunas, margem 238, calha 64 | 452 px |

Grids calculados. Colunas, calhas e margens somam exatamente a largura, então nada cai em meio pixel.

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](https://gradiently.design/pt-br/guide/line-height-and-line-length) explica como escolher a unidade.

```css
.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 grid do post do Instagram acima em CSS: seis colunas de 136 px, uma calha de 24 px e uma margem de 72 px. As alturas de linha se apoiam em uma linha de base de 8 px.

O código usa [CSS grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/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

### Evite

- Centralizar todas as linhas
- Três ou quatro fontes em um design
- Caixas e contornos para separar o conteúdo
- Abrir o espaçamento entre letras de títulos grandes
- Muitos tamanhos quase iguais

### Faça

- Alinhar o texto à esquerda, na borda de uma coluna
- Uma família grotesca em dois ou três pesos
- Espaço e alinhamento para separar o conteúdo
- Apertar um pouco os títulos grandes
- Poucos tamanhos, com saltos claros entre eles

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](https://gradiently.design/pt-br/guide/letter-spacing) 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](https://gradiently.design/pt-br/guide/minimalism-vs-maximalism).

- Sangue de boi a vermelho sinal: `linear-gradient(160deg, #3a0306 0%, #b3120f 55%, #ff5a3c 100%)`
- Azul-marinho profundo a azul-céu: `linear-gradient(180deg, #0a1a3a 0%, #1f4fbf 60%, #7fb0ff 100%)`
- Sol no canto superior: `radial-gradient(circle at 80% 20%, #ffe066 0%, #ff7a00 35%, #b8002e 75%, #2a0010 100%)`

Gradientes que combinam com um grid suíço: uma família de matiz ou uma única fonte de luz, com uma área calma onde fica o bloco de texto.

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](https://gradiently.design/pt-br/guide/type-on-busy-backgrounds).

Um pôster A3 com o título A forma segue o grid alinhado à esquerda em uma fonte sem serifa sobre um fundo gradiente profundo

Um pôster A3 em um grid de seis colunas: as palavras seguram a esquerda, a cor segura a direita.

Um post vertical com o título Diga menos. Alinhe mais. alinhado à esquerda sobre o mesmo gradiente do pôster

O mesmo sistema em um post do Instagram: uma família, três tamanhos, uma cor de texto.

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.

> **O teste de apertar os olhos** Aperte os olhos diante de um layout suíço pronto. Você deve ver poucos blocos claros sobre colunas invisíveis e uma forma dominante. Se vir um punhado de peças pequenas espalhadas, remova algumas ou encaixe todas no grid.

## FAQ

### O que é design suíço?

O design suíço, ou Estilo Tipográfico Internacional, é uma abordagem de design gráfico que surgiu na Suíça nos anos 1950. Usa grids, tipografia sem serifa, texto alinhado à esquerda e layouts assimétricos para comunicar com clareza, sem decoração.

### Que fonte é usada no design suíço?

Os designers suíços usavam principalmente grotescas sem serifa: a Akzidenz-Grotesk e depois a Helvetica e a Univers, ambas lançadas em 1957. Hoje, qualquer grotesca neutra de textura uniforme dá um resultado parecido.

### Quantas colunas um grid suíço deve ter?

Seis colunas servem para a maioria dos posts e pôsteres, porque se dividem em metades e terços. Doze colunas servem para formatos largos, como slides e sites. Confira se margens, calhas e colunas somam a largura exata.

### O design suíço pode usar gradientes?

Sim. O grid, a tipografia e a contenção são o que torna um layout suíço. Um gradiente rico atrás de um bloco de texto rígido funciona bem, desde que o texto fique sobre uma área calma e em uma cor só.

### Quem foram os principais designers suíços?

Josef Müller-Brockmann, conhecido pelos pôsteres baseados em grids e pelo livro Grid Systems in Graphic Design, e Emil Ruder, que ensinou tipografia na Basileia e escreveu Typographie, são dois dos mais conhecidos.