Las tipografías con sombra añaden profundidad a un titular sin tocar Photoshop ni CSS: la sombra viene dibujada en la propia letra. Aquí tienes 16 fuentes con sombra gratis, de estilo cartoon, serif clásico y 3D. Cuatro de ellas tienen licencia comercial, así que puedes usarlas en trabajos para clientes. Al final te enseño a hacer letras con sombra en CSS, Word, Canva y Photoshop con cualquier tipo de letra.
Aviso: las fuentes con sombra integrada solo brillan en titulares grandes (40px+). Por debajo, la sombra se confunde con el trazo y la legibilidad cae en picado. Para texto pequeño, mejor usar una fuente neutra y añadir text-shadow en CSS controlado.
Fuentes con sombra estilo cartoon/comic
Estas son las «fuentes con sombra 3D» más obvias: trazo grueso, sombra pronunciada, aire de cómic o cartoon. Funcionan en posters de eventos infantiles, branding lúdico, titulares de blog con tono divertido.
1
Orange Juice
Cartoon con sombra 3D pronunciada. La sombra es del mismo color que la letra pero desplazada, lo que da el efecto pop-art clásico. Ideal para titulares de blog con tono lúdico, posters de cumpleaños infantil y branding de productos para niños.
DaFont · Free uso personal · Verifica comercial · Descargar
2
Grutch Shaded
Letras con sombra 3D y estilo cartoon más estilizado que Orange Juice. Las sombras tienen profundidad y dan sensación de bloque sólido tridimensional. Buena opción para portadas, carteles de eventos y titulares con personalidad fuerte.
DaFont · Free uso personal · Verifica comercial · Descargar
3
Chira Shadow
Tiene la característica diferencial de la sombra invertida: en lugar de salir hacia abajo-derecha como es lo habitual, sale hacia arriba-izquierda. Aporta un efecto poco visto que puede destacar en proyectos creativos donde lo convencional aburre.
DaFont · Free uso personal · Verifica comercial · Descargar
4
The Main Event
Display sport-style con sombra pronunciada. Aire de letrero de evento deportivo, boxeo o lucha. Encaja en posters de torneos, branding deportivo y eventos con energía y dinamismo.
FontSpace · Free uso personal · Verifica comercial · Descargar
Fuentes con sombra clásicas y serif
Las clásicas con sombra tienen estilo retro de letrero antiguo de tienda, carteles vintage o tipografía art-decó. Funcionan muy bien en branding artesanal, packaging gourmet y editorial con aire nostálgico.
5
Thorne Shaded
Serif clásica con sombra integrada en el trazo (no como bloque externo). Da efecto de profundidad refinado, como si la letra estuviera labrada en metal o madera. Ideal para etiquetas de productos artesanales, branding gourmet y portadas editoriales.
DaFont · Free uso personal · Verifica comercial · Descargar
6
Shadowed Serif
Serif tradicional con sombra clásica desplazada. Más limpia y legible que Thorne Shaded, ideal para titulares editoriales largos donde necesitas el efecto pero también que se lea bien.
DaFont · Free uso personal · Verifica comercial · Descargar
7
Fraktur Shadowed
Blackletter (gótica/Fraktur) con sombra. Combina dos efectos en uno: el aire medieval del blackletter y la dimensión de la sombra. Funciona muy bien en branding de cervecerías artesanas, carteles vintage de festivales y proyectos editoriales con personalidad rotunda.
DaFont · Free uso personal · Verifica comercial · Descargar
Tip: Si trabajas en branding o packaging para clientes y necesitas fuentes con sombra premium con licencia comercial garantizada, en Envato Elements tienes miles de tipografías display con sombras y efectos 3D listas para usar.
Display creativas con sombra
Display más modernas: sans serif con sombra, sombras de puntos, sombras geométricas. Funcionan en branding contemporáneo, posters editoriales y diseños donde la sombra es solo un acento, no la protagonista.
8
Sans Serif Shaded
Sans serif moderna con sombra integrada limpia. Para cuando quieres el efecto profundidad sin abandonar la limpieza visual de una sans serif contemporánea. Encaja en branding tech, posters minimalistas y editorial moderno.
DaFont · Free uso personal · Verifica comercial · Descargar
9
Dotty Shadow
Sombra hecha con puntos en lugar de bloque sólido. Da efecto de pantalla LED antigua o pixelado retro. Funciona muy bien en branding tech-nostálgico, festivales de música electrónica y proyectos con estética retro-futurista.
DaFont · Free uso personal · Verifica comercial · Descargar
10
Geometric Shadow PW
Display geométrica con sombra estilizada en líneas paralelas. Efecto art-decó moderno. Encaja en branding premium, portadas de revistas y diseño editorial con aire sofisticado.
DaFont · Free uso personal · Verifica comercial · Descargar
11
Robot Shadow
Display futurista con sombra pronunciada. Aire de tipografía robótica/sci-fi. Ideal para posters de eventos tech, branding de videojuegos, gaming y proyectos futuristas.
DaFont · Free uso personal · Verifica comercial · Descargar
12
Shady Lane
Display con sombra estilizada y personalidad creativa. Buena para titulares de blog, portadas de revistas alternativas y branding indie con aire artesanal.
FontSpace · Free uso personal · Verifica comercial · Descargar
Tipografías con sombra con licencia comercial (Google Fonts)
Las 12 fuentes de arriba son gratis solo para uso personal. Si el diseño es para un cliente o para un producto que vas a vender, usa estas cuatro. Están en Google Fonts con licencia SIL Open Font License, que permite el uso comercial sin pagar nada. Además puedes cargarlas en tu web con una sola línea de código.
Bungee Shade
Mayúsculas gruesas con una sombra que les da efecto de volumen. Es de la familia Bungee, pensada para rótulos, así que funciona muy bien en carteles, cabeceras web y miniaturas de YouTube.
Londrina Shadow
Sans serif de trazo dibujado a mano con la letra en hueco y la sombra desplazada. Tiene un aire informal que encaja en carteles de eventos, packaging artesanal y redes sociales.
Rubik Doodle Shadow
Versión tipo garabato de la Rubik con sombra paralela. Es la más desenfadada de las cuatro: pensada para material infantil, cómics y marcas juveniles.
Nabla (letras con sombra 3D)
Letras con extrusión 3D isométrica y colores ya incluidos. Es una fuente de color: se ve perfecta en navegadores modernos, pero en programas de escritorio depende de que admitan fuentes de color. Pruébala antes de usarla fuera de la web.
¿Necesitas más estilos con licencia comercial? En Envato Elements tienes fuentes con sombra, efectos de texto 3D para Photoshop e Illustrator y mockups. Todo con licencia comercial incluida en la suscripción, así que no tienes que revisar la licencia fuente por fuente.
Bonus: crea sombra tipográfica con CSS
Una alternativa potente a las fuentes con sombra integrada es aplicar el efecto vía CSS con la propiedad text-shadow. Funciona sobre cualquier fuente, controlas el desplazamiento, el desenfoque y el color, y puedes activar/desactivar el efecto fácilmente. Esta es la base:
/* Sombra cartoon tipo Orange Juice */
.titulo-cartoon {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 4rem;
font-weight: 800;
color: #FF6B35;
text-shadow: 4px 4px 0 #1f2937;
}
/* Sombra clásica suave tipo serif */
.titulo-clasico {
font-family: 'Playfair Display', serif;
font-size: 3rem;
color: #1f2937;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
/* Sombra múltiple para efecto 3D pronunciado */
.titulo-3d {
font-family: 'Bebas Neue', sans-serif;
font-size: 5rem;
color: #2E5AAC;
text-shadow:
1px 1px 0 #1a4080,
2px 2px 0 #1a4080,
3px 3px 0 #1a4080,
4px 4px 0 #1a4080,
5px 5px 0 #1a4080;
}La ventaja de CSS: no necesitas instalar fuentes nuevas, controlas el efecto al milímetro y respetas la legibilidad porque puedes desactivar la sombra en móvil con un media query. La limitación: solo funciona en web (no en Word, Photoshop o Canva, donde sí necesitas la fuente con sombra integrada).
¿Te han servido estas sombras? En mi pack CSS tienes 8 estilos de sombra de texto más, junto a 34 estilos de botones, tarjetas y fondos. Te lo envío gratis al correo, con un catálogo visual para copiar cada estilo en un clic.
Cómo hacer letras con sombra en Word, Canva y Photoshop
Si no quieres instalar una fuente nueva, puedes añadir la sombra a cualquier tipo de letra en el programa que ya usas:
- Word: selecciona el texto y ve a Inicio → Efectos de texto y tipografía → Sombra. Elige una sombra exterior para titulares.
- Canva: selecciona el texto, pulsa Efectos y elige Sombra. Puedes ajustar desplazamiento, dirección, desenfoque y color.
- Photoshop: doble clic en la capa de texto → Sombra paralela. Para un efecto 3D sólido, pon el desenfoque a 0 y la distancia entre 4 y 8 px.
- Illustrator: Efecto → Estilizar → Sombra paralela. Si quieres una sombra editable, duplica el texto, desplázalo y cámbiale el color.
Para efectos más elaborados, tienes estos efectos de texto 3D para Photoshop y este tutorial de efectos de texto en Photoshop.
Cómo usar fuentes con sombra en proyectos reales
Poster de evento (cumpleaños, festival, deportivo)
Una fuente cartoon (Orange Juice o Grutch Shaded) en el título principal a 80-100px, fondo plano de color contrastante, sin más decoración. La sombra ya da toda la profundidad necesaria. Tipografía secundaria (fecha, hora, lugar) en una sans serif limpia.
Logo retro/vintage
Thorne Shaded o Shadowed Serif para el nombre de la marca. Paleta tierra (mostaza, granate, crema) para reforzar el aire vintage. La sombra evoca letreros antiguos sin necesidad de añadir filtros ni efectos de envejecido.
Branding gaming o sci-fi
Robot Shadow para el título de torneo o evento esports, paleta neón sobre fondo oscuro. La sombra acentúa el aire futurista. Para textos de cuerpo: una sans serif moderna (Plus Jakarta Sans) que mantenga la legibilidad.
Tarjeta web con efecto sombra controlado
En lugar de instalar una fuente con sombra, usa Plus Jakarta Sans o Manrope con text-shadow CSS. Tienes los snippets en el bonus de arriba. Activa la sombra solo en desktop (media query @media min-width: 768px) para que en móvil el texto se vea limpio.
Si buscas más opciones para titulares, aquí tienes una selección de letras para títulos que combinan bien con una fuente con sombra.
Tabla comparativa: qué fuente usar según tu proyecto
| Tipo de proyecto | Mi recomendación | Por qué |
|---|---|---|
| Poster cumpleaños infantil o evento lúdico | Orange Juice o Grutch Shaded | Cartoon clásico con sombra 3D pronunciada. |
| Branding deportivo o torneo | The Main Event | Display sport-style con energía deportiva. |
| Logo vintage o branding artesanal | Thorne Shaded | Serif clásica con sombra labrada, aire retro. |
| Editorial con cuerpo de texto legible | Shadowed Serif | Más limpia, mantiene legibilidad en titulares largos. |
| Cervecería artesana o brand medieval | Fraktur Shadowed | Combina blackletter y sombra, personalidad rotunda. |
| Branding tech-nostálgico o festival electrónica | Dotty Shadow | Sombra de puntos, efecto pantalla LED retro. |
| Branding premium o editorial sofisticado | Geometric Shadow PW | Art-decó moderno con líneas geométricas. |
| Gaming, esports o sci-fi | Robot Shadow | Display futurista con aire robótico. |
| Web con efecto sombra controlado | CSS text-shadow sobre fuente neutra | Sin instalar nada, control total del efecto. |
Preguntas frecuentes sobre fuentes con sombra
¿A qué tamaño se ven mejor las fuentes con sombra?
40px en adelante. Por debajo, la sombra integrada se mezcla con el trazo principal y la letra se vuelve borrosa o ilegible. Las fuentes con sombra de bloque sólido (Orange Juice, Grutch Shaded) necesitan al menos 50-60px para apreciar bien la sombra. Las que tienen sombra fina o de puntos (Sans Serif Shaded, Dotty Shadow) aguantan algo más bajo, 30-40px.
¿Mejor usar una fuente con sombra integrada o aplicar text-shadow en CSS?
Depende del contexto. Para web, casi siempre es mejor text-shadow en CSS: no instalas nada, controlas el efecto al detalle y puedes desactivar la sombra en móvil para mejor legibilidad. Para impresión, Word, Canva o cualquier contexto que no sea web, las fuentes con sombra integrada son la única opción práctica porque el efecto está dentro del archivo de fuente.
¿Puedo cambiar el color de la sombra en una fuente con sombra integrada?
No directamente: la sombra es parte del glyph de la fuente, no una capa separada. En Photoshop y Illustrator hay un truco: convierte el texto a vector (Convertir en forma o Crear contorno), separa las capas manualmente (sombra vs trazo principal) y colorea cada parte por separado. Es trabajoso pero da control total. Para textos cortos (1-3 palabras) merece la pena.
¿Puedo usar estas fuentes en proyectos comerciales?
Casi todas son «free para uso personal» en DaFont y FontSpace. Para comercial: lee la licencia individual en la página de descarga. Si necesitas seguridad legal para proyectos de cliente, usa text-shadow CSS sobre una fuente Google Fonts (Plus Jakarta Sans, Manrope, Playfair Display, Bebas Neue) que tiene licencia SIL OFL comercial sin restricciones.
¿Cómo combino una fuente con sombra con otra sin saturar el diseño?
Regla del 90/10: la fuente con sombra solo en el título principal (10% del texto), una sans serif limpia para todo el resto (90%). Si usas la fuente con sombra en subtítulos también, el diseño se satura visualmente. Tampoco combines dos fuentes con sombra distintas: pelea visualmente. Tienes más en el post sobre escala tipográfica en diseño web.
¿Por qué algunas sombras se ven cortadas o mal renderizadas?
Dos causas comunes: 1) Antialiasing desactivado (en Photoshop revisa el panel Carácter, asegúrate de Suavizado=Crisp o Smooth). 2) Tamaño demasiado pequeño donde el motor de renderizado no puede dibujar correctamente los detalles de la sombra. Si pasa, sube el tamaño 10-20px más y compara.
¿Qué tipografías con sombra puedo usar gratis en un proyecto comercial?
Bungee Shade, Londrina Shadow, Rubik Doodle Shadow y Nabla, las cuatro de Google Fonts. Las de DaFont y FontSpace de esta lista son gratis solo para uso personal: para un cliente tendrías que comprar la licencia al autor. Si tienes dudas, aquí te explico cómo funcionan las licencias de fuentes.
¿Cómo hago letras con sombra 3D?
Tienes tres caminos. El más rápido es una fuente con el 3D integrado, como Nabla o Bungee Shade. En web, apila varias capas de text-shadow desplazadas 1 px cada una, como en el ejemplo .titulo-3d de arriba. En Photoshop, usa una sombra paralela sin desenfoque o un efecto de texto 3D.
Conclusión
Tienes tres caminos según tu proyecto.
Para diseño impreso o offline (Word, Canva, Photoshop): instala una fuente con sombra integrada del listado según el estilo (Orange Juice para cartoon, Thorne Shaded para vintage, Robot Shadow para sci-fi).
Para diseño web moderno: mejor usa una Google Fonts neutra con text-shadow CSS (snippets en el bonus). Más ligero, más controlable, mejor para responsive.
Si dudas, empieza con CSS: es más rápido de probar y deshacer que instalar una fuente nueva.
Si te ha resultado útil, compártelo con alguien que esté empezando con tipografía. Disfrútalas!
