Un fondo que se adapta al texto: así le hace sitio un Mark

Un Mark de Gradiently es un fondo que se adapta al texto. Como se dibuja en directo y no se guarda como una imagen, sabe dónde están tus palabras y se reorganiza a su alrededor: la parte más tranquila y de mejor contraste del material pasa detrás del texto, los colores junto a las letras se oscurecen o se aclaran y el detalle recargado se suaviza. No se coloca nada encima. Sin cajas, sin sombras y sin desenfoque: conservas todo el fondo y las palabras se siguen leyendo.

Las formas habituales de hacer legible un texto y lo que cuestan

Pon un titular sobre un degradado vivo o una foto y parte de él desaparece. Los arreglos de siempre funcionan tapando el fondo, un resultado extraño cuando el fondo era justo la razón por la que elegiste ese diseño.

Cada arreglo tiene su lugar sobre una imagen plana, y el texto sobre un fondo degradado los repasa con honestidad. La diferencia con un Mark es que el fondo participa, en lugar de quedar tapado.

Lo que hace un Mark alrededor de tus palabras

1. 1

   Se asienta

   El material se desplaza para que tus palabras caigan sobre su parte más tranquila. La luz que habría quedado tras el titular se va al espacio libre de alrededor.

2. 2

   Cambia de tono

   Junto a las letras, la paleta se desliza hacia un color que contrasta con el texto: más oscuro tras tinta clara, más claro tras tinta oscura.

3. 3

   Se calma

   La deformación, la agitación y el detalle fino se relajan tras las palabras, así que una textura fuerte nunca corta un trazo fino.

4. 4

   Se curva en los bordes

   Los patrones se curvan un poco en el borde de las palabras en lugar de atravesarlas en línea recta.

La reacción trabaja codo con codo con la Tinta automática, que elige la tinta clara u oscura del Mark para cada línea. El fondo hace el sitio; la Tinta automática elige el color que lo llena.

Elegir con qué fuerza responde el fondo

Tú decides cuánto cede el Mark. El panel se llama Alrededor de tus palabras y empieza con cinco niveles.

Bajo los niveles hay cuatro mandos de ajuste fino: Tono define cuánto se asienta el material tras las palabras para dar contraste, Calma cuánto se relajan la deformación y la agitación, Curva cuánto se curva el patrón en el borde de las palabras y Alcance si se ciñe a cada letra o responde alrededor de todo el bloque de texto.

Por qué importa en cada tamaño

Una imagen de fondo plana se compone una sola vez. Recórtala para una story y el punto brillante puede caer justo tras el titular. Un Mark se dibuja de nuevo para cada formato, así que cuando un diseño pasa de publicación a story y a banner, las palabras se mueven y el Mark vuelve a hacer sitio dondequiera que caigan. Eso permite que un mismo estilo funcione en cada tamaño.

Una versión sencilla de la idea en CSS

En la web puedes tomar prestado el principio con un degradado simple: pon la parte más profunda y tranquila del fondo donde esté el texto y deja el color en los bordes. No seguirá a las palabras si cambia la maquetación, pero es mejor que una caja.

.hero {
  min-height: 70vh;
  display: grid;
  align-content: end;
  padding: 8vh 6vw;
  color: #fbf3ea;
  background: radial-gradient(
    ellipse 70% 45% at 35% 62%,
    #1b1030 0%,
    #2e1745 40%,
    #8a3f6e 75%,
    #f0a46f 100%
  );
}

Cuándo bajar la reacción

No todos los diseños piden la máxima legibilidad. Un fondo de pantalla de móvil no tiene palabras, así que Desactivado es lo correcto. Un lettering enorme, una sola palabra a lo ancho de un cartel, puede sostenerse solo y a menudo queda mejor con Invisible. Los tratamientos de lettering como Contorno o Relieve, que vemos en los efectos de lettering, ya llevan su propio contraste. Reserva los niveles fuertes para lo que los necesita: letra pequeña, detalles largos y todo lo que se lee con prisa.