3D-tekst: ekstrudert typografi gjort med smak

En 3D-teksteffekt får flate bokstaver til å se solide ut ved å gi dem sider, som om hver bokstav var skåret ut av en kloss og sett litt fra siden. Gjort med smak bruker den en tung skrift, en kort dybde på rundt 5 til 10 prosent av bokstavhøyden, én fast retning og sidefarger hentet fra en mørkere tone av bakgrunnen. Gjort dårlig bruker den gradienter, blanke høylys, lange dybder og flere retninger samtidig. Hold det enkelt, så ser ekstrudert tekst ut som et selvsikkert skilt og ikke som utklippsgrafikk.

Hva som får ekstrudert tekst til å se god eller billig ut

Ekstrudering har en lang historie på håndmalte skilt, sirkusplakater og platecovere fra 1970-tallet. Det er derfor den oppleves som varm og litt nostalgisk. Spill på det for kafeer, iskrem, merkevarer for barn, musikk og arrangementer. For en rolig, minimalistisk merkevare er det som regel feil stemme; teksteffekter hjelper deg å velge en som passer.

Slik velger du dybde, retning og farge

Dybde

Sidene bør være kortere enn bokstavstrekene er brede. På en overskrift på 160 px oppleves en dybde på 8 til 16 px som solid; ved 40 px begynner det å ligne en lang skygge, som er en annen stil. Liten tekst tåler ikke dybde i det hele tatt, så hold ekstrudering til overskriftsstørrelser.

Retning

Velg én retning og hold på den i alle design. Ned og til høyre er mest naturlig, fordi vi gjerne oppfatter lyset som om det kommer ovenfra og fra venstre. Rett ned føles som stablede klosser. Opp og til venstre føles uvanlig, noe som kan fungere for ett enkelt utsagn, men som fort blir slitsomt.

Farge

Tre toner gjør hele jobben: bokstavflaten, siden og bakgrunnen. Flaten bør stå i sterk kontrast til bakgrunnen. Siden ligger mellom dem, som regel en dyp nyanse av bakgrunnen eller av flaten. Når du henter den fra bakgrunnen, føles ekstruderingen belyst av det samme lyset.

Slik lager du en 3D-teksteffekt i CSS

CSS har ingen egenskap for ekstrudering, men stablede skygger gjør jobben. Hvert lag med text-shadow er en solid kopi av bokstavene, forskjøvet én piksel lenger, uten uskarphet. Stable nok av dem, så smelter kopiene sammen til solide sider. En siste, mykere skygge under forankrer bokstavene på siden.

.extruded {
  font-family: "Archivo Black", system-ui, sans-serif; /* load it from Google Fonts */
  font-size: 10rem;
  line-height: 1;
  color: #fff1d6;
  text-shadow:
    1px 1px 0 #c2410c,
    2px 2px 0 #c2410c,
    3px 3px 0 #c2410c,
    4px 4px 0 #c2410c,
    5px 5px 0 #c2410c,
    6px 6px 0 #c2410c,
    7px 7px 0 #c2410c,
    8px 8px 0 #c2410c,
    10px 12px 10px rgb(67 20 7 / 0.35);
}

Å skrive dusinvis av lag for hånd er kjedelig. Noen få linjer JavaScript lager listen for hvilken som helst dybde, retning og farge, og du kan lime den inn i stilarket ditt.

// Build a text-shadow value for an extrusion
function extrude(depth, color, dx = 1, dy = 1) {
  const layers = [];
  for (let i = 1; i <= depth; i++) {
    layers.push(`${i * dx}px ${i * dy}px 0 ${color}`);
  }
  return layers.join(", ");
}

console.log(extrude(12, "#1e3a8a"));        // down and right
console.log(extrude(10, "#1e3a8a", 0, 1));  // straight down

Behold ekstruderte overskrifter som ekte tekst på et nettsted, så de fortsatt kan søkes i, markeres og leses av skjermlesere. Skyggene endrer ikke den målte kontrasten mellom bokstav og bakgrunn, så sørg for at flatefargen holder alene. Foretrekker du en lettere, grafisk versjon, finner du én enkelt hard skygge uten lag i tekstskygger; for ekte 3D med lyssetting og rotasjon er du over i WebGL, som shader-gradienter introduserer.

Ekstruderte bokstaver steg for steg

1. 1

   Velg to til fire ord

   Et butikknavn, ett enkelt tilbud, en arrangementstittel. Ekstrudering trenger luft rundt seg.

2. 2

   Sett dem i en tung skrift

   En sans eller slab i black-vekt, eller en myk retro-serif. Retroskrifter foreslår noen med riktig varme.

3. 3

   Velg farger for flate, side og bakgrunn

   Sterk kontrast mellom flate og bakgrunn; siden en mørkere tone av bakgrunnen.

4. 4

   Legg til dybde i én retning

   Start på rundt 6 prosent av bokstavhøyden, ned og til høyre. Øk bare hvis det fortsatt ser flatt ut.

5. 5

   Hold alt annet flatt

   Detaljer, datoer og priser i en enkel, solid sans uten effekt.

Ekstrudert tekst i Gradiently

Uttrekk er en av Gradiently sine bokstavbehandlinger: den gir hvilken som helst tekst i Studio solid dybde ned og til høyre, med sider tegnet i Markens egne farger og en bryter for dybde, så du slipper å stable lag. Marken bak designet flytter sitt roligste område bak ordene, så ekstruderte bokstaver forblir lesbare uansett hvordan bakgrunnen skifter over rammen. Konturtekst og andre behandlinger finner du i samme meny hvis ekstrudering viser seg å være for høylytt for budskapet.