Kortversionen
- Texteffekter är behandlingar som läggs på bokstäver, till exempel konturer, innerlinjer, extrudering, förskjutna ekon, tryckförskjutning och sken.
- Effekter fungerar bäst på några få stora ord i tung vikt, där de ger karaktär utan att göra texten svårare att läsa.
- Effekter ser gammalmodiga ut när de läggs i full styrka på varje rad, staplas på varandra eller används för att rädda svag typografi.
- Konturtext kräver ett tjockt, enkelt typsnitt och en lugn bakgrund, eftersom bokstäverna förlorar sin solida form.
- Välj en effekt per design och hämta dess färger från bakgrundens palett, så ser den designad ut i stället för pålagd.
På den här sidan
Texteffekter är behandlingar som läggs på bokstäver, till exempel en kontur, en innerlinje, en 3D-extrudering, ett förskjutet eko, en tryckförskjutning eller ett mjukt sken. De ser inte gammalmodiga ut när tre regler håller: använd en effekt per design, lägg den på några få stora ord i tung vikt och hämta färgerna från bakgrunden i stället för från en förinställning. Effekter fallerar när de staplas, sprids över varje rad eller används för att rädda typografi som inte fungerade.
Den här guiden går igenom de viktigaste effektfamiljerna, när var och en passar ett budskap, hur du håller dem läsbara och hur du bygger några i CSS. Har du inte valt typsnitt än, börja med displaytypsnitt, eftersom de flesta effekter kräver stora, robusta bokstäver för att fungera.
De viktigaste sorterna av texteffekter
De flesta bokstavsbehandlingar hör till en handfull familjer. Var och en har sina egna associationer, vilket är varför att välja en i själva verket är att välja ett tonläge.
| Effekt | Så ser den ut | Tonen den sätter | Risk för läsbarheten |
|---|---|---|---|
| Kontur | Bokstäver ritade som enbart linjer | Luftig, modern, redaktionell | Hög på stökiga bakgrunder |
| Innerlinje | En tunn linje inuti varje streck | Vintageskyltar, hantverk, sport | Låg i stora storlekar |
| Extrudering | Bokstäver med 3D-djup | Retro, lekfull, högljudd | Måttlig |
| Dubbel eller eko | En förskjuten kopia eller ett spår bakom | Rörelse, musik, energi | Måttlig |
| Utskuren | Bokstäver skurna i bitar och förskjutna | Spänning, mode, teknik | Måttlig |
| Riso | Förskjutna färglager, tryckstruktur | Indietryck, zines, värme | Låg om förskjutningen är liten |
| Halo eller sken | Mjukt ljus kring bokstäverna | Natt, neon, lugn lyx | Låg på mörka bakgrunder |
När en texteffekt hjälper och när den stjälper
En effekt hjälper när den bär en mening som orden inte kan bära själva. Ett eko bakom Högt får det att vibrera. En extrudering på en retromenytavla placerar den i tiden. Ett sken på en sen kvällsaffisch antyder rummet. När effekten inte säger något blir den dekoration, och dekoration blir snabbt daterad.
Ett stort ord är där en effekt förtjänar sin plats: det finns lite att läsa och mycket att känna.
På en evenemangsaffisch hör effekten bara hemma på titeln. Datum och detaljer förblir enkla.
Undvik
- En effekt på både rubriken och brödtexten
- Kontur plus skugga plus sken på ett ord
- Standardfärger, som en svart skugga på allt
- Tunna eller lätta typsnitt under kraftiga effekter
- Effekter som får svag text att se spännande ut
Gör så
- En effekt, på de få största orden
- En behandling per design, använd med övertygelse
- Effektfärger hämtade från bakgrundens palett
- Tunga, enkla bokstavsformer som klarar effekten
- Text som fungerar utan effekt, och sedan en effekt som ger ton
Så gör du konturtext läsbar
Konturtext är den effekt som oftast misslyckas, eftersom den tar bort den solida formen som gör bokstäver lätta att känna igen. Använd den på en tung sans eller slab med öppna former, i stora storlekar, över en lugn bakgrund. Gör strecket tillräckligt tjockt för att läsas som en linje och inte som ett hårstrå: cirka 2 till 4 procent av teckenstorleken är en bra början.
Ett pålitligt mönster parar ett solitt ord med ett konturerat, till exempel Sommar solitt och Sessions konturerat. Det solida ordet förankrar läsningen; konturen ger rytm. Undvik helt att kontura liten text, och kolla den på en mobil, där tunna streck försvinner först.
/* Outline: a stroke, no fill. */
.outline {
color: transparent;
-webkit-text-stroke: 0.03em #f5f0ff;
}
/* Extrude: stacked shadows, each 1px further. */
.extrude {
color: #fde8d0;
text-shadow:
1px 1px 0 #d9485f,
2px 2px 0 #d9485f,
3px 3px 0 #b83250,
4px 4px 0 #b83250,
5px 5px 0 #8f2442,
6px 6px 0 #8f2442;
}
/* Echo: one offset copy in a palette colour. */
.echo {
color: #ffffff;
text-shadow: 0.06em 0.06em 0 #7c3aed;
}
/* Halo: a soft glow for dark grounds. */
.halo {
color: #fff7ed;
text-shadow: 0 0 0.25em rgb(251 146 60 / 0.55),
0 0 0.8em rgb(244 114 182 / 0.35);
}-webkit-text-stroke fungerar i alla större webbläsare trots prefixet. Skuggor i em skalas med texten.Välja färger till texteffekter
Effekter ser pålagda ut när deras färger kommer från ingenstans. De ser designade ut när de kommer från bakgrunden. Hämta extruderingens sidfärg från gradientens mörkaste del, ekot från dess mest mättade färg och skenet från dess ljusaste. Då läses effekten som ljus och material från samma scen.
Låt själva bokstavsytan ha hög kontrast mot bakgrunden och låt effekten ligga mellan dem i ljushet. Då ger effekten djup utan att ta kontrast från bokstäverna. För de grundläggande kontrastreglerna, se färgkontrast.
Texteffekter i Gradiently
Gradiently Studio har åtta bokstavsbehandlingar: Kontur, Innerlinje, Utskuren, Extrudering, Dubbel, Spår, Riso och Halo. En Mark vet också var orden är: dess lugnaste område flyttar sig bakom dem, och automatisk textfärg väljer ljus eller mörk text per rad ur Markens egen palett, vilket ger ett behandlat ord en stabil bakgrund att vila mot. Samma regler gäller fortfarande: en behandling, några få ord, ett tungt typsnitt.
En enda behandlad fras på en lugn yta visar återhållsamheten göra jobbet.
Mer om att få text att synas på färgstarka bakgrunder finns i text på gradient; för effekter som är inbyggda i själva gradienten, se gradienttext i CSS.
Vanliga frågor
Vilka texteffekter ser moderna ut?
Återhållsamma: en tjock kontur ihop med ett solitt ord, ett litet förskjutet eko, en diskret riso-förskjutning eller ett mjukt sken på en mörk bakgrund, var och en på ett eller två stora ord.
Hur gör jag konturtext i CSS?
Sätt textfärgen till transparent och lägg till -webkit-text-stroke med en bredd och en färg, till exempel -webkit-text-stroke: 0.03em #ffffff. Det fungerar i alla större webbläsare.
Hur gör jag en 3D-texteffekt?
Stapla flera text-shadow-lager, vart och ett förskjutet en pixel längre åt samma håll och allt mörkare bakåt. Hämta färgerna från din bakgrund så att djupet ser ut att vara belyst av samma ljus.
Försämrar texteffekter läsbarheten?
Det kan de göra. Håll effekterna till stora, tunga ord, en effekt per design, och kontrollera att bokstavsytan fortfarande har stark kontrast mot bakgrunden.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil
