# Efectos de texto sin aire anticuado: contorno, relieve y eco

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

La mayoría de los efectos de texto parecen anticuados porque se aplican a todo, a máxima intensidad y sin motivo. Usados en una palabra, con el peso y el color adecuados, son de las herramientas más expresivas de la tipografía.

## The short version

- Los efectos de texto son tratamientos aplicados a las letras, como contornos, líneas interiores, relieve, ecos desplazados, desajustes de impresión y brillos.
- Los efectos funcionan mejor en unas pocas palabras grandes, en un peso grueso, donde añaden carácter sin dificultar la lectura.
- Los efectos parecen anticuados cuando se aplican a máxima intensidad en todas las líneas, se apilan unos sobre otros o se usan para arreglar una tipografía floja.
- El texto con contorno necesita una tipografía gruesa y sencilla y un fondo tranquilo, porque las letras pierden su forma sólida.
- Elige un solo efecto por diseño y saca sus colores de la paleta del fondo para que parezca diseñado y no añadido.

Los **efectos de texto** son tratamientos aplicados a las letras, como un contorno, una línea interior, un relieve 3D, un eco desplazado, un desajuste de impresión o un brillo suave. No parecen anticuados si se cumplen tres reglas: usa un efecto por diseño, aplícalo a unas pocas palabras grandes en un peso grueso y saca sus colores del fondo y no de un ajuste predefinido. Los efectos fallan cuando se apilan, se reparten por todas las líneas o se usan para rescatar una tipografía que no funcionaba.

Esta guía cubre las principales familias de efectos, cuándo encaja cada una con un mensaje, cómo mantenerlas legibles y cómo construir algunas en CSS. Si todavía no has elegido la tipografía, empieza por [las fuentes display](https://gradiently.design/es/guide/display-fonts), porque la mayoría de los efectos necesitan letras grandes y robustas para funcionar.

## Los principales tipos de efectos de texto

La mayoría de los tratamientos de rotulación pertenecen a unas pocas familias. Cada una arrastra sus propias asociaciones, y por eso elegir una es en realidad elegir un tono de voz.

| Efecto | Cómo se ve | Tono que marca | Riesgo para la legibilidad |
| --- | --- | --- | --- |
| Contorno | Letras dibujadas solo con trazos | Ligero, moderno, editorial | Alto sobre fondos recargados |
| Interior | Una línea fina dentro de cada trazo | Rótulos vintage, artesanía, deporte | Bajo en tamaños grandes |
| Relieve | Letras con profundidad 3D | Retro, divertido, llamativo | Moderado |
| Doble o eco | Una copia desplazada o una estela detrás | Movimiento, música, energía | Moderado |
| Recorte | Letras cortadas y desplazadas | Tensión, moda, tecnología | Moderado |
| Riso | Capas de color desplazadas, textura de impresión | Impresión independiente, fanzines, calidez | Bajo si el desplazamiento es pequeño |
| Halo o brillo | Luz suave alrededor de las letras | Noche, neón, lujo sereno | Bajo sobre fondos oscuros |

Siete familias de efectos de rotulación. Cuanto mayor es el riesgo, más cuidado necesita el efecto.

## Cuándo ayuda un efecto de texto y cuándo perjudica

Un efecto ayuda cuando transmite un significado que las palabras no pueden transmitir solas. Un eco detrás de *Fuerte* lo hace vibrar. Un relieve en la pizarra de una carta retro la sitúa en el tiempo. Un brillo en el cartel de un evento nocturno sugiere el ambiente de la sala. Cuando el efecto no dice nada, se convierte en decoración, y la decoración envejece rápido.

Un diseño vertical con una sola palabra grande sobre un degradado vivo, el tipo de composición que va bien con un efecto de rotulación

Una sola palabra grande es donde un efecto se gana su sitio: hay poco que leer y mucho que sentir.

Un cartel vertical de evento con un título estilizado y los detalles en texto sencillo sobre un degradado oscuro

En el cartel de un evento, el efecto va solo en el título. Las fechas y los detalles quedan sencillos.

### Evita

- Un efecto en el titular y en el texto de cuerpo
- Contorno más sombra más brillo en una misma palabra
- Colores por defecto, como una sombra negra en todo
- Fuentes finas o ligeras bajo efectos pesados
- Efectos usados para que un texto flojo parezca emocionante

### Haz

- Un efecto, en las pocas palabras más grandes
- Un tratamiento por diseño, usado con convicción
- Colores del efecto sacados de la paleta del fondo
- Formas de letra gruesas y sencillas que aguantan el efecto
- Un texto que funciona sin adornos y luego un efecto que añade tono

## Cómo hacer legible el texto con contorno

El texto con contorno es el efecto con más probabilidades de fallar, porque elimina la forma sólida que hace que las letras se reconozcan fácilmente. Úsalo con una sans o una egipcia gruesa de formas abiertas, en tamaños grandes y sobre un fondo tranquilo. Pon un trazo lo bastante grueso para leerse como una línea y no como un pelo: alrededor del 2 al 4 por ciento del tamaño de la fuente es un buen punto de partida.

Un patrón fiable combina una palabra sólida con otra en contorno, como *Sesiones* sólida y *de verano* en contorno. La palabra sólida ancla la lectura; el contorno añade ritmo. Evita por completo el contorno en texto pequeño y revísalo en un móvil, donde los trazos finos son los primeros en desaparecer.

```css
/* Outline: a stroke, no fill. */
.outline {
  color: transparent;
  -webkit-text-stroke: 0.03em #f5f0ff;
}

/* Extrude: stacked shadows, each 1px further. */
.extrude {
  color: #fde8d0;
  text-shadow:
    1px 1px 0 #d9485f,
    2px 2px 0 #d9485f,
    3px 3px 0 #b83250,
    4px 4px 0 #b83250,
    5px 5px 0 #8f2442,
    6px 6px 0 #8f2442;
}

/* Echo: one offset copy in a palette colour. */
.echo {
  color: #ffffff;
  text-shadow: 0.06em 0.06em 0 #7c3aed;
}

/* Halo: a soft glow for dark grounds. */
.halo {
  color: #fff7ed;
  text-shadow: 0 0 0.25em rgb(251 146 60 / 0.55),
               0 0 0.8em rgb(244 114 182 / 0.35);
}
```

Cuatro efectos en CSS sencillo. `-webkit-text-stroke` funciona en todos los navegadores principales a pesar de su prefijo. Las sombras en `em` escalan con el texto.

> **Accesibilidad** Los efectos hechos con CSS mantienen las palabras como texto real, así que los lectores de pantalla, los buscadores y las herramientas de traducción siguen leyéndolas. Los efectos integrados en imágenes necesitan repetir las palabras en el texto alternativo.

## Elegir colores para los efectos de texto

Los efectos parecen añadidos cuando sus colores salen de la nada. Parecen diseñados cuando salen del fondo. Toma el color lateral del relieve de la parte más oscura del degradado, el del eco de su color más saturado y el del brillo de su color más claro. Así el efecto se lee como luz y material de la misma escena.

- Fondo: violeta nocturno: #1a1033
- Eco: violeta: #7c3aed
- Brillo: luz rosa: #f472b6
- Cara de la letra: blanco cálido: #fde8d0

Colores de efecto sacados de un mismo degradado: un fondo oscuro, un eco saturado, un brillo y una cara de letra cálida.

Mantén la cara de la letra con mucho contraste respecto al fondo, y deja que el efecto quede entre ambos en luminosidad. Así el efecto añade profundidad sin quitar contraste a las letras. Para las reglas de contraste de fondo, mira [contraste de color](https://gradiently.design/es/guide/color-contrast-accessibility).

## Efectos de texto en Gradiently

El estudio de Gradiently incluye ocho tratamientos de Rotulación: Contorno, Interior, Recorte, Relieve, Doble, Estela, Riso y Halo. Un Mark además sabe dónde están las palabras: su zona más tranquila se desplaza detrás de ellas, y la tinta Automático elige texto claro u oscuro en cada línea a partir de la propia paleta del Mark, lo que da a una palabra tratada un fondo estable sobre el que apoyarse. Las mismas reglas siguen valiendo: un tratamiento, pocas palabras, una fuente gruesa.

Un diseño cuadrado con una frase corta en grande sobre un degradado tranquilo, con mucho espacio vacío

Una sola frase tratada sobre un fondo tranquilo muestra la contención haciendo su trabajo.

Para saber más sobre cómo hacer que el texto se lea sobre fondos de colores, lee [texto sobre un degradado](https://gradiently.design/es/guide/text-on-gradient); para efectos integrados en el propio degradado, mira [texto con degradado en CSS](https://gradiently.design/es/guide/css-gradient-text).

## FAQ

### ¿Qué efectos de texto se ven modernos?

Los contenidos: un contorno grueso junto a una palabra sólida, un eco pequeño y desplazado, un desajuste riso sutil o un brillo suave sobre un fondo oscuro, cada uno usado en una o dos palabras grandes.

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

Pon el color del texto en transparente y añade `-webkit-text-stroke` con un grosor y un color, como `-webkit-text-stroke: 0.03em #ffffff`. Funciona en todos los navegadores principales.

### ¿Cómo hago un efecto de texto 3D?

Apila varias capas de `text-shadow`, cada una desplazada un píxel más en la misma dirección y más oscura hacia el fondo. Saca los colores de tu fondo para que la profundidad parezca iluminada por la misma luz.

### ¿Los efectos de texto perjudican la legibilidad?

Pueden hacerlo. Limita los efectos a palabras grandes y gruesas, usa un efecto por diseño y comprueba que la cara de la letra sigue teniendo un contraste fuerte con el fondo.