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

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

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.

Si quieres saber cómo funcionan en general el texto con relieve y el texto contorneado, efectos de texto 3D y texto con contorno 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.

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 elija la otra tinta.

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

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

1. 1

   Selecciona el texto

   Elige el titular o la palabra que quieres tratar. Deja todo lo demás como texto sencillo.

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

/* 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;
}

Para la familia completa de efectos, incluidos los que no se trasladan bien a la web, consulta efectos de texto. Y si estás decidiendo si de verdad necesitas lettering, lettering vs tipografía es una lectura útil.