Cómo hacer legible el texto sobre fotos sin usar una caja

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.

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.

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 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.

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 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 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

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.

.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 */
}

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. Mide el punto más claro detrás de las palabras, no la media. Contraste de color y accesibilidad explica las cifras.

Errores que evitar con el texto sobre fotos

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.

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.