Kortversjonen
- Teksteffekter er behandlinger som legges på bokstaver, for eksempel konturer, innlinjer, 3D-dybde, forskjøvne ekko, feilregistrering fra trykk og glød.
- Effekter fungerer best på noen få store ord i en kraftig vekt, der de gir karakter uten å gjøre teksten vanskeligere å lese.
- Effekter ser utdaterte ut når de brukes med full styrke på hver linje, stables oppå hverandre eller brukes til å redde svak typografi.
- Konturtekst trenger en tykk, enkel skrift og en rolig bakgrunn, fordi bokstavene mister den fylte formen sin.
- Velg én effekt per design, og knytt fargene til paletten i bakgrunnen, så ser den designet ut og ikke påklistret.
På denne siden
Teksteffekter er behandlinger som legges på bokstaver, for eksempel en kontur, en innlinje, 3D-dybde, et forskjøvet ekko, en feilregistrering som i trykk eller en myk glød. De ser ikke utdaterte ut når tre regler holder: bruk én effekt per design, legg den på noen få store ord i en kraftig vekt, og hent fargene fra bakgrunnen i stedet for fra en forhåndsinnstilling. Effekter mislykkes når de stables, spres over hver linje eller brukes til å redde skrift som ikke fungerte.
Denne guiden dekker de viktigste effektfamiliene, når hver av dem passer til et budskap, hvordan du holder dem lesbare, og hvordan du bygger noen av dem i CSS. Har du ikke valgt skrift ennå, kan du begynne med displayskrifter, siden de fleste effekter trenger store, solide bokstaver for å fungere.
De viktigste typene teksteffekter
De fleste bokstavbehandlinger hører til en håndfull familier. Hver av dem har sine egne assosiasjoner, og derfor er valget av effekt egentlig et valg av tonefall.
| Effekt | Hvordan den ser ut | Tonen den setter | Risiko for lesbarheten |
|---|---|---|---|
| Kontur (omriss) | Bokstaver tegnet bare som streker | Luftig, moderne, redaksjonell | Høy på urolig bakgrunn |
| Innlinje | En tynn linje inne i hver strek | Gamle skilt, håndverk, sport | Lav i store størrelser |
| 3D-dybde (extrude) | Bokstaver med 3D-dybde | Retro, leken, høylytt | Moderat |
| Dobbel eller ekko | En forskjøvet kopi eller et spor bak | Bevegelse, musikk, energi | Moderat |
| Kutt | Bokstaver som er delt og forskjøvet | Spenning, mote, teknologi | Moderat |
| Riso | Forskjøvne fargelag, trykktekstur | Indietrykk, fanziner, varme | Lav hvis forskyvningen er liten |
| Glorie eller glød | Mykt lys rundt bokstavene | Natt, neon, rolig luksus | Lav på mørk bakgrunn |
Når en teksteffekt hjelper, og når den skader
En effekt hjelper når den bærer en mening ordene ikke kan bære alene. Et ekko bak Høyt får det til å vibrere. 3D-dybde på en retro menytavle plasserer den i tid. En glød på plakaten til et nattarrangement antyder rommet. Når effekten ikke sier noe, blir den pynt, og pynt blir fort gammel.
Ett stort ord er stedet der en effekt fortjener plassen sin: det er lite å lese og mye å føle.
På en arrangementsplakat hører effekten bare hjemme på tittelen. Datoer og detaljer forblir enkle.
Unngå
- En effekt på både overskriften og brødteksten
- Kontur pluss skygge pluss glød på ett ord
- Standardfarger, som en svart skygge på alt
- Tynne eller lette skrifter under tunge effekter
- Effekter brukt for å få svak tekst til å virke spennende
Gjør
- Én effekt, på de få største ordene
- Én behandling per design, brukt med overbevisning
- Effektfarger hentet fra bakgrunnens palett
- Kraftige, enkle bokstavformer som tåler effekten
- Tekst som fungerer uten pynt, og så en effekt som gir tone
Slik gjør du konturtekst lesbar
Konturtekst er den effekten som lettest mislykkes, fordi den fjerner den fylte formen som gjør bokstaver lette å kjenne igjen. Bruk den på en kraftig grotesk eller egyptienne med åpne former, i store størrelser, over en rolig bakgrunn. Sett streken tykk nok til å leses som en linje, ikke en hårstrek: rundt 2 til 4 prosent av skriftstørrelsen er et godt utgangspunkt.
Et pålitelig mønster kombinerer ett fylt ord med ett i kontur, for eksempel Sommer fylt og Konserter i kontur. Det fylte ordet forankrer lesingen, konturen gir rytme. Unngå kontur på liten tekst helt, og sjekk den på en mobil, der tynne streker forsvinner 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 fungerer i alle de store nettleserne til tross for prefikset. Skygger i em skalerer med teksten.Velge farger til teksteffekter
Effekter ser påklistret ut når fargene kommer fra ingensteds. De ser designet ut når de kommer fra bakgrunnen. Hent sidefargen i 3D-dybden fra den mørkeste delen av gradienten, ekkoet fra den mest mettede fargen og gløden fra den lyseste. Da leses effekten som lys og materiale fra samme scene.
Hold selve bokstavflaten i høy kontrast mot grunnen, og la effekten ligge mellom dem i lyshet. Da gir effekten dybde uten å ta kontrast fra bokstavene. De underliggende kontrastreglene finner du i fargekontrast.
Teksteffekter i Gradiently
Studio i Gradiently har åtte Lettering-behandlinger: Contour, Inline, Cut, Extrude, Double, Trail, Riso og Halo. En Mark vet også hvor ordene står: det roligste området flytter seg bak dem, og Auto blekk velger lys eller mørk tekst per linje fra Markens egen palett, noe som gir et behandlet ord en stødig grunn å stå på. De samme reglene gjelder fortsatt: én behandling, noen få ord, en kraftig skrift.
En enkelt behandlet frase på en rolig flate viser at tilbakeholdenhet gjør jobben.
Vil du vite mer om å få skrift til å leses på fargerike bakgrunner, kan du lese tekst på gradient. Effekter som er bygget inn i selve gradienten, finner du i gradienttekst i CSS.
Spørsmål folk stiller
Hvilke teksteffekter ser moderne ut?
De tilbakeholdne: en tykk kontur sammen med et fylt ord, et lite forskjøvet ekko, en diskret riso-feilregistrering eller en myk glød på mørk bakgrunn, hver brukt på ett eller to store ord.
Hvordan lager jeg konturtekst i CSS?
Sett tekstfargen til gjennomsiktig og legg til -webkit-text-stroke med en bredde og farge, for eksempel -webkit-text-stroke: 0.03em #ffffff. Det fungerer i alle de store nettleserne.
Hvordan lager jeg en 3D-effekt på tekst?
Stable flere text-shadow-lag, hvert forskjøvet én piksel lenger i samme retning og mørkere bakover. Hent fargene fra bakgrunnen, så ser dybden ut til å være belyst av det samme lyset.
Skader teksteffekter lesbarheten?
Det kan de. Hold effektene til store, kraftige ord, én effekt per design, og sjekk at bokstavflaten fortsatt har sterk kontrast mot bakgrunnen.
Skrevet av Gradiently
Teamet bak Gradiently, et designverktøy bygget rundt Marks: levende gradienter som gjør at alt du designer ser ut som ditt.
Se profilen vår
