# Diseño suizo: la retícula, la tipografía y cómo usarlo hoy

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

El diseño suizo le dio al diseño gráfico su retícula, su amor por la tipografía sans serif y su costumbre de dejar que hable la estructura. Sigue siendo el camino más rápido hacia composiciones serenas y seguras.

## The short version

- El diseño suizo, también llamado Estilo Tipográfico Internacional, surgió en Suiza en los años cincuenta y valoraba la claridad, la objetividad y el orden por encima de la decoración.
- Sus herramientas principales son una retícula modular, tipografías sans serif como Akzidenz-Grotesk, Helvetica y Univers, texto alineado a la izquierda en bandera y composiciones asimétricas.
- La jerarquía en el diseño suizo viene del tamaño, el peso y la posición en la retícula, no de ornamentos, cajas ni muchos colores.
- Las composiciones suizas combinan bien con fondos degradados ricos, porque la retícula estricta mantiene tranquilas las palabras mientras el campo de color lleva el ambiente.
- Puedes aplicar los principios suizos a posts y diapositivas eligiendo una retícula de columnas para cada formato y colocando cada elemento sobre ella.

**Diseño suizo** es el nombre que usa casi todo el mundo para el Estilo Tipográfico Internacional, una forma de hacer diseño gráfico que surgió en Suiza en los años cincuenta. Organiza cada página sobre una retícula, compone el texto con sans serif limpias, lo alinea a la izquierda y elimina la decoración para que el contenido hable con claridad. El resultado parece objetivo, ordenado y seguro sin alardes, y por eso tanto branding, señalética y diseño de interfaces actuales siguen sus reglas.

Esta guía cubre de dónde viene el estilo, los principios que puedes copiar, cómo construir una retícula suiza para formatos reales y cómo poner una composición suiza estricta sobre un fondo rico sin perder ninguno de los dos.

## De dónde viene el Estilo Tipográfico Internacional

El estilo nació de la tipografía moderna de los años veinte y treinta y tomó forma en las escuelas y los estudios de diseño suizos, sobre todo en Zúrich y Basilea. Sus practicantes querían que el diseño comunicara la información con claridad y neutralidad, para cualquier público, y de ahí viene la palabra *internacional*.

Merece la pena conocer algunos nombres y tipografías. **Josef Müller-Brockmann**, que trabajaba en Zúrich, hizo carteles de conciertos y de concienciación pública construidos sobre retículas visibles, y más tarde escribió el libro *Grid Systems in Graphic Design* (en español, *Sistemas de retículas*), que sigue siendo una referencia. **Emil Ruder**, que enseñaba tipografía en Basilea, escribió *Typographie*, un manual sobre el contraste, el ritmo y el espacio. La tipografía venía de las grotescas: **Akzidenz-Grotesk**, una sans serif alemana de finales del siglo XIX, y luego **Helvetica** y **Univers**, ambas publicadas en 1957.

| Tipografía | Origen | Por qué la usaban los diseñadores suizos |
| --- | --- | --- |
| Akzidenz-Grotesk | Fundición Berthold, Berlín, finales del siglo XIX | Una grotesca sencilla y robusta, sin adornos |
| Helvetica | Fundición Haas, Suiza, 1957 | Neutra, de textura uniforme; se vendió primero como Neue Haas Grotesk |
| Univers | Diseñada por Adrian Frutiger, 1957 | Una familia grande y sistemática de pesos y anchos |

Las tres tipografías más asociadas al diseño suizo. Hoy puedes lograr la misma sensación con muchas grotescas de licencia abierta.

## Los principios básicos del diseño suizo

El diseño suizo es menos un aspecto que un conjunto de decisiones. Si tomas estas decisiones, tu trabajo se leerá como suizo incluso con una tipografía moderna y un degradado detrás.

- **Una retícula debajo de todo.** Las columnas, los márgenes y los medianiles se deciden primero, y cada elemento se apoya en ellos.
- **Tipografía sans serif.** Grotescas de textura uniforme, normalmente de una sola familia. Mira [serif o sans serif](https://gradiently.design/es/guide/serif-vs-sans-serif).
- **Alineado a la izquierda, en bandera.** El texto se alinea a un borde; el texto centrado y el justificado son raros.
- **Asimetría.** Las composiciones se equilibran con el peso y el espacio, no reflejándose alrededor del centro.
- **Jerarquía por tamaño, peso y posición.** Nada de cajas, ornamentos ni subrayados para señalar la importancia. Mira [jerarquía visual](https://gradiently.design/es/guide/visual-hierarchy).
- **Pocos colores.** A menudo negro, blanco y un color fuerte, muchas veces rojo.
- **Imágenes objetivas.** Fotografías y formas geométricas en lugar de ilustración decorativa.
- **El espacio como estructura.** Las zonas vacías son partes planificadas de la retícula, no sobras.

- Papel de cartel: #f4f1ea
- Negro de imprenta: #111111
- Rojo señal: #d52b1e
- Gris cálido: #8a8a85

Una paleta suiza clásica: papel, negro, un rojo y un gris para el texto secundario. La contención en el color deja que la retícula y la tipografía sostengan el diseño.

## Cómo construir una retícula suiza para formatos reales

Una retícula son tres números: el margen alrededor del borde, el medianil entre columnas y el número de columnas. Elige un número de columnas que se divida bien: seis columnas se parten en mitades y tercios; doce, en mitades, tercios, cuartos y sextos. Luego comprueba las cuentas para que cada columna mida un número entero de píxeles.

| Formato | Tamaño | Retícula | Ancho de columna |
| --- | --- | --- | --- |
| Post de Instagram | 1080×1350 | 6 columnas, margen 72, medianil 24 | 136 px |
| Post de X | 1600×900 | 8 columnas, margen 80, medianil 24 | 159 px |
| Diapositivas 16:9 | 1920×1080 | 12 columnas, margen 96, medianil 24 | 122 px |
| Cartel A3 a 300 ppp | 3508×4961 | 6 columnas, margen 238, medianil 64 | 452 px |

Retículas resueltas. Columnas, medianiles y márgenes suman exactamente el ancho, así que nada cae en medio píxel.

Añade también una línea base. Elige una unidad pequeña, como 8 px en un post de 1080 px, y haz que los interlineados y los espacios verticales sean múltiplos de ella. Así el texto de distintas columnas queda alineado, y eso explica buena parte de por qué las páginas suizas transmiten tanta calma. [Interlineado y longitud de línea](https://gradiently.design/es/guide/line-height-and-line-length) explica cómo elegir la unidad.

```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; }
```

La retícula del post de Instagram de arriba en CSS: seis columnas de 136 px, un medianil de 24 px y un margen de 72 px. Los interlineados se apoyan en una línea base de 8 px.

El código usa el [diseño de cuadrícula de CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout). El titular ocupa cinco columnas y deja vacía la sexta a propósito; el detalle va en la mitad derecha, abajo, así que la página se equilibra con asimetría y no centrando.

## Reglas de tipografía suiza que puedes copiar

### Evita

- Centrar todas las líneas
- Tres o cuatro tipografías en un mismo diseño
- Cajas y contornos para separar el contenido
- Espaciar más las letras de los titulares grandes
- Muchos tamaños casi iguales

### Haz

- Alinea el texto a la izquierda con el borde de una columna
- Una sola familia grotesca en dos o tres pesos
- El espacio y la alineación para separar el contenido
- Ajusta un poco el espaciado de los titulares grandes
- Pocos tamaños con saltos claros entre ellos

El detalle más suizo es la escala de tamaños. Usa tres o cuatro tamaños con saltos evidentes, como 24, 36 y 112 px en un post de 1080 px, en lugar de una rampa suave. Los titulares grandes suelen verse mejor con un espaciado ligeramente negativo; [espaciado entre letras](https://gradiently.design/es/guide/letter-spacing) muestra las cantidades.

## Cómo combina el diseño suizo con los fondos ricos

Los carteles suizos clásicos solían ser de color plano, pero la retícula no lo exige. Una composición estricta es justo lo que permite que un fondo rico funcione: el texto está tranquilo, alineado y limitado, así que un degradado profundo puede llevar el ambiente sin que la página se convierta en ruido. Es la misma composición tranquila sobre un material rico que se describe en [minimalismo o maximalismo](https://gradiently.design/es/guide/minimalism-vs-maximalism).

- De sangre de buey a rojo señal: `linear-gradient(160deg, #3a0306 0%, #b3120f 55%, #ff5a3c 100%)`
- Azul marino profundo hacia el cielo: `linear-gradient(180deg, #0a1a3a 0%, #1f4fbf 60%, #7fb0ff 100%)`
- Sol en la esquina superior: `radial-gradient(circle at 80% 20%, #ffe066 0%, #ff7a00 35%, #b8002e 75%, #2a0010 100%)`

Degradados que encajan con una retícula suiza: una sola familia de tono o una única fuente de luz, con una zona tranquila donde va el bloque de texto.

Tres reglas mantienen limpia la combinación. Pon el bloque de texto sobre la parte más tranquila del degradado. Usa un solo color de texto para todo, normalmente blanco o negro. Y deja que la fuente de luz del fondo quede en una zona vacía de la retícula, para que se lea como parte de la composición. Para mucho texto sobre color, mira [texto sobre fondos recargados](https://gradiently.design/es/guide/type-on-busy-backgrounds).

Un cartel A3 con el titular La forma sigue a la retícula alineado a la izquierda en una sans serif sobre un fondo degradado profundo

Un cartel A3 sobre una retícula de seis columnas: las palabras ocupan la izquierda, el color la derecha.

Un post vertical con el titular Di menos. Alinea más. alineado a la izquierda sobre el mismo degradado que el cartel

El mismo sistema en un post de Instagram: una familia, tres tamaños, un color de texto.

En Gradiently, un Mark renderiza el fondo en vivo detrás de la composición y desplaza su zona más tranquila detrás de las palabras, así que un bloque de texto suizo mantiene su contraste cuando lo mueves entre columnas o copias el diseño a otros tamaños.

> **La prueba de entrecerrar los ojos** Entrecierra los ojos ante una composición suiza terminada. Deberías ver unos pocos bloques claros sobre columnas invisibles y una forma dominante. Si ves un montón de piezas pequeñas dispersas, quita algunas o ajústalas a la retícula.

## FAQ

### ¿Qué es el diseño suizo?

El diseño suizo, o Estilo Tipográfico Internacional, es un enfoque del diseño gráfico que surgió en Suiza en los años cincuenta. Usa retículas, tipografía sans serif, texto alineado a la izquierda y composiciones asimétricas para comunicar con claridad sin decoración.

### ¿Qué tipografía se usa en el diseño suizo?

Los diseñadores suizos usaban sobre todo sans serif grotescas: Akzidenz-Grotesk, y después Helvetica y Univers, ambas publicadas en 1957. Hoy cualquier grotesca neutra de textura uniforme da un resultado parecido.

### ¿Cuántas columnas debe tener una retícula suiza?

Seis columnas van bien para la mayoría de los posts y carteles porque se dividen en mitades y tercios. Doce columnas van bien para formatos anchos como diapositivas y webs. Comprueba que márgenes, medianiles y columnas suman el ancho exacto.

### ¿El diseño suizo puede usar degradados?

Sí. La retícula, la tipografía y la contención son lo que hace suiza una composición. Un degradado rico detrás de un bloque de texto estricto funciona bien, siempre que el texto vaya sobre una zona tranquila y en un solo color.

### ¿Quiénes fueron los diseñadores suizos más importantes?

Josef Müller-Brockmann, conocido por sus carteles basados en retículas y por su libro Grid Systems in Graphic Design, y Emil Ruder, que enseñó tipografía en Basilea y escribió Typographie, son dos de los más conocidos.