Text på stökiga bakgrunder utan ruta bakom

Att göra text på stökig bakgrund läsbar handlar om två saker: vad som ligger direkt bakom bokstäverna, och vilken färg bokstäverna har. De vanliga lösningarna, en ruta, en skugga eller en oskärpa, ändrar vad som ligger bakom bokstäverna genom att täcka det. De bättre lösningarna lägger orden där bakgrunden redan är lugn, väljer bläck för varje rad och, där verktyget tillåter det, låter bakgrunden ge plats i stället för att lappas över.

Varför stökiga bakgrunder och text bråkar

Läsning bygger på kontrasten mellan varje bokstav och det som omger den. På en enfärgad yta är kontrasten densamma överallt. På ett foto, ett mönster eller en livlig gradient ändras den hela tiden: en bokstav ligger på en högdager, nästa i en skugga, och ordet faller sönder. Detaljer gör det värre, eftersom bakgrundens egna kanter och former liknar bokstävernas streck en aning, och ögat måste skilja dem åt.

Därför är kontrastriktlinjer, som förhållandena i färgkontrast, svåra att tillämpa på stökiga bakgrunder: det finns ingen enskild bakgrundsfärg att mäta mot. Det ärliga testet är den värsta platsen, det ljusaste området bakom ljus text eller det mörkaste bakom mörk text.

De vanliga lösningarna, och vad var och en kostar

Varje standardlösning fungerar genom att ändra vad som ligger direkt bakom bokstäverna. De är alla legitima, och alla tar något ifrån den bakgrund du valt.

Om du ändå använder en, använd den försiktigt. En toning som tonar ut över en stor yta märks mindre än en ruta, och en mjuk, bred skugga ser mindre daterad ut än en hård. Här är en återhållsam version för webben:

.hero {
  position: relative;
}

/* A soft scrim: dark at the bottom, where the text sits, gone by the middle. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.2) 35%, rgb(0 0 0 / 0) 60%);
  pointer-events: none;
}

.hero h1 {
  position: relative;
  z-index: 1;
  color: #fff;
  /* A wide, faint shadow reads as depth, not as an outline. */
  text-shadow: 0 1px 24px rgb(0 0 0 / 0.35);
}

Bättre: lägg orden där bakgrunden är lugn

De flesta stökiga bakgrunder har en tystare del: en bit himmel, en mjuk pöl av färg, ett område ur fokus. Att flytta texten dit, eller beskära så att den delen hamnar där texten ska ligga, löser problemet utan att täcka något. När du väljer eller gör en bakgrund, leta efter en med en lugn yta där dina ord brukar ligga.

Samma idé gäller foton, där beskärning, oskärpa och duoton alla kan skapa lugn; text över bild går igenom sju tekniker. På gradienter är den lugna zonen oftast där färgen ändras långsammast; text på en gradient visar hur du hittar den.

Välj bläck för varje rad

En bakgrund som går från ljus till mörk går inte att betjäna med en enda bläckfärg. Vit text syns på den mörka halvan och försvinner på den ljusa. I stället för att tvinga in en platta bakom väljer du bläck per rad: ljust bläck där bakgrunden bakom raden är mörk, mörkt bläck där den är ljus. Ta båda bläcken ur bakgrundens egen palett, en djup ton och en blek, så att de känns som en del av designen och inte som påklistrade.

Låt bakgrunden röra sig, inte orden

Den tystaste lösningen av alla är en bakgrund som vet var orden finns. Så beter sig en Gradiently Mark: i stället för att täckas över ordnar den om sig. Hela materialet glider så att dess lugnaste, mest kontrastrika del hamnar bakom texten; nära bokstäverna fördjupas färgerna under ljus text och lyfts under mörk text; stökiga åsar mjuknar. Inget av det är en form du kan peka på. Det läses som designen, för det är designen.

Den andra halvan är bläck. Ställ in texten på Auto-bläck så väljer varje rad det ljusa eller mörka bläck som läses bäst mot det som faktiskt ligger bakom, ur ett par hämtat från Markens egen palett. Flytta en rubrik från ett ljust område till ett mörkt och den växlar stilla. Du bestämmer hur starkt bakgrunden svarar: knappt märkbart, balanserat eller en tydlig scen för en rubrik som måste sitta.

Den bästa lösningen för läsbarhet är den som ingen märker.

En checklista för text på stökiga bakgrunder

1. 1

   Hitta den lugna ytan först

   Placera eller beskär så att orden ligger över bakgrundens jämnaste del.

2. 2

   Kontrollera den värsta platsen

   Testa kontrasten vid den ljusaste punkten bakom ljus text eller den mörkaste bakom mörk text, inte genomsnittet.

3. 3

   Välj bläck per rad

   Ljust över mörkt, mörkt över ljust, båda hämtade ur bakgrundens palett.

4. 4

   Använd vikt och storlek

   Tyngre, större text klarar stökigare bakgrunder. Hårfina snitt gör det inte. Typsnitt för sociala medier har snitt som håller.

5. 5

   Lappa bara som en sista utväg

   Om du måste, använd den mildaste lösningen: en mjuk toning före en ruta, en bred svag skugga före en hård.