Griglia a 8 punti: tipografia sul web

La tipografia Web è confusa. Conosci le migliori pratiche?

Quando ho iniziato a guardare siti Web popolari per capire le migliori pratiche per la tipografia web, devo ammettere che ero sconcertato. Di seguito sono riportati alcuni esempi di scale tipografiche tratte da alcuni siti Web e sistemi di progettazione popolari. Riesci a trovare il modello unificante?

Campioni semplificati per adattarsi a una scala standard

Chiaramente ci sono diversi approcci per digitare i sistemi. La realtà è che come comunità web non siamo tutti d'accordo. Tuttavia, come la maggior parte dei problemi di progettazione, inizia davvero affrontando le esigenze dell'utente.

I tre archetipi dei sistemi tipografici

Ecco tre archetipi di sistema tipografici generali. La maggior parte delle aziende utilizzerà tutte e tre queste a un certo punto, ma è importante riconoscere le esigenze degli utenti sottostanti che vengono affrontate da ciascun orientamento.

Sito di marketing

  • Scopo: costruito per raccontare una storia specifica e ispirare i visitatori a trascorrere il loro tempo e / o denaro sul sito.
  • Requisiti: Ogni carattere tipografico avrà bisogno di un proprio set di stili e la varietà di dimensioni sarà basata sulla direzione artistica più che sull'adattamento degli elementi.
  • Caso di utilizzo reattivo: il sistema dovrà flettere attraverso più dimensioni dal cellulare al desktop.

Le esperienze web orientate a lanciarti in qualcosa finiscono in questa categoria. Gli ambiziosi infrangono tutte le regole della tipografia per creare esperienze avvincenti e accattivanti.

Mentre si pensa molto a questi siti, l'attenzione si concentra sul fare uno splash piuttosto che un sistema estensibile su cui poter costruire in futuro. Questi siti hanno generalmente una breve durata e vengono scartati interamente per una riprogettazione da cima a fondo.

Un esempio avanzato di ciò è la funzione di interpolazione utilizzata da Leigh Taylor e Nick Jones nella landing page di Invision.

ha una dimensione del carattere: calc (32px + ((24 * (100vw - 800px)) / 799)) ;. La tipografia sulla pagina viene calcolata meticolosamente per funzionare con qualsiasi dimensione dello schermo.

"Usare la matematica per fare direzione artistica dinamica" - Leigh Taylor

Sito Blog / Info

  • Scopo: trasmettere una grande quantità di informazioni basate su testo.
  • Requisiti: L'area di lettura principale può utilizzare un sistema di altezza della linea basato sul rapporto, proprio come fa questo articolo Medium.
  • Caso di utilizzo reattivo: sarà probabilmente reattivo ma manterrà l'attenzione sulla leggibilità.

Questo articolo Medium è un esempio di esperienza web creata per la lettura a lungo termine.

L'obiettivo non è interpretare piccole visualizzazioni o compilare moduli. I rapporti di dimensione che hanno scelto sono appositamente progettati per una leggibilità limitata per ottenere la lunghezza della linea desiderata. Riesco a leggere comodamente ogni riga perché la tipografia è stata accuratamente realizzata per soddisfare le mie esigenze di lettore.

Prodotto

  • Scopo: creato per risolvere un problema utente come l'archiviazione delle tasse, la gestione di un repository git o la visualizzazione delle metriche delle prestazioni.
  • Requisiti: il testo deve adattarsi perfettamente alla gerarchia degli elementi. Il testo viene utilizzato principalmente per etichette, istruzioni e dati visualizzati.
  • Caso di utilizzo reattivo: minimamente reattivo. I prodotti altamente sviluppati utilizzeranno un design adattivo che significa diverse esperienze per dispositivi mobili e desktop. L'attenzione si concentra sulla gerarchia di elementi che supportano l'esperienza dell'utente.

Il Material Design di Google è un linguaggio di design popolare applicabile a molti casi di utilizzo del prodotto.

Il metodo di spaziatura del materiale si basa su un sistema a griglia a componenti da 8 pt e una griglia di base a 4pt per la tipografia. Tentano di ridimensionare le altezze di linea con incrementi di 4. Il ridimensionamento con incrementi di 8 con la griglia della linea di base può essere difficile perché le altezze di linea disponibili sono troppo distanti per alcune dimensioni del testo.

Consentire ad alcune delle dimensioni del carattere di essere accompagnate da un'altezza di linea più appropriata è un ottimo percorso in avanti. Puoi sempre aumentare la spaziatura sopra o sotto una data linea di 4px per allinearla con la griglia atomica maggiore.

Quando applicato, il sistema di griglia della linea di base ha la capacità di allineare il sistema spaziale dell'elemento (griglia 8pt) con il sistema tipografico per creare un ritmo verticale avvincente nel design.

Implementazione della tipografia web - in realtà

È possibile avere un'interfaccia utente supponente e strutturata che aderisce a una griglia 8pt che ha anche un'area di lettura di lunga durata.

Consenti al sistema a griglia di base fissa di gestire il testo all'interno dei componenti strutturati e utilizzare una scala modulare per creare un'esperienza di lettura ottimale per il blog o i documenti che hai aggiunto al tuo sito.

Molte aziende produttrici di prodotti digitali lo fanno già tra la loro landing page di marketing, il prodotto digitale e la loro documentazione. Prendere la decisione di strutturare questi regni tipografici separatamente può liberarti da una complessità insostenibile.

Mescolare i tipi di contenuto insieme

La trappola - Ems, rems e pixel oh mio!

Per esprimere un sistema chiaro e coerente, le misurazioni della tipografia devono essere facilmente interpretate dal team del prodotto che lo costruisce.

Unità relative come rems ed ems sono talvolta fraintese e, nella mia esperienza, ciò porta a un sistema tipografico insostenibile. Ad esempio, il rapporto tra 14px di dimensione del carattere e 20px di altezza della linea non deve essere acquisito in unità relative poiché tale rapporto dovrebbe cambiare all'aumentare della dimensione del carattere.

Definire un'altezza della linea di 1.4285714286em è ridicolo, perché la maggior parte delle persone non può fare quel tipo di matematica nella loro testa. Se la dimensione del carattere aumenta a 16 px, il browser visualizzerà un'altezza di riga di 22,857142 px e quel tipo di divisione dei pixel è un mal di testa in attesa di accadere. Questo crea confusione ed è un uso improprio delle unità relative. Vedi un elenco completo di unità assolute vs relative qui.

Perché oggi ci sono così tanti sistemi di progettazione basati sul dimensionamento relativo? La risposta è "accessibilità".

Tuttavia, i browser non ridimensionano la dimensione del carattere di base quando si ingrandisce con il comando +. Esistono strumenti di accessibilità che ridimensioneranno le dimensioni dei caratteri di base per gli utenti che ne hanno bisogno. Ti consiglio di testarlo correttamente per assicurarti che sia l'esperienza che desideri che gli utenti abbiano. L'accessibilità check-the-box può ferire più di quanto aiuti.

L'utilizzo di rems ed em nel tuo sito / app è incredibilmente potente. Ci sono molti casi d'uso molto interessanti e dovrebbero essere una parte importante del tuo toolkit.

Il mio suggerimento è di usarli con parsimonia fino a quando non ne avrai un uso solido. Inserirli nel nucleo del tuo sistema tipografico può aprirti alla confusione e alle esperienze utente inaspettate.

Tipografia a griglia 8pt

La parte più potente del concetto di griglia 8pt è la sua capacità di garantire coerenza in tutti i progetti. Dovrai valutare le esigenze dei tuoi utenti e il modo migliore per ridimensionare la tua tipografia per soddisfare tali esigenze.

Incoraggio vivamente la progettazione e l'ingegneria a collaborare alla messa a punto di questi standard per un'azienda / prodotto.

Ecco alcuni esempi di alcuni nomi familiari: Google Material, Pivotal, Atlassian, Intuit.

Campioni semplificati per adattarsi a una scala standard

Riferimenti e letture correlate

  • Priyanka Godbole: un framework per la creazione di un sistema di spaziatura prevedibile e armonioso per un più rapido trasferimento del progettista
  • Richard Rutter: gli elementi dello stile tipografico applicati al web
  • Ian Yates: come stabilire una scala tipografica modulare
  • Nathan Curtis: Space in Design Systems
  • Vincent De Oliveira: Deep dive CSS: metriche dei caratteri, altezza della linea e allineamento verticale
  • Kezz Bracey: perché dovresti usare layout basati su Rem

Precedenti articoli con griglia a 8 punti:

  1. Introduzione al sistema a griglia a 8 punti
  2. Griglia a 8 punti: bordi e layout
  3. Griglia a 8 punti: ritmo verticale

Domande:

Questo è qualcosa che sto ancora esplorando. Hai un buon esempio da condividere? Hai un approccio diverso a un sistema di tipografia 8pt?

Se hai pensieri, lascia un commento o contatta Twitter.