Slik gjør du tekst på bilder lesbar uten en boks

For å gjøre tekst på bilder lesbar uten en boks, start med plasseringen: finn eller lag det roligste området og sett ordene der. Er det ikke nok, legg på et gradientlag som toner mykt fra klart til mørkt langs én kant. Demp så bildets egen kontrast med toning, og gjør til slutt skriften kraftigere og større. I denne rekkefølgen bevarer teknikkene bildet og holder ordene tydelige. En boks er siste utvei, ikke utgangspunktet.

Denne siden handler spesielt om løsninger uten boks. For alle teknikker, også bokser, bånd og utskjæringer, se tekst over bilde.

Hvorfor tekst forsvinner på bilder

Tekst trenger lyshetsforskjell mellom bokstavene og det som ligger bak. Et foto endrer lyshet hele tiden: en hvit skjorte ved en mørk døråpning, blader mot himmel. Når en bokstav krysser fra lyst til mørkt, forsvinner en del av den. Fine detaljer gjør det verre, fordi øyet ikke skiller bokstavkanten fra teksturen bak.

Seks måter å gjøre tekst på bilder lesbar på

1. Velg og beskjær for tomrom

Den beste løsningen kommer før du skriver. Velg bilder med et tomt område: himmel, vegg, bordplate eller uskarp bakgrunn. Beskjær så området havner der overskriften skal stå. Et stående innlegg på 1080×1350 gir plass til å skyve motivet ned og holde øvre tredel rolig. Fotografer med dette i tankene hvis mulig: gå bakover og la det være plass over motivet. Skrift på urolige bakgrunner dekker mønstre og teksturer som oppfører seg som urolige bilder.

2. Legg på et gradientlag

Et slikt lag ligger over bildet, mørkt ved kanten der teksten står og tonet ut til helt gjennomsiktig. Fordi det tones ut, oppfattes det som lys som avtar fremfor en form. Begrens det til tredelen med ordene, og bruk en mørk tone fra bildet fremfor rent svart.

3. Ton bildet

Toning i én eller to farger begrenser spennet mellom lyst og mørkt, så tekst over blir lettere å lese overalt. En mørk duotone, som dyp blå til myk lilla, virker særlig godt bak hvit skrift. Duotoneeffekt viser hvordan. Toning får også ulike bilder til å høre til samme merkevare.

4. Mørkne eller lysne lokalt

De fleste bilderedigerere lar deg senke eksponering eller høylys i ett område. Å dempe en lys himmel ett trinn rett bak overskriften er ofte nok alene og usynlig for dem som ikke har sett originalen.

5. Gjør skriften stødigere

Tynn, liten skrift forsvinner først. Bruk halvfet eller fet vekt, gå opp en størrelse og øk bokstavavstanden litt på små linjer. En kraftig groteskskrift på 110 px holder på et bilde der en lett seriff på 70 px aldri vil gjøre det. Fete skrifter har pålitelige valg.

6. Plasser bildet ved siden av ordene

Noen ganger er det ærligste svaret å unngå overlapp. Beskjær bildet til sirkel, bue eller halve rammen og sett ordene på enkel bunn eller gradient ved siden av. Bildet bevares og teksten får perfekt kontrast.

Hvilken teknikk passer til hvilket bilde?

Legge et gradientlag over et bilde i CSS

På en nettside legger du gradientlaget og bildet i én background-deklarasjon. Gradienten kommer først så den ligger øverst. Effekten blir i CSS og tilpasser seg alle beskjæringer oppsettet gjør.

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

Sjekk mot kontrastkravene: omtrent 4,5 til 1 for vanlig tekst og 3 til 1 for store overskrifter, som beskrevet i WebAIMs kontrastguide. Test det lyseste punktet bak ordene, ikke gjennomsnittet. Fargekontrast og tilgjengelighet forklarer tallene.

Feil å unngå med tekst på bilder

Glorier og glød rundt bokstaver er det vanligste redningsforsøket og det som ser billigst ut. De gjør bokstavkantene uskarpe, det motsatte av det lesing trenger. Frister det, les tekstskygger og bedre alternativer først.

I Gradiently kan bilder tones i Markens farger som mono, duotone eller lavering og beskjæres til buer, sirkler og organiske former ved siden av ordene. Der Marken vises gjennom, flytter den sitt roligste område bak teksten. Auto-tekstfarge velger lyst eller mørkt per linje uten bokser, skygger eller uskarphet.