En baggrund, der tilpasser sig teksten: sådan giver en Mark plads

En Mark fra Gradiently er en baggrund, der tilpasser sig teksten. Fordi den tegnes live i stedet for at være gemt som et billede, ved den, hvor dine ord står, og den omarrangerer sig omkring dem: den roligste del af materialet med bedst kontrast flytter sig bag teksten, farverne nær bogstaverne bliver dybere eller lysere, og travle detaljer falder til ro. Intet lægges ovenpå. Der er ingen bokse, ingen skygger og ingen sløring, så du beholder hele baggrunden, og ordene kan stadig læses.

De sædvanlige måder at gøre tekst læselig på, og hvad de koster

Sæt en overskrift på en livlig gradient eller et foto, og en del af den forsvinder. Standardløsningerne virker alle ved at dække baggrunden til, hvilket er et underligt resultat, når baggrunden var grunden til, at du valgte designet.

Hver løsning har sin plads på et fladt billede, og tekst på en gradientbaggrund gennemgår dem ærligt. Forskellen med en Mark er, at baggrunden deltager i stedet for at blive maskeret.

Hvad en Mark gør omkring dine ord

1. 1

   Den lægger sig til rette

   Materialet flytter sig, så dine ord lander på dets roligste del. Lys, der ville have siddet bag overskriften, driver ud i den åbne plads omkring den.

2. 2

   Den skifter tone

   Tæt på bogstaverne glider paletten mod en farve, der står i kontrast til teksten: dybere bag lyst blæk, lysere bag mørkt blæk.

3. 3

   Den falder til ro

   Vridning, uro og fine detaljer dæmpes bag ordene, så en stærk tekstur aldrig skærer igennem en tynd streg.

4. 4

   Den bøjer om kanterne

   Mønstrene krummer en smule ved kanten af ordene i stedet for at løbe lige igennem dem.

Reaktionen arbejder hånd i hånd med Automatisk tekstfarve, som vælger Markens lyse eller mørke blæk til hver linje. Baggrunden skaber pladsen; Automatisk tekstfarve vælger den rigtige farve til at fylde den.

Sådan vælger du, hvor kraftigt baggrunden reagerer

Du bestemmer, hvor meget Marken viger. Panelet til det hedder Omkring dine ord, og det starter med fem niveauer.

Under niveauerne er der fire drejeknapper til finjustering: Tone bestemmer, hvor meget materialet lægger sig bag ordene for kontrast, Ro hvor meget vridning og uro dæmpes, Bøjning hvor meget mønsteret krummer ved kanten af ordene, og Rækkevidde om det slutter tæt om hvert bogstav eller reagerer omkring hele tekstblokken.

Hvorfor det betyder noget i alle størrelser

Et fladt baggrundsbillede bliver sat op én gang. Beskær det til en story, og det lyse punkt kan lande lige bag overskriften. En Mark tegnes på ny til hvert format, så når et design flytter fra et opslag til en story til et banner, flytter ordene også med, og Marken giver plads igen, uanset hvor de lander. Det er det, der får ét look til at virke i alle størrelser.

En enkel version af idéen i CSS

På nettet kan du låne princippet med en almindelig gradient: læg den dybeste, roligste del af baggrunden der, hvor din tekst står, og hold farven ude ved kanterne. Den følger ikke ordene, når layoutet ændrer sig, men den 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%
  );
}

Hvornår du skal skrue ned for reaktionen

Ikke alle designs ønsker maksimal læsbarhed. Et baggrundsbillede til telefonen har slet ingen ord, så Fra er det rigtige. Kæmpestore displaybogstaver, et enkelt ord hen over en plakat, kan stå for sig selv og ser ofte bedre ud med Usynlig. Bogstavbehandlinger som Kontur eller Dybde, som gennemgås i bogstaveffekter, har allerede deres egen kontrast. Gem de kraftige niveauer til de opgaver, der kræver dem: småt tryk, lange detaljer og alt, der læses i en fart.