# Efecto de texto con contorno: letras huecas que se leen

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

Las letras huecas lucen en un cartel y desaparecen en el móvil más que cualquier otro efecto. Te explicamos cómo elegir tipografía, trazo y composición para que aguanten, con CSS que funciona en todos los navegadores.

## The short version

- El efecto de texto con contorno dibuja solo el borde de cada letra y deja el interior hueco para que se vea el fondo.
- El texto con contorno se lee mejor en una tipografía sans o slab gruesa, de formas abiertas, a gran tamaño y con un trazo de alrededor del 2 al 4 % del tamaño de la fuente.
- Combinar una palabra con contorno y otra sólida da al lector un punto de apoyo y deja el contorno como ritmo, no como todo el mensaje.
- En CSS, el texto con contorno se logra con -webkit-text-stroke y un color transparente, que admiten todos los navegadores principales.
- Evita el contorno en texto pequeño, pesos finos o tipografías script, porque los trazos finos son lo primero que pierde una pantalla de móvil.

El **efecto de texto con contorno** muestra solo el borde de cada letra y deja el interior hueco para que se vea el fondo. Se lee cuando se cumplen tres condiciones: una tipografía gruesa de formas abiertas, un trazo lo bastante grueso para leerse como línea (alrededor del 2 al 4 % del tamaño de la fuente) y un tamaño grande con un fondo tranquilo detrás. La composición más fiable combina una palabra sólida con una palabra con contorno, para que el ojo tenga algo firme que leer primero.

## Por qué cuesta leer el texto con contorno

Reconocemos las letras por sus formas sólidas. El contorno quita esa masa y deja dos líneas finas por cada trazo, un borde exterior y otro interior. A tamaños grandes el ojo rellena la forma. A tamaños pequeños, o con un trazo finísimo, las dos líneas se funden o se pierden en el fondo. Un fondo cargado lo empeora, porque el interior hueco deja ver cada detalle de la textura.

### Falla

- Pesos ligeros o normales
- Trazos finísimos de menos del 1 % del tamaño
- Tipografías script o serif de alto contraste
- Frases enteras con contorno
- Texto pequeño, por debajo de unos 60 px en una publicación
- Una foto con mucho detalle visible a través de las letras

### Funciona

- Pesos black, heavy o extra bold
- Trazos de alrededor del 2 al 4 % del tamaño
- Tipografías sans, slab o grotescas robustas
- Una o dos palabras, el resto sólido
- Tamaños de titular, de 120 px en adelante en una publicación
- Un degradado tranquilo o un color liso detrás

## Cómo elegir la tipografía y el trazo

Empieza por el peso. Una tipografía black o extra bold tiene trazos anchos, así que su contorno sigue describiendo una forma clara. Las letras abiertas también ayudan: los ojos redondos de la O, la A y la e se siguen viendo en lugar de cerrarse. Archivo Black, Anton o una grotesca gruesa son buenos puntos de partida; en [fuentes en negrita](https://gradiently.design/es/guide/bold-fonts) tienes más.

| Tamaño de fuente | Grosor del trazo | Uso |
| --- | --- | --- |
| 60 px | 2 px | Lo más pequeño que debería ir una palabra hueca, y solo sobre fondo liso |
| 120 px | 3 a 4 px | Titulares de publicaciones sociales de 1080 px de ancho |
| 200 px | 5 a 7 px | Palabras sueltas grandes y líneas de cartel |
| 400 px | 10 a 14 px | Palabras enormes de fondo y banners |

Grosores de trazo de aproximadamente el 2 al 4 % del tamaño de la fuente. Ve más grueso con pesos ligeros; más fino solo si las letras empiezan a taparse.

El color importa tanto como el grosor. Un trazo claro sobre fondo oscuro se lee con más facilidad que uno oscuro sobre fondo claro, porque las líneas claras parecen expandirse un poco. Toma el color del trazo de la zona más clara o más oscura del fondo para que parezca parte del diseño. Si el fondo es un degradado, comprueba el trazo donde el fondo se parece más al color del trazo: ahí es donde el contorno desaparecerá primero.

## Composiciones donde funciona el texto con contorno

- **Pareja sólido y hueco**: *Verano* sólido, *Sesiones* con contorno. La palabra sólida ancla y el contorno aporta ritmo.
- **Palabra repetida**: la misma palabra apilada tres o cuatro veces, una sólida y el resto con contorno, para dar sensación de eco o movimiento. Los [efectos de texto retro](https://gradiently.design/es/guide/retro-text-effect) tratan los acabados afines de doble y estela.
- **Palabra de fondo**: una palabra enorme con contorno detrás de un titular sólido más pequeño, que actúa como textura y no como texto. Para dar profundidad en vez de vacío, mira el [efecto de texto 3D](https://gradiently.design/es/guide/3d-text-effect).
- **Contorno al pasar el cursor o en un segundo estado**: en la web, un botón o enlace hueco que se rellena al seleccionarlo.

Una publicación vertical con la palabra Sesiones muy grande y una pequeña sobreetiqueta que dice Verano encima

Una palabra grande, la forma que mejor le va al lettering con contorno: corta y gruesa, con pequeños detalles sólidos debajo.

Una story vertical para un ciclo de música de verano con la palabra Sesiones como titular

La misma palabra en una story. El formato alto deja espacio para repetirla por la página, una copia sólida y el resto huecas.

## Cómo hacer texto con contorno en CSS

La propiedad es `-webkit-text-stroke`. A pesar del prefijo, funciona en todos los navegadores principales y forma parte del estándar de compatibilidad web. Pon el color del texto en transparente para una palabra hueca, o mantén un relleno para una letra sólida con borde. La [referencia de MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke) tiene los detalles.

```css
.outline {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: clamp(3rem, 10vw, 8rem);
  line-height: 1;
  color: #fafaf9; /* fallback: solid letters */
}

@supports (-webkit-text-stroke: 1px black) {
  .outline {
    color: transparent;
    -webkit-text-stroke: 0.03em #fafaf9; /* about 3% of the size */
  }
}

/* Solid and hollow pair */
.outline-pair .solid { color: #fafaf9; }
.outline-pair .hollow {
  color: transparent;
  -webkit-text-stroke: 0.03em #fafaf9;
}
```

Un trazo en `em` escala con el tamaño de la fuente. El bloque `@supports` mantiene letras sólidas donde la propiedad no está disponible.

> **El trazo se come la letra** CSS dibuja el trazo centrado en el borde de la letra, así que la mitad cae dentro. Los trazos gruesos en una palabra rellena la hacen parecer más fina y pueden cerrar los ojos pequeños. En SVG, `paint-order: stroke` dibuja el trazo detrás del relleno y lo evita.

Los lectores de pantalla leen el texto con contorno con normalidad, porque sigue siendo texto real. Mantenlo así: no conviertas en imágenes los titulares con contorno de un sitio web. El contraste es el riesgo que queda, porque las herramientas miden el color del texto, que ahora es transparente. Comprueba el trazo contra el fondo a ojo y con un comprobador de contraste sobre el color del trazo. [Contraste de color y accesibilidad](https://gradiently.design/es/guide/color-contrast-accessibility) explica las proporciones.

## Trazo exterior e inline: dos estilos de lettering emparentados

El lettering con contorno tiene parientes que conservan más de la forma sólida. Un **trazo exterior** dibuja una línea alrededor de una letra sólida y la separa del fondo como el borde de una pegatina. Un **inline** corta una línea fina dentro de cada trazo, el aire de la tipografía de exhibición grabada y victoriana, y de muchos rótulos de tienda. Ambos se leen mejor que una palabra totalmente hueca, así que son buena opción cuando las palabras deben funcionar a tamaños menores. Para ver toda la familia de tratamientos, consulta los [efectos de texto](https://gradiently.design/es/guide/text-effects).

1. **Elige la palabra** Una o dos palabras que lleven el mensaje, nunca una frase.
2. **Ponla gruesa y grande** Un peso black a tamaño de titular. El lettering con contorno no es para texto corrido.
3. **Elige hueco, trazo exterior o inline** Hueco para el dramatismo, trazo exterior para despegar una palabra de un fondo cargado, inline para un toque artesanal de rotulación.
4. **Toma el color del fondo** Usa su tono más claro o más oscuro para que el trazo pertenezca al diseño.
5. **Compruébalo en un móvil** Mira la publicación a tamaño real. Si el contorno parpadea o desaparece, engrosa el trazo o rellena la palabra.

Los tratamientos de Lettering de Gradiently cubren esta familia sin montar capas a mano: Interior talla una línea dentro de cada letra, Doble dibuja letras abiertas dos veces, Estela deja contornos como estela y Contorno rodea las palabras con curvas de nivel. Como el Mark que hay tras el diseño lleva su zona más calmada detrás de las palabras, un titular hueco o con inline obtiene el fondo estable que necesita. El lettering con degradado es otra técnica distinta, que se explica en [texto con degradado en CSS](https://gradiently.design/es/guide/css-gradient-text).

## FAQ

### ¿Cómo hago texto con contorno en CSS?

Pon `color: transparent` y `-webkit-text-stroke: 0.03em #ffffff` en el texto. La propiedad con prefijo funciona en todos los navegadores principales.

### ¿Qué fuente va mejor para texto con contorno?

Una sans o slab gruesa de formas abiertas, como Archivo Black o Anton. Los pesos finos y las script se deshacen con el contorno.

### ¿Qué grosor debe tener el contorno de un texto?

Alrededor del 2 al 4 % del tamaño de la fuente: unos 3 a 4 px para un titular de 120 px.

### ¿Es accesible el texto con contorno?

Los lectores de pantalla lo leen con normalidad, pero puede fallar en contraste. Úsalo solo para palabras grandes y comprueba el color del trazo contra el fondo.