Bakgrunn som tilpasses tekst: slik gir en Mark plass

En Mark fra Gradiently er en bakgrunn som tilpasses tekst. Fordi den tegnes live fremfor å lagres som et bilde, vet den hvor ordene står og ordner seg rundt dem: materialets roligste del med best kontrast flytter seg bak teksten, farger nær bokstavene blir dypere eller lysere, og travle detaljer roes ned. Ingenting legges oppå. Ingen bokser, skygger eller uskarphet, så du beholder hele bakgrunnen og ordene kan fortsatt leses.

Vanlige måter å gjøre tekst lesbar på, og hva de koster

Legg en overskrift på en livlig gradient eller et fotografi, så forsvinner deler av den. Standardløsningene dekker alle til bakgrunnen. Det er et merkelig resultat når bakgrunnen var grunnen til at du valgte designet.

Hver løsning har sin plass på et flatt bilde, og tekst på gradientbakgrunn dekker dem ærlig. Forskjellen med en Mark er at bakgrunnen deltar fremfor å maskeres.

Hva en Mark gjør rundt ordene

1. 1

   Den faller til ro

   Materialet flytter seg så ordene havner på den roligste delen. Lys som ville ligget bak overskriften, driver til den åpne plassen rundt.

2. 2

   Den endrer tone

   Nær bokstavene glir paletten mot en farge som gir kontrast til skriften: dypere bak lys tekst, lysere bak mørk.

3. 3

   Den roer seg

   Forvrengning, uro og fine detaljer dempes bak ordene, så en sterk tekstur aldri kutter en tynn strek.

4. 4

   Den bøyer seg rundt kantene

   Mønstre bøyer seg litt langs ordenes kanter fremfor å gå rett gjennom dem.

Reaksjonen virker sammen med Auto-tekstfarge, som velger Markens lyse eller mørke tekstfarge for hver linje. Bakgrunnen gir plass. Auto-tekstfarge velger riktig farge til plassen.

Velg hvor sterkt bakgrunnen reagerer

Du bestemmer hvor mye Marken gir etter. Panelet heter Rundt ordene dine og starter med fem nivåer.

Under nivåene er fire kontroller for finjustering: Tone bestemmer hvor mye materialet dempes bak ordene for kontrast. Ro bestemmer hvor mye forvrengning og uro dempes. Bøy bestemmer hvor mye mønsteret bøyes langs ordkantene. Rekkevidde bestemmer om det følger hver bokstav tett eller reagerer rundt hele tekstblokken.

Hvorfor det betyr noe i alle størrelser

Et flatt bakgrunnsbilde settes opp én gang. Beskjær det til story, og lysflekken kan havne rett bak overskriften. En Mark tegnes på nytt for hvert format. Når designet går fra innlegg til story til banner, flytter ordene seg også, og Marken gir plass igjen der de havner. Slik kan ett uttrykk fungere i alle størrelser.

En enkel versjon av ideen i CSS

På nettet kan du låne prinsippet med en vanlig gradient: legg den dypeste, roligste delen der teksten står og hold fargen ved kantene. Den følger ikke ordene når oppsettet endres, men slår en boks.

.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%
  );
}

Når du bør dempe reaksjonen

Ikke alle design trenger maksimal lesbarhet. En telefonbakgrunn har ingen ord, så Av er riktig. Store blikkfangsbokstaver, ett ord over en plakat, kan stå alene og ser ofte bedre ut med Usynlig. Bokstavbehandlinger som Kontur eller Uttrekk, dekket i bokstaveffekter, har allerede egen kontrast. Spar de sterke nivåene til oppgaver som trenger dem: liten skrift, lange detaljer og alt som leses raskt.