Textskugga: när den hjälper och bättre alternativ

En textskugga hjälper i två lägen: som medveten stil, oftast en hård skugga förskjuten några pixlar utan oskärpa, och som tunn säkerhetskant på undertexter över rörlig video. Som räddning för ord som inte går att läsa på ett foto eller en gradient gör den oftast mer skada än nytta: mjuka skuggor och glöd suddar ut just de kanter ögat använder för att känna igen bokstäver, och de datar en design direkt. För läsbarhet: flytta orden till en lugnare yta, lägg på ett gradientlager, tona bakgrunden eller välj en tyngre vikt.

Typer av textskuggeffekter

När en textskugga hjälper

Som hård, förskjuten stil

En skugga utan oskärpa, förskjuten några procent av bokstavshöjden och satt i en kontrasterande färg ur paletten, är en typografisk stil med lång historia på affischer, förpackningar och skyltar. Den läses som självsäker och lite nostalgisk. Behandla den som vilken effekt som helst: en per design, några stora ord, ett kraftigt typsnitt. Texteffekter jämför den med de andra behandlingarna. Retro-texteffekter visar dess nära släktingar, dubbeln och spåret.

Bakom undertexter på video

Undertexter ligger över material som ändras varje bildruta, så du kan inte välja en lugn yta. En tät, mörk skugga eller en tunn kontur gör att vita undertexter går att läsa när ett ljust fönster passerar bakom dem. Håll den nära bokstäverna: kort oskärpa och liten eller ingen förskjutning. Design av videoundertexter tar upp storlek och placering.

När en textskugga stjälper

Problemet med att använda en skugga för att lösa kontrast är att den behandlar symptomet. Bakgrunden är fortfarande stökig; du har bara lagt en smet runt bokstäverna. Mjuka glöd är värst, eftersom de sprider ett suddigt moln utanför varje bokstav och mjukar upp kanten som definierar formen. I sociala inlägg komprimeras de dessutom dåligt och blir fläckiga band.

Bättre alternativ till en textskugga

1. 1

   Flytta orden

   Hitta bakgrundens lugnaste, jämnaste yta och lägg texten där. Det löser de flesta problem innan de uppstår.

2. 2

   Lägg på ett gradientlager

   En mjuk övertoning från mörkt till genomskinligt längs ena kanten ger kontrast utan synlig form. Läsbar text på foton har koder för gradientlager.

3. 3

   Lugna bakgrunden

   Tona ett foto i en eller två färger, sänk dess högdagrar eller välj en gradient med en lugnare yta.

4. 4

   Stärk typen

   Gå upp en vikt och en storlek. En fet sans i generös storlek behöver ingen hjälp på de flesta bakgrunder.

5. 5

   Byt bläck

   Ibland slår mörk text på en ljus yta vit text med skugga. Välj bläck per rad i stället för för hela designen.

På gradienter blir underlaget ofta ljusare eller mörkare över ytan, så en enda bläckfärg passar inte varje rad. Text på en gradient visar hur du planerar för det, och text på stökiga bakgrunder tar upp mönster och texturer.

Textskugga i CSS

CSS-egenskapen text-shadow tar en horisontell förskjutning, en vertikal förskjutning, en valfri oskärperadie och en färg. Skilj flera skuggor åt med kommatecken; den först angivna ligger överst. Använd em-enheter så att skuggan skalar med teckenstorleken. Hela referensen finns 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;
}

Automatiska kontrastkontroller jämför textfärgen med bakgrundsfärgen och ignorerar skuggan. Om ett verktyg flaggar din text för låg kontrast kan en skugga få den att se bättre ut på din skärm men ändrar inte mätvärdet. Åtgärda bakgrunden eller bläcket i stället. CSS-textskugga har fler recept för webben.

Så hanterar Gradiently läsbarhet

Gradiently bygger på idén att ord inte ska behöva räddas. En Mark vet var orden finns: dess lugnaste, mest kontrastrika yta flyttar sig bakom texten, färger nära bokstäverna fördjupas eller ljusnar och stökiga detaljer dämpas. Auto-bläck väljer sedan ljus eller mörk text för varje rad ur Markens egen palett. Inga rutor, skuggor eller oskärpa är inblandade, och du väljer hur kraftigt Marken svarar. Vill du ha djup som stil ger letteringeffekten Extrudering djupa bokstäver i Markens färger och Dubbel ritar öppna bokstäver två gånger, båda skarpa och fria från oskärpa.