Så gör du text läsbar på foton utan ruta bakom

För att göra text läsbar på foton utan att lägga den i en ruta börjar du med placeringen: hitta eller skapa bildens lugnaste yta och sätt orden där. Räcker inte det lägger du på en gradientskugga, en mjuk övergång från klart till mörkt längs en kant, sänker sedan fotots egen kontrast med en tonad färg och gör till sist texten tyngre och större. I den ordningen håller de fotot intakt och orden tydliga. En ruta är en sista utväg, inte en startpunkt.

Den här sidan handlar särskilt om metoden utan ruta. För alla tekniker, inklusive rutor, band och frilagda former, se text över bild.

Varför text försvinner på foton

Text behöver en skillnad i ljushet mellan bokstäverna och det som ligger bakom. Ett foto ändrar ljushet hela tiden: en vit skjorta intill en mörk dörröppning, löv mot himmel. Där en bokstav går från ljust till mörkt försvinner en del av den. Fina detaljer gör det värre, eftersom ögat inte kan skilja bokstavens kant från texturen bakom.

Sex sätt att göra text läsbar på foton

1. Välj och beskär för negativt utrymme

Den bästa lösningen sker innan du skrivit ett ord. Välj foton med en tom yta: himmel, en vägg, en bordsskiva, en suddig bakgrund. Beskär sedan så att ytan hamnar där rubriken ska stå. Ett stående inlägg i 1080×1350 ger dig utrymme att skjuta motivet nedåt och lämna den övre tredjedelen lugn. Fota för det om du kan: ta ett steg bakåt och lämna plats ovanför motivet. Text på rörig bakgrund tar upp mönster och texturer som beter sig som röriga foton.

2. Lägg på en gradientskugga

En gradientskugga är en gradient som läggs över fotot, mörk vid den kant där texten står och tonar ut till helt klart. Eftersom den tonar ut läser ögat den som ljus som avtar snarare än som en form. Håll den till den tredjedel av bilden som rymmer orden, och använd en mörk ton hämtad ur fotot i stället för ren svart.

3. Tona fotot

Att tona ett foto i en eller två färger smalnar av dess spann mellan ljust och mörkt, så texten ovanpå får det lättare överallt. En mörk duoton, till exempel djupblått till mjuk syren, fungerar särskilt bra bakom vit text; duotoneffekt visar hur du bygger en. Gradient får också en blandad samling foton att se ut att höra till ett och samma varumärke.

4. Mörka eller ljusa upp lokalt

De flesta bildredigerare låter dig sänka exponeringen eller högdagrarna i ett område. Att dra ner en ljus himmel ett steg, precis bakom rubriken, räcker ofta i sig och syns inte för den som inte sett originalet.

5. Gör texten kraftigare

Tunn, liten text är först att försvinna. Använd halvfet eller fet vikt, gå upp en storlek och öppna bokstavsavståndet något på små rader. Ett kraftigt sans på 110 px håller över ett foto där ett lätt serif på 70 px aldrig gör det. Feta typsnitt listar pålitliga typsnitt.

6. Lägg fotot bredvid orden

Ibland är det ärliga svaret att inte överlappa alls. Beskär fotot till en cirkel, en båge eller halva ytan och sätt orden på en enfärgad eller tonad grund bredvid. Fotot förblir helt och orden får perfekt kontrast.

Vilken teknik som passar vilket foto

Så lägger du en gradientöverlagring på en bild i CSS

På en webbplats lägger du skuggan och fotot i samma background-deklaration. Gradienten kommer först så att den hamnar överst. Då stannar effekten i CSS och anpassar sig till varje beskärning som layouten gö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 */
}

Kontrollera resultatet mot kontrastriktlinjerna: ungefär 4,5 till 1 för vanlig text och 3 till 1 för stora rubriker, så som det beskrivs i WebAIM:s kontrastguide. Testa den ljusaste punkten bakom orden, inte genomsnittet. Färgkontrast och tillgänglighet förklarar siffrorna.

Misstag att undvika med text på foton

Glorior och sken runt bokstäver är det vanligaste räddningsförsöket och det som ser billigast ut. De suddar ut bokstävernas kanter, vilket är raka motsatsen till vad läsning behöver. Är du frestad, läs textskuggor och bättre alternativ först.

I Gradiently kan foton tonas i Markens färger som mono, duoton eller en lavering, och beskäras till bågar, cirklar och blobbar som sitter bredvid orden. På designer där Marken lyser igenom flyttar den sin lugnaste yta bakom texten och automatisk textfärg väljer ljus eller mörk text för varje rad, utan rutor, skuggor eller oskärpa.