Potremmo essere inclini a pensare a caratteri altamente decorativi e multi-colorati come appartenenti all'era del tipo digitale. Non così. Il tipo cromatico che ha consentito l'uso di contorni, ombre e colori multipli (tra le altre cose) risale alla metà del XIX secolo. Erano costituiti da due o più serie corrispondenti che venivano stampate l'una sull'altra, per creare l'effetto desiderato.

I loro discendenti digitali sono progettati per funzionare esattamente allo stesso modo. Ogni stile in una famiglia di font di livelli può essere combinato con i suoi stili complementari per formare un composito.

In genere esiste uno stile regolare (o di riempimento) che può essere utilizzato indipendentemente e quindi diversi stili supplementari, come i contorni e le decorazioni, che possono essere aggiunti in cima. Gli stili supplementari non sono generalmente utilizzabili in modo indipendente, ma devono essere utilizzati in combinazione con almeno un altro stile per essere leggibili. Molte famiglie di font layer hanno anche uno stile composito pronto all'uso.

Font di livello nel browser

In Photoshop, Illustrator o qualsiasi altro programma di grafica che utilizza livelli, i tipi di carattere di sovrapposizione sono abbastanza semplici, ma come funziona in un browser?

Stratificazione di caratteri con div

Un approccio sarebbe quello di creare diversi

  Usare i caratteri di livello nei CSS 
  Usare i caratteri di livello nei CSS 
  Usare i caratteri di livello nei CSS 
  / * CSS * / # first, #second, #third {display: block; position: absolute; top: 10px; left: 5px;} h1 {font: 5em 'One'; colore: rgba (200,0,0, .85);} # secondi h1 {font-family: 'Two'; colore: rgba (0,200,0, .85);} # terzo h1 {font-family: 'Three'; colore: rgba (0,0,200, .85);}