Generador de trazos de texto CSS

De dónde viene el contorno de texto CSS

La idea de contornear un glifo precede al CSS en décadas; es nativa de PostScript (Adobe, 1984) y fue trasladada a SVG 1.1 (Recomendación W3C, 2.ª edición, 16 de agosto de 2011), que define los atributos de pintura stroke, stroke-width, stroke-linecap y stroke-linejoin para cualquier forma incluido <text>. CSS obtuvo su propia versión cuando Apple lanzó -webkit-text-stroke en Safari 3 en junio de 2007, junto a -webkit-text-fill-color. La propiedad nunca fue estandarizada en ninguna spec W3C publicada; vive en el Editor's Draft del Módulo CSS Text Decoration Nivel 4 como text-stroke sin prefijo, pero a partir de 2026 el nombre sin prefijo todavía no está habilitado en ningún navegador. Firefox 49 (20 de septiembre de 2016) y Edge 15 (5 de abril de 2017) ambos añadieron -webkit-text-stroke como alias de compatibilidad web explícito para manejar páginas que solo usan el nombre con prefijo WebKit. En producción, escriba el prefijo.

Tres maneras de contornear texto en la web

Hay más de una manera de dibujar un contorno alrededor del texto. La herramienta correcta depende del ancho, el presupuesto de legibilidad y si los glifos subyacentes deben mantenerse nítidos:

• -webkit-text-stroke, la propiedad que este generador emite. Una línea de CSS, compuesta por GPU, gratis en cualquier framerate. El contorno se dibuja centrado en el contorno del glifo, mitad dentro y mitad fuera, lo que significa que los contornos gruesos empiezan a comerse las formas de las letras.
• text-shadow en cuatro direcciones, el respaldo universal que funciona en todos los navegadores hasta IE 10. text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; apila cuatro sombras de 1 píxel en cada esquina para fingir un contorno de 1 px. Definido en el Módulo CSS Text Decoration Nivel 3 (Candidate Recommendation W3C agosto de 2019). En contornos más anchos los artefactos en escalón se vuelven visibles; ocho o dieciséis direcciones pueden suavizarlos al costo de más sombras.
• SVG <text> con paint-order: stroke fill;, la respuesta correcta cuando necesita un contorno grueso sin que la tinta sangre dentro de la letra. La propiedad paint-order dibuja el contorno primero, luego el relleno encima, por lo que el relleno se mantiene en su ancho completo anunciado.

Accesibilidad: lógica de contraste, no al texto de cuerpo, sí al decorativo

El Criterio de Éxito WCAG 2.1 1.4.3 «Contraste (Mínimo)» (Recomendación W3C 5 de junio de 2018) requiere contraste 4,5:1 para texto normal y 3:1 para texto grande (18 pt / 14 pt negrita). Con un contorno aplicado, el borde visualmente dominante del glifo es el color del contorno, por lo que la verificación de contraste tiene que comparar ese color contra el fondo, no el relleno. Un fallo común: un logo amarillo sobre blanco con un fino contorno negro pasa si verifica negro vs. blanco, pero el cuerpo de la letra es amarillo sobre blanco y se lee mal en tamaños pequeños. Los contornos destruyen la legibilidad en el texto de cuerpo. Bajo 16 px de tamaño de fuente, un contorno de 1 px llena del 10 al 15 por ciento del interior del glifo y un contorno de 2 px puede cerrar las contraformas (los agujeros en «a», «e», «o»). Reserve el contorno de texto para titulares, tipografía de despliegue y uso decorativo; nunca lo aplique al texto de párrafo sin pruebas explícitas en cada punto de ruptura.

Cuándo un contorno de texto es la herramienta correcta

• Títulos de cómics e interfaz de juegos: el look clásico Marvel / Nintendo de contorno negro grueso sobre relleno brillante.
• Marcas de agua y superposiciones decorativas: solo contorno semi-transparente, sin relleno, sentado sobre imágenes.
• Gráficos de tutorial, capturas de pantalla, llamadas donde el texto debe destacar contra un fondo desconocido.
• Botones «fantasma» donde el texto del botón usa un contorno y un relleno transparente para sentirse igualado en peso con el botón bordeado en sí.
• Titulares solo con contorno en diseño editorial, el look «letra hueca» que fue grande a fines de 2010.

Errores comunes

• Olvidar el prefijo -webkit-. El text-stroke sin prefijo está solo en estado Editor's Draft y no se ha enviado. Siempre escriba la forma con prefijo en producción.
• Intentar animar -webkit-text-stroke-width. No está en la lista de propiedades CSS animables. Las transiciones «saltarán» en lugar de interpolar. Anime text-shadow o use SVG cuando se requiera movimiento.
• Aplicar un contorno al texto pequeño. Bajo 16 px el contorno llena el interior del glifo y cierra las contraformas. Establezca una guarda de tamaño de fuente mínimo con una media query.
• Combinar contornos anchos con letter-spacing ajustado. El contorno cruza entre glifos adyacentes y produce manchas grises donde las formas se tocan.
• Contar el color del contorno como el «color del texto» en verificaciones de contraste. Tanto el relleno como el contorno deben pasar WCAG 1.4.3 contra el fondo.
• No probar las hojas de estilo de impresión. Los contornos pueden renderizarse dramáticamente más gruesos o más delgados al imprimirse, especialmente en navegadores que reducen la escala de la gama de color para salida PDF.

Más preguntas frecuentes

¿Por qué mi contorno se ve más grueso en una pantalla Retina que en un monitor 1080p?

No lo es, en píxeles CSS. Un contorno de 2px es exactamente 2 píxeles CSS en ambos. Lo que cambia es la nitidez percibida: en una pantalla Retina (DPR 2×), un contorno de 2 píxeles CSS es 4 píxeles de dispositivo y se antialiasing limpiamente. En una pantalla 1×, 2 píxeles de dispositivo dan un borde notablemente más borroso. Si necesita una línea fina que se ajuste a un píxel de dispositivo en Retina, escriba 0.5px; los navegadores redondean a un píxel de dispositivo en pantallas de alto DPR.

¿Puedo tener un color de contorno diferente para cada letra?

No con una sola declaración -webkit-text-stroke. O envuelva cada letra en un <span> y estilice individualmente, o use elementos SVG <tspan> con su propio atributo stroke. El pseudo-elemento ::first-letter acepta text-stroke si solo necesita que la primera letra difiera.

¿Qué tan grueso es demasiado grueso para un contorno?

Un techo práctico es aproximadamente el 8 por ciento del tamaño de fuente. A 100 px de fuente, eso es 8 px de contorno; más allá las letras empiezan a superponerse. Si quiere un visual de contorno más grueso, use SVG <text> con paint-order: stroke fill; para que el relleno se mantenga en el ancho original y el contorno se extienda solo hacia afuera.

¿-webkit-text-stroke funciona en emojis?

En emojis a color (el predeterminado en navegadores modernos), el contorno se aplica a la silueta exterior del glifo emoji. El resultado es generalmente sutil porque el emoji ya tiene su propio contorno y sombreado. Para emojis en blanco y negro (la variación de fuente text), el contorno se aplica limpiamente como cualquier otro glifo.

¿Se envía algo a un servidor?

No. El texto que escribe en la vista previa, los colores que elige y el CSS generado se procesan todos en el JavaScript de su navegador. No se realiza ninguna llamada de red. Abra la pestaña Red en DevTools para verificar.