Tekstskygge: hvornår den hjælper, og de bedre alternativer

En tekstskygge hjælper i to situationer: som en bevidst stil, som regel en hård skygge forskudt nogle få pixels uden sløring, og som en tynd sikkerhedskant på undertekster over video i bevægelse. Som redning af ord, der ikke kan læses på et foto eller en gradient, gør den som regel skade: bløde skygger og gløder udvisker netop de kanter, øjet bruger til at genkende bogstaver, og de gør et design gammeldags med det samme. For læsbarhedens skyld skal du flytte ordene til et roligere område, tilføje en gradient-scrim, tone baggrunden eller vælge et federe snit.

Typer af tekstskyggeeffekter

Hvornår en tekstskygge hjælper

Som en hård, forskudt stil

En skygge uden sløring, forskudt nogle få procent af bogstavhøjden og sat i en kontrastfarve fra paletten, er en typografisk stil med en lang historie på plakater, emballage og skilte. Den virker selvsikker og en anelse nostalgisk. Behandl den som enhver effekt: én pr. design, få store ord, et tungt snit. Teksteffekter sammenligner den med de andre behandlinger. Retro-teksteffekter viser dens nære slægtninge, den dobbelte og sporet.

Bag undertekster på video

Undertekster sidder over optagelser, der skifter i hvert billede, så du kan ikke vælge et roligt område. En stram, mørk skygge eller en tynd kontur holder hvide undertekster læselige, når et lyst vindue passerer bag dem. Hold den tæt på bogstaverne: kort sløring og lidt eller ingen forskydning. Design af undertekster til video dækker størrelse og placering.

Hvornår en tekstskygge skader

Problemet med at bruge en skygge til at rette kontrast er, at den behandler symptomet. Baggrunden er stadig travl; du har bare tilføjet en tværet kant omkring bogstaverne. Bløde gløder er de værste syndere, fordi de spreder en sløret sky ud over hvert bogstav og blødgør den kant, der definerer dets form. På opslag på sociale medier komprimeres de også dårligt og bliver til plettede striber.

Bedre alternativer til en tekstskygge

1. 1

   Flyt ordene

   Find det roligste, mest ensartede område af baggrunden, og sæt teksten der. Det løser de fleste problemer, før de opstår.

2. 2

   Tilføj en gradient-scrim

   En blød overgang fra mørk til klar langs én kant giver kontrast uden en synlig form. Læselig tekst på fotos har koder til scrims.

3. 3

   Gør baggrunden roligere

   Ton et foto i en eller to farver, sænk højlysene, eller vælg en gradient med et mere stille område.

4. 4

   Styrk skriften

   Gå et snit og en størrelse op. En fed sans i en generøs størrelse behøver ingen hjælp på de fleste baggrunde.

5. 5

   Skift blækket

   Nogle gange slår mørk tekst på et lyst område hvid tekst med skygge. Vælg blækket linje for linje i stedet for til hele designet.

På gradienter bliver bunden ofte lysere eller mørkere hen over billedet, så én blækfarve passer ikke til alle linjer. Tekst på en gradient viser, hvordan du planlægger efter det, og skrift på travle baggrunde dækker mønstre og teksturer.

Tekstskygge i CSS

CSS-egenskaben text-shadow tager en vandret forskydning, en lodret forskydning, en valgfri sløringsradius og en farve. Adskil flere skygger med kommaer; den første på listen ligger øverst. Brug em-enheder, så skyggen skalerer med skriftstørrelsen. Den fulde reference findes 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 kontrasttjek sammenligner tekstfarven med baggrundsfarven og ignorerer skyggen. Hvis et værktøj markerer din tekst som lav kontrast, kan en skygge få den til at se bedre ud på din skærm, men den ændrer ikke målingen. Ret i stedet baggrunden eller blækket. Tekstskygge i CSS har flere opskrifter til nettet.

Sådan håndterer Gradiently læsbarhed

Gradiently er bygget på idéen om, at ord ikke skal reddes. En Mark ved, hvor ordene står: dens roligste område med bedst kontrast flytter sig bag teksten, farverne nær bogstaverne bliver dybere eller lysere, og travle detaljer falder til ro. Automatisk tekstfarve vælger derefter lys eller mørk skrift til hver linje ud fra Markens egen palet. Der er ingen bokse, skygger eller sløring involveret, og du vælger, hvor kraftigt Marken reagerer. Vil du have dybde som stil, giver bogstavbehandlingen Dybde dybe bogstaver i Markens farver, og Dobbelt tegner åbne bogstaver to gange, begge skarpe og uden sløring.