Luca Perullo

Curriculum / intermedio

Tipografia che parla

Dalla pagina nuda a una hero editoriale: scala modulare, ritmo verticale, drop cap, variable fonts. Come una rivista vera.

Apri un libro stampato bene. Non è il contenuto a colpirti per primo, è la cura della pagina. In 8 lezioni costruirai la hero della rivista "Slow" — un magazine di slow living — applicando gli stessi principi che usano Vogue, NYT, Wired, Apress: pairing display+body, scala modulare 1.250, ritmo verticale su baseline, italics e smallcaps al posto del bold ovunque, drop cap, hanging punctuation, variable fonts. Alla fine la tua pagina parlerà prima ancora che venga letta.

Inizia adesso70 min · 8 lezioni

Font pairing + scala modulare01

Importi due Google Fonts (display + sans testo) e costruisci una scala 1.250 con variabili CSS.

  1. 01Display + body: il pairing che fa la voce2 min
  2. 02Scala modulare 1.250 (Major Third)2 min
  3. 03Leading e tracking: respiro e personalità2 min
  4. 04Ritmo verticale su baseline 8px2 min

Leading, tracking, ritmo verticale02

Line-height differenziato per body e heading, letter-spacing stretto sui titoli, margini su baseline 8px.

  1. 05Italics e smallcaps al posto del bold2 min
  2. 06Drop cap: la prima lettera che apre la pagina2 min
  3. 07Hanging punctuation: le virgolette fuori dal margine2 min
  4. 08Variable font: il peso che reagisce2 min

Dettagli da magazine vero03

Italics e smallcaps al posto del bold, drop cap con ::first-letter, hanging punctuation per le virgolette.

    Variable fonts04

    font-variation-settings per un peso che reagisce all'hover. La tipografia diventa interattiva.