# Efectos de lettering: Contorno, Interior, Relieve y más

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

Un tratamiento convierte una línea de texto en una pieza de lettering, dibujada con los colores de tu Mark. Aquí están los ocho, con lo que mejor hace cada uno y los que conviene evitar.

## The short version

- Gradiently tiene ocho efectos de lettering: Contorno, Interior, Recorte, Relieve, Doble, Estela, Riso y Halo.
- Cada tratamiento se dibuja con los colores del Mark del diseño, así que el lettering siempre pertenece al fondo.
- Los efectos de lettering funcionan mejor en palabras cortas de titular, como un título, un nombre o una sola palabra, no en el texto de cuerpo.
- Contorno, Recorte y Relieve llevan su propio contraste y van bien con carteles rotundos; Interior, Doble y Riso encajan con estéticas editoriales e impresas.
- Usa un solo tratamiento por diseño, en la línea que más importa, y deja el texto de apoyo sencillo.

Gradiently tiene ocho **efectos de lettering**: Contorno, Interior, Recorte, Relieve, Doble, Estela, Riso y Halo. Cada uno convierte una línea de texto en lettering dibujado con los colores de tu Mark: curvas de nivel que rodean las palabras, una línea tallada dentro de cada letra, palabras recortadas de una placa, letras profundas en tres dimensiones y más. Son para palabras de titular, un título o un nombre, y funcionan mejor de uno en uno, en la línea que más quieres que se vea.

## Los ocho tratamientos de lettering de un vistazo

| Tratamiento | Qué dibuja | Transmite | Ideal para |
| --- | --- | --- | --- |
| **Contorno** | Curvas de nivel que se propagan alrededor de las palabras | Mapas, topografía, sonido | Carteles de festival, portadas de discos, marcas outdoor |
| **Interior** | Una línea tallada dentro de cada letra, por la que asoma el Mark como segundo color | Rótulos, impresión vintage | Títulos estilo escaparate, cartas, etiquetas |
| **Recorte** | Palabras recortadas de una placa sólida | Plantilla, papel recortado | Portadas rotundas, posts de rebajas, frases de una palabra |
| **Relieve** | Letras profundas con laterales en los colores del Mark | Sólido, escultórico, retro | Títulos de eventos, lanzamientos, miniaturas de YouTube |
| **Doble** | Letras abiertas dibujadas dos veces, algo separadas | Eco, movimiento, moda | Portadas editoriales, música, vida nocturna |
| **Estela** | Contornos que siguen a las letras, con un color de estela que puedes elegir | Velocidad, movimiento, los años setenta | Deporte, cuentas atrás, stories con energía |
| **Riso** | Dos tintas algo desalineadas, con un punteado granulado | Fanzines en risografía, impresión independiente | Carteles, fanzines, panaderías, librerías |
| **Halo** | Una luz suave con el color del Mark alrededor de las letras | Neón, atardecer, ensoñación | Solo decoración, nunca como arreglo de legibilidad |

Los ocho tratamientos. Cada uno sale de la paleta del Mark, así que al cambiar el Mark el lettering cambia de color con él.

## Contorno, Recorte y Relieve: lettering con contraste propio

Estos tres construyen un borde fuerte dentro de las letras, por eso aguantan bien sobre Marks muy vivos. **Contorno** rodea las palabras con líneas como un mapa en relieve, de modo que el lettering parece emerger del fondo. **Recorte** convierte las palabras en formas recortadas de una placa sólida, algo que se lee seguro y gráfico. **Relieve** da profundidad a cada letra, dibujada con los colores del Mark, el look clásico para un título de lanzamiento o una miniatura.

Un cartel vertical con la palabra Solsticio compuesta a gran tamaño sobre un Mark degradado cálido

Una palabra, muy grande: la escala para la que están hechos Contorno y Relieve.

El mismo diseño Solsticio como cartel de evento, con el título grande y los detalles de apoyo sencillos debajo

El título tratado arriba, con los detalles en texto sencillo debajo. Solo el título lleva el efecto.

Si quieres saber cómo funcionan en general el texto con relieve y el texto contorneado, [efectos de texto 3D](https://gradiently.design/es/guide/3d-text-effect) y [texto con contorno](https://gradiently.design/es/guide/outline-text) explican el oficio que hay detrás.

## Interior, Doble y Riso: la familia impresa y editorial

**Interior** talla una sola línea dentro de cada letra, y como esa línea muestra el propio Mark, el fondo se convierte en el segundo color del lettering. Le van mejor las tipografías gruesas y anchas, con espacio dentro del trazo. **Doble** dibuja letras abiertas dos veces, algo desplazadas, para un eco que recuerda a la moda o a la impresión musical. **Riso** imita una risografía: dos tintas que no acaban de coincidir y un punteado granulado, perfecto para cualquier cosa que deba parecer impresa a mano.

> **Elige el tratamiento según la tipografía** Interior y Recorte necesitan trazos gruesos, así que combínalos con una tipografía de titular pesada. Doble y Estela lucen más en letras abiertas y sencillas. Riso perdona casi cualquier tipografía, lo que lo convierte en una primera prueba segura.

## Estela y Halo: movimiento y atmósfera

**Estela** repite el contorno de una palabra detrás de ella, como letras que dejan una estela. Puedes elegir el color de la estela, y se lee como velocidad: ideal para deporte, cuentas atrás y todo lo que deba parecer en movimiento incluso en una imagen fija. **Halo** rodea las letras con una luz suave del color del Mark. Es puramente decorativo, una atmósfera más que una herramienta, y nunca una forma de rescatar un texto difícil de leer. Si una línea cuesta de leer, sube el nivel de reacción del Mark o deja que la [tinta automática](https://gradiently.design/es/guide/auto-ink-legibility) elija la otra tinta.

## Cómo elegir un efecto de lettering según el trabajo

| Vas a crear | Prueba primero | Después prueba |
| --- | --- | --- |
| Un cartel de concierto o festival | Contorno | Riso |
| Un post de lanzamiento de producto | Relieve | Recorte |
| El título de la carta de una cafetería o panadería | Interior | Riso |
| Una miniatura de YouTube | Relieve | Recorte |
| Una portada estilo revista o la apertura de un carrusel | Doble | Interior |
| Una cuenta atrás o una story deportiva | Estela | Relieve |
| Un fanzine o un cartel de librería | Riso | Doble |

Puntos de partida, no reglas. Prueba dos, míralos al tamaño en que la gente los verá de verdad y quédate con el que se lee primero.

### Evita

- Un tratamiento en texto de cuerpo o en detalles pequeños
- Dos tratamientos distintos en un mismo diseño
- Titulares largos de ocho palabras o más
- Usar Halo para que una línea floja se lea

### Haz

- Un tratamiento en una o dos palabras de titular
- Texto de apoyo sencillo y bien espaciado
- Tipografías gruesas para Interior y Recorte
- Revísalo en el móvil, al tamaño real

## Cómo añadir un efecto de lettering en el Studio

1. **Selecciona el texto** Elige el titular o la palabra que quieres tratar. Deja todo lo demás como texto sencillo.
2. **Elige un tratamiento** Escoge uno de los ocho tratamientos de lettering. Se dibuja al instante con los colores del Mark del diseño.
3. **Ajusta la tipografía** Usa un peso más grueso o un ancho mayor si el efecto se ve apretado, y añade algo de espaciado entre letras para Doble y Estela.
4. **Prueba otro Mark** Cambia el Mark y observa cómo el lettering cambia de color con él. Es la forma más rápida de juzgar un tratamiento.
5. **Revisa cada tamaño** Adapta el diseño a una story o a una miniatura y comprueba que la palabra tratada se sigue leyendo a esa escala.

## Efectos de lettering en CSS, para la web

Si necesitas un look parecido en una web, dos de ellos se traducen bien a CSS: un contorno al estilo de Doble y un relieve escalonado. Ambos usan texto real, así que siguen siendo seleccionables y accesibles.

```css
/* Open outline letters, in the spirit of Double */
.outline {
  color: transparent;
  -webkit-text-stroke: 2px #f4b26a;
  text-shadow: 6px 6px 0 #7a2e5c;
}

/* A stepped extrusion in two tones */
.extrude {
  color: #fbe7d4;
  text-shadow:
    1px 1px 0 #c2577a,
    2px 2px 0 #c2577a,
    3px 3px 0 #a3456a,
    4px 4px 0 #a3456a,
    5px 5px 0 #7a2e5c,
    6px 6px 0 #7a2e5c;
}
```

Las sombras de borde duro sin desenfoque crean profundidad en lugar de un resplandor. `-webkit-text-stroke` funciona en todos los navegadores actuales; consulta [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke).

Para la familia completa de efectos, incluidos los que no se trasladan bien a la web, consulta [efectos de texto](https://gradiently.design/es/guide/text-effects). Y si estás decidiendo si de verdad necesitas lettering, [lettering vs tipografía](https://gradiently.design/es/guide/lettering-vs-typography) es una lectura útil.

## FAQ

### ¿Qué efectos de lettering tiene Gradiently?

Ocho: Contorno, Interior, Recorte, Relieve, Doble, Estela, Riso y Halo, cada uno dibujado con los colores del Mark del diseño.

### ¿Puedo usar efectos de lettering en el texto de cuerpo?

Mejor no. Los tratamientos están pensados para palabras cortas de titular; el texto sencillo mantiene fácil de leer lo que es más largo.

### ¿Qué efecto de lettering es mejor para un cartel?

Contorno, Relieve y Riso son opciones fuertes para carteles. Contorno y Relieve llevan su propio contraste, y Riso aporta un aire impreso.

### ¿Los efectos de lettering cambian de color con el Mark?

Sí. Cada tratamiento sale de la paleta del Mark, así que al cambiar de Mark el lettering cambia de color.

### ¿Debo usar Halo para que el texto se lea mejor?

No. Halo es decorativo. Para la legibilidad, sube el nivel de reacción del Mark o deja que la tinta automática elija la otra tinta.