Sådan gør du tekst på billeder læselig uden en boks

For at gøre tekst på billeder læselig uden at sætte den i en boks starter du med placeringen: find eller skab billedets roligste område, og sæt ordene dér. Er det ikke nok, så tilføj et gradient-scrim, en blød overgang fra klar til mørk langs én kant, sænk derefter billedets egen kontrast med en toning, og gør til sidst teksten kraftigere og større. Brugt i den rækkefølge holder de billedet intakt og ordene klare. En boks er en sidste udvej, ikke et udgangspunkt.

Denne side handler specifikt om metoden uden boks. For alle teknikker, inklusive bokse, bånd og udskæringer, se tekst på billeder.

Hvorfor tekst forsvinder på billeder

Tekst kræver en forskel i lyshed mellem bogstaverne og det, der er bag dem. Et foto skifter lyshed hele tiden: en hvid skjorte ved siden af en mørk døråbning, blade mod himlen. Hvor et bogstav krydser fra lyst til mørkt, forsvinder en del af det. Fine detaljer gør det værre, fordi øjet ikke kan skille bogstavets kant fra teksturen bagved.

Seks måder at gøre tekst på billeder læselig

1. Vælg og beskær efter luft

Den bedste løsning sker, før du skriver et ord. Vælg billeder med et tomt område: himmel, en væg, en bordplade, en sløret baggrund. Beskær derefter, så det område ligger, hvor overskriften skal stå. Et stående opslag i 1080×1350 giver plads til at skubbe motivet ned og lade den øverste tredjedel være rolig. Fotografér med det for øje, hvis du kan: tag et skridt tilbage, og lad der være plads over motivet. Tekst på travle baggrunde dækker mønstre og teksturer, der opfører sig som travle billeder.

2. Tilføj et gradient-scrim

Et scrim er en gradient lagt over billedet, mørk ved kanten, hvor teksten står, og tonet ud til helt klar. Fordi den toner ud, opfatter øjet den som lys, der aftager, og ikke som en form. Hold den til den tredjedel af billedet, der rummer ordene, og brug en mørk tone hentet fra billedet i stedet for ren sort.

3. Tón billedet

At tone et billede i én eller to farver indsnævrer spændet mellem lyst og mørkt, så teksten ovenpå har lettere ved det overalt. En mørk duotone, for eksempel dyb blå til blød lilla, virker særlig godt bag hvid tekst; duotone-effekt viser, hvordan du laver en. Toning får også et sæt uensartede billeder til at se ud, som om de hører til ét brand.

4. Gør mørkere eller lysere lokalt

De fleste billedprogrammer lader dig sænke eksponering eller højlys i ét område. At trække en lys himmel ét blændetrin ned, lige bag overskriften, er ofte nok i sig selv og usynligt for alle, der ikke har set originalen.

5. Gør teksten mere robust

Tynd, lille tekst er den første, der forsvinder. Brug et halvfedt eller fedt snit, gå en størrelse op, og åbn spatieringen en smule på små linjer. En kraftig sans i 110 px holder over et foto, hvor en let serif i 70 px aldrig vil. Fede skrifttyper lister pålidelige skrifter.

6. Sæt billedet ved siden af ordene

Nogle gange er det ærlige svar slet ikke at lade dem overlappe. Beskær billedet til en cirkel, en bue eller halvdelen af rammen, og sæt ordene på en ren eller gradientbaggrund ved siden af. Billedet forbliver helt, og ordene får perfekt kontrast.

Hvilken teknik passer til hvilket billede

Sådan lægger du en gradient over et billede i CSS

På et website lægger du scrim og foto i lag i én background-erklæring. Gradienten kommer først, så den ligger øverst. Det holder effekten i CSS, så den tilpasser sig enhver beskæring, layoutet laver.

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

Tjek resultatet mod kontrastanbefalingerne: cirka 4,5:1 for normal tekst og 3:1 for store overskrifter, som beskrevet i WebAIMs guide til kontrast. Test det lyseste punkt bag ordene, ikke gennemsnittet. Farvekontrast og tilgængelighed forklarer tallene.

Fejl, du skal undgå med tekst på billeder

Glorier og glød om bogstaverne er det mest almindelige redningsforsøg og det, der ser billigst ud. De slører bogstavernes kanter, hvilket er det modsatte af, hvad læsning kræver. Bliver du fristet, så læs tekstskygger og bedre alternativer først.

I Gradiently kan billeder tones i din Marks farver som mono, duotone eller en lavering og beskæres til buer, cirkler og klatter, der står ved siden af ordene. På designs, hvor din Mark skinner igennem, flytter den sit roligste område bag teksten, og Automatisk tekstfarve vælger lys eller mørk tekst for hver linje, uden bokse, skygger eller sløring.