Tipografía rayada: 11 fuentes con rayas gratis y premium (2026)

Una tipografía rayada es una fuente con letras hechas de líneas paralelas o con rayas dentro del trazo. Dan sensación de velocidad, de neón o de cartel retro, y funcionan en branding deportivo, carteles, portadas de discos y camisetas. Aquí tienes 11 fuentes con rayas de verdad, probadas una a una: gratis para uso personal, gratis con uso comercial y premium.

Respuesta rápida: si vas a vender el diseño, usa una de Google Fonts: Monoton para rayas tipo neón, Faster One para velocidad o Sixtyfour para rayas horizontales. Para un proyecto de cliente con más personalidad, Shane o Echo Stripes en Envato. Y si quieres el efecto con cualquier fuente, al final te enseño a hacerlo en Illustrator, Photoshop o CSS.

Tipografías rayadas gratis

Estas dos son gratis para proyectos personales. Si vas a usarlas en algo que vendas, sus autores piden comprar una licencia comercial. Para uso comercial gratis, salta a las de Google Fonts.

Alternativas en Google Fonts

Estas seis son las mejores opciones si necesitas uso comercial gratis: logos, camisetas o packaging que vayas a vender. Todas son de Google Fonts, con licencia libre. Las ves escritas aquí mismo:

Tipografías rayadas premium

Si el diseño es para un cliente, estas tres traen licencia comercial con la suscripción de Envato Elements. Además tienen más estilos y caracteres que la mayoría de las rayadas gratis.

Cómo hacer letras rayadas con cualquier fuente

Si ya tienes la fuente de tu marca y solo quieres el efecto, no necesitas una tipografía rayada. Te lo explico en las tres herramientas que más se usan.

En Illustrator

1. Escribe el texto con una fuente gruesa y pásalo a trazados con Texto > Crear contornos.
2. Dibuja encima una serie de rectángulos finos y paralelos que cubran todo el texto.
3. Selecciona todo y usa la herramienta Creador de formas, o Buscatrazos > Menos frente, para quedarte con las letras cortadas en rayas.

En Photoshop

1. Escribe el texto y crea encima una capa nueva rellena de rayas: un motivo de líneas o un degradado de franjas.
2. Con la capa de rayas seleccionada, haz clic derecho y elige «Crear máscara de recorte». Las rayas quedan solo dentro de las letras.
3. Mueve o rota la capa de rayas para cambiar el ángulo. Tienes más ideas en estos efectos de texto en Photoshop.

En CSS, para tu web

Con un degradado repetido y background-clip: text rayas cualquier texto sin descargar nada. Este titular usa Arial:

RAYAS CSS

.texto-rayado {
  background: repeating-linear-gradient(0deg, #1f2937 0 4px, transparent 4px 8px);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Cambia 0deg por 90deg para rayas verticales, o por 45deg para diagonales. Si quieres entender bien la sintaxis, tienes mi guía de degradados en CSS.

Cómo usar fuentes rayadas en proyectos reales

Branding deportivo o dorsales: Bungee Inline o Faster One en el número y el nombre, con los colores del equipo. Las rayas comunican movimiento y energía. Para los números, mira también las tipografías de números.

Cartel retro o fiesta de los 80: Monoton sobre fondo oscuro, con colores neón. Si te gusta ese estilo, tienes más en las fuentes de neón y las tipografías retro.

Editorial o moda: Zen Tokyo Zoo o Pinstripe Limo en el titular, con mucho espacio alrededor y una sans neutra para el texto.

Tecnología, música electrónica o videojuegos: Sixtyfour o Echo Stripes. Para un logo, revisa antes mis tipografías para logos: una rayada pierde detalle cuando el logo se ve pequeño.

Cómo instalar una fuente en tu equipo

1. Descarga el archivo desde el enlace de cada ficha y descomprime el .zip.
2. Haz doble clic en el .ttf o .otf.
3. Pulsa Instalar (en Windows es directo; en Mac se abre el Catálogo Tipográfico).
4. Reinicia el programa donde la vayas a usar (Photoshop, Illustrator, Word) para que aparezca.

En Canva Pro puedes subir tu .ttf desde «Marca > Fuentes». En Figma, instálala en el sistema y reinicia; tienes la guía completa en cómo añadir tipografías en Figma.

Preguntas frecuentes

¿Cómo se llaman las letras con rayas?

En inglés se buscan como «striped fonts» o «inline fonts». Inline es cuando hay una línea que recorre el interior de la letra, como Bungee Inline. Si la letra entera está hecha de líneas paralelas, como Monoton, también se habla de fuentes «multiline».

¿Cuál es la mejor tipografía rayada gratis?

Para algo que vas a vender, Monoton o Faster One, porque son de Google Fonts y gratis también para uso comercial. Para un proyecto personal desenfadado, Pinstripe Limo.

¿A qué tamaño se ven mejor las fuentes rayadas?

Grandes. En pantalla, por debajo de unos 40 px las rayas se juntan y se pierde el efecto. Úsalas en titulares y deja el texto largo para una fuente normal.

¿Puedo cambiar el color de las rayas por separado?

No dentro de la fuente: las rayas forman parte de la letra. Convierte el texto en contornos en Illustrator y colorea cada parte. En la web, el truco de CSS de arriba te deja elegir el color de las rayas.

¿Puedo usar estas fuentes en un logo que voy a vender?

Sí con las de Google Fonts y con las premium de Envato. Pinstripe Limo y Strip Line son solo para uso personal salvo que compres la licencia. Tienes los detalles en mi guía de licencias de fuentes.

Conclusión

Tienes tres caminos según lo que necesites:

• Gratis y sin líos de licencia: Monoton, Faster One o Bungee Inline, de Google Fonts.
• Proyecto de cliente con más personalidad: Shane o Echo Stripes, con licencia comercial en Envato.
• Tu propia fuente con rayas: el truco de Illustrator, Photoshop o CSS.

¡Que las disfrutes! Si te ha servido, compártela. Y para seguir con efectos parecidos, mira las fuentes con sombra, las tipografías eléctricas o todas las tipografías gratis del blog.

Este artículo incluye algunos enlaces de afiliado: si compras a través de ellos, recibo una pequeña comisión sin coste adicional para ti.