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

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

O design suíço deu ao design gráfico a sua grelha, o seu gosto pela letra sem serifas e o hábito de deixar a estrutura falar. Continua a ser o caminho mais rápido para composições calmas e seguras.

## The short version

- O design suíço, também chamado Estilo Tipográfico Internacional, surgiu na Suíça nos anos 1950 e valorizava a clareza, a objetividade e a ordem acima da decoração.
- As suas ferramentas centrais são uma grelha modular, letra sem serifas como a Akzidenz-Grotesk, a Helvetica e a Univers, texto alinhado à esquerda e não justificado e composições assimétricas.
- No design suíço, a hierarquia vem do tamanho, do peso e da posição na grelha e não de ornamentos, caixas ou muitas cores.
- As composições suíças combinam bem com fundos ricos em gradiente, porque a grelha rigorosa mantém as palavras calmas enquanto o campo de cor transporta o ambiente.
- Podes aplicar os princípios suíços a publicações e slides escolhendo uma grelha de colunas para cada formato e colocando nela todos os elementos.

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

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

Os três tipos de letra mais associados ao design suíço. Hoje consegues o mesmo espírito com muitas grotescas de licença aberta.

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

- Papel de cartaz: #f4f1ea
- Preto de impressão: #111111
- Vermelho sinal: #d52b1e
- Cinzento quente: #8a8a85

Uma paleta suíça clássica: papel, preto, um vermelho e um cinzento para texto secundário. A contenção na cor deixa a grelha e a letra sustentarem o design.

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

| Formato | Tamanho | Grelha | Largura da coluna |
| --- | --- | --- | --- |
| Publicação do Instagram | 1080×1350 | 6 colunas, margem 72, goteira 24 | 136 px |
| Publicação do X | 1600×900 | 8 colunas, margem 80, goteira 24 | 159 px |
| Slides 16:9 | 1920×1080 | 12 colunas, margem 96, goteira 24 | 122 px |
| Cartaz A3 a 300 dpi | 3508×4961 | 6 colunas, margem 238, goteira 64 | 452 px |

Grelhas calculadas. Colunas, goteiras e margens somam exatamente a largura, por isso nada cai em meio píxel.

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](https://gradiently.design/pt-pt/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; }
```

A grelha da publicação do Instagram acima, em CSS: seis colunas de 136 px, uma goteira de 24 px e uma margem de 72 px. As entrelinhas assentam numa 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 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

### Evita

- Centrar todas as linhas
- Três ou quatro tipos de letra num só design
- Caixas e contornos para separar o conteúdo
- Abrir o espaçamento entre letras nos títulos grandes
- Muitos tamanhos quase iguais

### Faz

- Alinha o texto à esquerda pela margem de uma coluna
- Uma família grotesca em dois ou três pesos
- Espaço e alinhamento para separar o conteúdo
- Aperta ligeiramente os títulos grandes
- Poucos tamanhos com saltos claros entre eles

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

- Bordô escuro 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 servem a uma grelha suíça: uma família de tons ou uma única fonte de luz, com uma zona calma onde assenta o bloco de texto.

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

Um cartaz A3 com o título A forma segue a grelha alinhado à esquerda numa letra sem serifas, sobre um fundo em gradiente profundo

Um cartaz A3 numa grelha de seis colunas: as palavras seguram a esquerda, a cor segura a direita.

Uma publicação vertical com o título Diz menos. Alinha mais. alinhado à esquerda sobre o mesmo gradiente do cartaz

O mesmo sistema numa publicação do Instagram: uma família, três tamanhos, uma cor de texto.

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.

> **O teste de semicerrar os olhos** Desfoca o olhar perante uma composição suíça terminada. Deves ver alguns blocos claros sobre colunas invisíveis e uma forma dominante. Se vires uma dispersão de peças pequenas, tira algumas ou encosta-as à grelha.

## FAQ

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

O design suíço, ou Estilo Tipográfico Internacional, é uma abordagem ao design gráfico que surgiu na Suíça nos anos 1950. Usa grelhas, letra sem serifas, texto alinhado à esquerda e composições assimétricas para comunicar com clareza e sem decoração.

### Que fonte se usa no design suíço?

Os designers suíços usavam sobretudo grotescas sem serifas: a Akzidenz-Grotesk e depois a Helvetica e a Univers, ambas lançadas em 1957. Qualquer grotesca neutra de textura uniforme dá hoje um resultado semelhante.

### Quantas colunas deve ter uma grelha suíça?

Seis colunas servem à maioria das publicações e dos cartazes, porque se dividem em metades e terços. Doze colunas servem a formatos largos, como slides e sites. Confirma que margens, goteiras e colunas somam a largura exata.

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

Sim. A grelha, a letra e a contenção é que tornam uma composição suíça. Um gradiente rico por trás de um bloco de texto rigoroso funciona bem, desde que o texto fique sobre uma zona calma e numa só cor.

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

Josef Müller-Brockmann, conhecido pelos seus cartazes assentes em grelhas e pelo livro Grid Systems in Graphic Design, e Emil Ruder, que ensinou tipografia em Basileia e escreveu Typographie, são dois dos mais conhecidos.