Efecto de texto 3D: letras extruidas con buen gusto

Un efecto de texto 3D hace que las letras planas parezcan sólidas al añadirles laterales, como si cada letra estuviera tallada en un bloque y vista con un ligero ángulo. Con buen gusto, usa una tipografía gruesa, una profundidad corta de alrededor del 5 al 10 % de la altura de la letra, una única dirección constante y laterales de un tono más oscuro del fondo. Mal hecho, usa degradados, brillos, profundidades largas y varias direcciones a la vez. Si lo mantienes simple, el texto extruido parece un rótulo seguro de sí mismo y no un clip art.

Qué hace que el texto extruido quede bien o cutre

La extrusión tiene una larga historia en los rótulos pintados a mano, los carteles de circo y las portadas de discos de los años setenta. Por eso transmite calidez y un punto de nostalgia. Aprovéchalo para cafeterías, helados, marcas infantiles, música y eventos. Para una marca tranquila y minimalista suele ser la voz equivocada; los efectos de texto te ayudan a elegir uno que encaje.

Cómo elegir profundidad, dirección y color

Profundidad

Los laterales deben ser más cortos que el ancho de los trazos de la letra. En un titular de 160 px, una profundidad de 8 a 16 px se ve sólida; con 40 px empieza a parecer una sombra larga, que es otro estilo. El texto pequeño no puede llevar profundidad, así que limita la extrusión a tamaños de titular.

Dirección

Elige una dirección y mantenla en todos los diseños. Abajo y a la derecha es lo más natural, porque solemos entender que la luz viene de arriba y de la izquierda. Hacia abajo recuerda a bloques apilados. Arriba y a la izquierda resulta raro, lo que puede funcionar para una frase suelta pero cansa enseguida.

Color

Tres tonos hacen todo el trabajo: la cara de la letra, el lateral y el fondo. La cara debe contrastar con fuerza con el fondo. El lateral queda entre ambos, normalmente un tono profundo del fondo o de la cara. Si lo tomas del fondo, la extrusión parece iluminada por la misma luz.

Cómo hacer un efecto de texto 3D en CSS

CSS no tiene una propiedad de extrusión, pero las sombras apiladas hacen el trabajo. Cada capa de text-shadow es una copia sólida de las letras, desplazada un píxel más, sin desenfoque. Apila las suficientes y las copias se funden en laterales sólidos. Una última sombra más suave debajo asienta las letras en la página.

.extruded {
  font-family: "Archivo Black", system-ui, sans-serif; /* load it from Google Fonts */
  font-size: 10rem;
  line-height: 1;
  color: #fff1d6;
  text-shadow:
    1px 1px 0 #c2410c,
    2px 2px 0 #c2410c,
    3px 3px 0 #c2410c,
    4px 4px 0 #c2410c,
    5px 5px 0 #c2410c,
    6px 6px 0 #c2410c,
    7px 7px 0 #c2410c,
    8px 8px 0 #c2410c,
    10px 12px 10px rgb(67 20 7 / 0.35);
}

Escribir decenas de capas a mano es tedioso. Unas pocas líneas de JavaScript generan la lista para cualquier profundidad, dirección y color, y puedes pegarla en tu hoja de estilos.

// Build a text-shadow value for an extrusion
function extrude(depth, color, dx = 1, dy = 1) {
  const layers = [];
  for (let i = 1; i <= depth; i++) {
    layers.push(`${i * dx}px ${i * dy}px 0 ${color}`);
  }
  return layers.join(", ");
}

console.log(extrude(12, "#1e3a8a"));        // down and right
console.log(extrude(10, "#1e3a8a", 0, 1));  // straight down

Mantén los titulares extruidos como texto real en un sitio web, para que se puedan buscar, seleccionar y leer con lectores de pantalla. Las sombras no cambian el contraste medido entre letra y fondo, así que asegúrate de que el color de la cara lo cumpla por sí solo. Si prefieres una versión más ligera y gráfica, una única sombra dura sin capas se explica en sombras de texto; para un 3D real con iluminación y rotación, entras en el terreno de WebGL, que presentan los degradados con shaders.

Cómo hacer lettering extruido paso a paso

1. 1

   Elige entre dos y cuatro palabras

   El nombre de una tienda, una oferta, el título de un evento. La extrusión necesita espacio alrededor.

2. 2

   Ponlas en una tipografía gruesa

   Una sans o slab de peso black, o una serif retro suave. En fuentes retro encontrarás algunas con la calidez adecuada.

3. 3

   Elige los colores de cara, lateral y fondo

   Contraste fuerte entre cara y fondo; el lateral, un tono más oscuro del fondo.

4. 4

   Añade profundidad en una sola dirección

   Empieza con alrededor del 6 % de la altura de la letra, abajo y a la derecha. Auméntala solo si sigue viéndose plano.

5. 5

   Deja todo lo demás plano

   Detalles, fechas y precios en una sans lisa y sólida, sin efecto.

Texto extruido en Gradiently

Relieve es uno de los tratamientos de Lettering de Gradiently: da a cualquier texto del Studio una profundidad sólida hacia abajo y a la derecha, con los laterales dibujados en los colores del propio Mark y un control para la profundidad, así que no hay capas que apilar. El Mark que hay tras el diseño lleva su zona más tranquila detrás de las palabras, de modo que el lettering extruido sigue legible por mucho que cambie el fondo a lo largo del encuadre. El efecto de texto con contorno y otros tratamientos están en el mismo menú por si la extrusión resulta demasiado ruidosa para el mensaje.