# Cómo hacer legible el texto sobre fotos sin usar una caja [Canonical HTML page](https://gradiently.design/es/guide/readable-text-on-photos) Una caja sólida detrás del titular funciona, pero hace que cada publicación parezca un meme. Estas técnicas mantienen la foto entera y las palabras claras, con código para la web y ajustes para redes sociales. ## The short version - La forma más fiable de conseguir texto legible sobre fotos es colocar las palabras sobre la zona más tranquila y uniforme de la imagen. - Un velo degradado, una transición suave de transparente a oscuro en un borde de la foto, da contraste al texto sin una caja visible. - Teñir una foto en uno o dos colores reduce su contraste y su detalle, y eso facilita la lectura de cualquier texto encima. - La letra más gruesa y más grande aguanta sobre una foto recargada mucho mejor que la letra fina o pequeña. - El texto sobre fotos debe cumplir igualmente las pautas de contraste, aproximadamente 4,5 a 1 para texto pequeño y 3 a 1 para titulares grandes. Para conseguir **texto legible sobre fotos** sin meterlo en una caja, empieza por la colocación: encuentra o crea la zona más tranquila de la imagen y pon ahí las palabras. Si no basta, añade un **velo degradado**, una transición suave de transparente a oscuro a lo largo de un borde; después baja el contraste de la propia foto con un tinte y, por último, haz la letra más gruesa y más grande. Usadas en ese orden, estas técnicas mantienen la foto intacta y las palabras claras. Una caja es el último recurso, no el punto de partida. Esta página trata en concreto el enfoque sin caja. Para todas las técnicas, incluidas cajas, bandas y recortes, mira [texto sobre imagen](https://gradiently.design/es/guide/text-over-image). ## Por qué el texto se pierde sobre las fotos El texto necesita una diferencia de luminosidad entre las letras y lo que hay detrás. Una foto cambia de luminosidad constantemente: una camisa blanca junto a una puerta oscura, hojas contra el cielo. Allí donde una letra pasa de claro a oscuro, parte de ella desaparece. El detalle fino lo empeora, porque el ojo no logra separar el borde de la letra de la textura que tiene detrás. Una publicación vertical en la que el titular pasa sobre un fondo recargado e irregular y partes de las letras cuestan de leer El problema sobre un fondo de Mark: las palabras puestas directamente sobre una zona recargada pierden letras donde el fondo se aclara. La misma publicación vertical con una zona más tranquila y uniforme detrás del titular para que se lea cada palabra Las mismas palabras con una zona tranquila y uniforme detrás, el efecto que buscas con un buen encuadre. Sin caja, y se leen todas las letras. ## Seis formas de hacer legible el texto sobre fotos ### 1. Elige y encuadra pensando en el espacio vacío La mejor solución llega antes de escribir una sola palabra. Elige fotos con una zona vacía: cielo, una pared, una mesa, un fondo desenfocado. Luego encuadra para que esa zona quede donde va el titular. Una publicación vertical de 1080×1350 te deja sitio para bajar al sujeto y dejar tranquilo el tercio superior. Si puedes, dispara pensando en ello: da un paso atrás y deja espacio por encima del sujeto. [Texto sobre fondos recargados](https://gradiently.design/es/guide/type-on-busy-backgrounds) trata patrones y texturas que se comportan como fotos recargadas. ### 2. Añade un velo degradado Un velo es un degradado colocado sobre la foto, oscuro en el borde donde va el texto y que se desvanece hasta quedar totalmente transparente. Como se desvanece, el ojo lo lee como luz que cae y no como una forma. Limítalo al tercio de la imagen que contiene las palabras y usa un tono oscuro sacado de la propia foto en lugar de negro puro. - Velo inferior, negro cálido: `linear-gradient(0deg, #0c0a09d9 0%, #0c0a0973 30%, #0c0a0900 60%)` - Velo superior, azul marino: `linear-gradient(180deg, #0f172acc 0%, #0f172a00 45%)` - Velo lateral, para texto a la izquierda: `linear-gradient(90deg, #1c1917d9 0%, #1c19174d 40%, #1c191700 65%)` Tres velos solos. Sobre una foto, cada uno oscurece solo la zona de las palabras y se desvanece antes de llegar al sujeto. ### 3. Tiñe la foto Teñir una foto en uno o dos colores estrecha su rango de claros y oscuros, así que el texto encima lo tiene más fácil en todas partes. Un duotono oscuro, como de azul profundo a lila suave, funciona especialmente bien detrás de texto blanco; [efecto duotono](https://gradiently.design/es/guide/duotone-effect) muestra cómo crear uno. Teñir también hace que un conjunto de fotos dispares parezca de una misma marca. ### 4. Oscurece o aclara por zonas La mayoría de los editores de fotos permiten bajar la exposición o las altas luces en una zona. Bajar un paso un cielo luminoso, justo detrás del titular, suele bastar por sí solo y nadie que no haya visto el original lo notará. ### 5. Haz la letra más robusta La letra fina y pequeña es la primera en desaparecer. Usa un peso seminegrita o negrita, sube un tamaño y abre un poco el espaciado entre letras en las líneas pequeñas. Una sans gruesa a 110 px aguanta sobre una foto donde una serif fina a 70 px nunca lo hará. [Fuentes en negrita](https://gradiently.design/es/guide/bold-fonts) recoge tipografías fiables. ### 6. Pon la foto al lado de las palabras A veces la respuesta honesta es no superponer nada. Recorta la foto en un círculo, un arco o la mitad del formato y pon las palabras al lado, sobre un fondo liso o degradado. La foto queda entera y las palabras tienen un contraste perfecto. ## Qué técnica va mejor con cada foto | Foto | Empieza por | Después | | --- | --- | --- | | Cielo despejado o pared lisa | La colocación | No hace falta nada más | | Sujeto en el centro, bordes recargados | Encuadrar para liberar un borde | Velo en ese borde | | Recargada por todas partes (gente, mercado, follaje) | Tinte o duotono | Letra más gruesa | | Foto de producto clara y luminosa | Texto oscuro en la zona más clara | Bajar las altas luces por zonas | | Noche o interior oscuro | Texto blanco sobre la zona más oscura | Un velo ligero si hay luces detrás de las palabras | | Foto detallada que no puedes alterar | La foto al lado de las palabras | Un color compartido para unirlas | Empieza por la técnica menos visible y para en cuanto se lea la línea más pequeña. ## Cómo añadir un degradado sobre una imagen con CSS En una web, superpón el velo y la foto en una sola declaración `background`. El degradado va primero para quedar encima. Así el efecto vive en el CSS y se adapta a cualquier recorte que haga la maquetación. ```css .hero { min-height: 70vh; display: grid; align-items: end; padding: 4rem; color: #fafaf9; background: linear-gradient(0deg, rgb(12 10 9 / 0.85) 0%, rgb(12 10 9 / 0.4) 35%, rgb(12 10 9 / 0) 65%), url("/images/terrace.jpg") center / cover no-repeat; background-color: #1c1917; /* fallback while the image loads */ } ``` Un velo inferior sobre una foto de portada, con un color oscuro de reserva para que el texto se lea antes de que llegue la imagen. Comprueba el resultado con las pautas de contraste: aproximadamente 4,5 a 1 para texto normal y 3 a 1 para titulares grandes, tal como recoge la [guía de contraste de WebAIM](https://webaim.org/articles/contrast/). Mide el punto más claro detrás de las palabras, no la media. [Contraste de color y accesibilidad](https://gradiently.design/es/guide/color-contrast-accessibility) explica las cifras. ## Errores que evitar con el texto sobre fotos ### Evita - Resplandores o halos borrosos alrededor de cada letra - Una capa negra densa sobre toda la foto - Letra caligráfica fina sobre una escena detallada - Poner texto encima de una cara - Arreglar un mal encuadre con efectos cada vez más fuertes ### Mejor - Un velo suave solo en un borde - Un tinte que conserve el ambiente de la foto - Un peso robusto a un tamaño generoso - Las palabras en el espacio junto al sujeto - Volver a encuadrar o elegir otra foto Los halos y resplandores alrededor de las letras son el intento de rescate más habitual y el que parece más barato. Difuminan los bordes de las letras, justo lo contrario de lo que necesita la lectura. Si te tienta, lee antes [sombras de texto y mejores alternativas](https://gradiently.design/es/guide/text-shadow-alternatives). En Gradiently, las fotos se pueden teñir con los colores del Mark en mono, duotono o velado, y recortar en arcos, círculos y formas orgánicas para colocarlas junto a las palabras. En los diseños donde se ve el Mark, este lleva su zona más tranquila detrás del texto y la tinta automática elige texto claro u oscuro para cada línea, sin cajas, sombras ni desenfoques. ## FAQ ### ¿Cómo hago que el texto destaque sobre una foto recargada? Colócalo sobre la zona más tranquila, añade un velo degradado suave en ese borde, tiñe la foto para bajar su contraste y usa un peso más grueso y un tamaño mayor. ### ¿Qué es un velo o scrim en diseño? Un velo es un degradado superpuesto que oscurece o aclara una parte de la imagen y se desvanece hasta ser transparente, para que el texto que va ahí tenga contraste suficiente. ### ¿Debo usar una sombra de texto para que se lea sobre una foto? Un resplandor o un halo suave suele parecer barato y difumina las letras. La colocación, un velo o un tinte dan resultados más limpios. ### ¿Qué ratio de contraste necesita el texto sobre una foto? Apunta a unos 4,5 a 1 para texto normal y 3 a 1 para titulares grandes, medidos en el punto más claro detrás de las palabras.