Tekstskygge: når den hjelper og bedre alternativer

En tekstskygge hjelper i to situasjoner: som bevisst stil, vanligvis en hard skygge forskjøvet noen piksler uten uskarphet, og som en tynn sikkerhetskant på undertekster over bevegelig video. Som redning for ord som ikke kan leses på foto eller gradient, skader den vanligvis: myke skygger og glød visker ut kantene øyet bruker for å kjenne igjen bokstaver og daterer designet straks. For lesbarhet, flytt ordene til et roligere område, legg til et gradientslør, ton bakgrunnen eller velg tyngre skrift.

Typer tekstskygge

Når tekstskygge hjelper

Som hard, forskjøvet stil

En skygge uten uskarphet, forskjøvet noen prosent av bokstavhøyden i en kontrastfarge fra paletten, er en typografisk stil med lang historie på plakater, emballasje og skilt. Den virker selvsikker og litt nostalgisk. Behandle den som enhver effekt: én per design, noen få store ord og tung skrift. Teksteffekter sammenligner med andre behandlinger. Retro teksteffekter viser slektningene Dobbel og Spor.

Bak undertekster på video

Undertekster ligger over opptak som endres i hvert bilde, så du kan ikke velge et rolig område. En tett, mørk skygge eller tynn kontur holder hvite undertekster lesbare når et lyst vindu passerer bak. Hold den nær bokstavene: kort uskarphet og liten eller ingen forskyvning. Design av videoundertekster dekker størrelse og plassering.

Når tekstskygge skader

Problemet med skygge som kontrastløsning er at den behandler symptomet. Bakgrunnen er fortsatt travel, du har bare lagt en flekk rundt bokstavene. Myk glød er verst, fordi den sprer en uskarp sky utenfor hver bokstav og myker opp kanten som definerer formen. I sosiale innlegg komprimeres den også dårlig og blir flekkete bånd.

Bedre alternativer til tekstskygge

1. 1

   Flytt ordene

   Finn det roligste, jevneste området i bakgrunnen og legg teksten der. Det løser de fleste problemer før de begynner.

2. 2

   Legg til et gradientslør

   En myk overgang fra mørkt til gjennomsiktig langs én kant gir kontrast uten synlig form. Lesbar tekst på foto gir koder.

3. 3

   Ro bakgrunnen

   Ton et bilde i én eller to farger, senk høylysene eller velg en gradient med et roligere område.

4. 4

   Styrk skriften

   Gå opp én vekt og størrelse. En romslig, fet grotesk trenger ikke hjelp på de fleste bakgrunner.

5. 5

   Bytt tekstfarge

   Noen ganger slår mørk tekst på lyst område hvit tekst med skygge. Velg tekstfarge per linje fremfor for hele designet.

Særlig på gradienter blir bakgrunnen ofte lysere eller mørkere gjennom bildet, så én tekstfarge passer ikke alle linjer. Tekst på en gradient viser planleggingen, og skrift på travle bakgrunner dekker mønstre og teksturer.

Tekstskygge i CSS

CSS-egenskapen text-shadow tar vannrett forskyvning, loddrett forskyvning, valgfri uskarphetsradius og farge. Skill flere skygger med komma. Den første ligger øverst. Bruk em-enheter så skyggen skaleres med skriftstørrelsen. Hele referansen finnes på MDN.

/* Hard offset style: no blur, colour from the palette */
.headline-offset {
  color: #fff7ed;
  text-shadow: 0.06em 0.06em 0 #9a3412;
}

/* Tight caption edge for text over video */
.caption {
  color: #ffffff;
  text-shadow: 0 0 0.12em rgb(0 0 0 / 0.9), 0 0.04em 0.08em rgb(0 0 0 / 0.8);
}

/* Preferred fix for readability: a scrim, not a shadow */
.hero {
  background:
    linear-gradient(0deg, rgb(15 23 42 / 0.8) 0%, rgb(15 23 42 / 0) 55%),
    url("/images/hero.jpg") center / cover;
}

Automatiske kontrastverktøy sammenligner tekstfargen med bakgrunnsfargen og ignorerer skyggen. Hvis verktøyet melder lav kontrast, kan skygge få teksten til å se bedre ut på skjermen, men målingen endres ikke. Rett bakgrunn eller tekstfarge i stedet. CSS-tekstskygge har flere nettoppskrifter.

Slik håndterer Gradiently lesbarhet

Gradiently ble bygd på ideen om at ord ikke skal trenge redning. En Mark vet hvor ordene står: det roligste området med best kontrast flytter seg bak teksten, farger nær bokstavene blir dypere eller lysere, og travle detaljer roes ned. Auto-tekstfarge velger deretter lys eller mørk skrift for hver linje fra Markens palett. Ingen bokser, skygger eller uskarphet er involvert, og du velger reaksjonsstyrken. Vil du ha dybde som stil, gir bokstavbehandlingen Uttrekk dype bokstaver i Markens farger, mens Dobbel tegner åpne bokstaver to ganger. Begge er skarpe og uten uskarphet.