Efecto de texto con contorno: letras huecas que se leen

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.

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 tienes más.

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 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.
• Contorno al pasar el cursor o en un segundo estado: en la web, un botón o enlace hueco que se rellena al seleccionarlo.

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 tiene los detalles.

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

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

1. 1

   Elige la palabra

   Una o dos palabras que lleven el mensaje, nunca una frase.

2. 2

   Ponla gruesa y grande

   Un peso black a tamaño de titular. El lettering con contorno no es para texto corrido.

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