Le interfacce digitali di tutti i giorni includono una ricca varietà di immagini, visualizzazioni e altre figure. Tuttavia, più di ogni altra cosa, sono fatte di parole. Oh, così tante parole. Mentre forniamo ai team gli strumenti per progettare e codificare interfacce utilizzabili, coerenti e belle utilizzando i sistemi, è essenziale che le parole dipendano da una solida base di tipografia. Lo ammetto, non sono un esperto di tipografia. Non ho una laurea in graphic design. Non sono mai la persona che sceglie un font, ridimensiona il tipo o perfeziona la spaziatura delle lettere. Di conseguenza, sono sempre stato riluttante a scrivere di tipografia.

La tipografia inizia impostando una base di famiglie di font e pesi insieme a fallback. Quindi esplora come costruire una gerarchia utilizzando dimensioni, colore, dettagli aggiuntivi come l'altezza della riga e la reattività dei livelli. Questi modelli vengono quindi applicati ai componenti nella libreria di un sistema (come Articolo e Intestazione) e ai componenti personalizzati realizzati da altri team.

Font

Prima di entrare nei dettagli, devi stabilire le basi: i font. Attraverso l'esplorazione, il confronto, la ricerca e spesso, per le grandi aziende, la creazione di un font da soli, ogni visualizzazione deriva da questa scelta e ne dipende.

Famiglie, pesi e fallback

Mentre i sistemi possono variare i font in base al tema, la maggior parte si basa inizialmente sull'identificazione della famiglia di font serif e/o sans-serif primaria. Ogni font è arricchito da una cascata di fallback (Hello, Arial e Times) e molti sistemi inseriscono un font monospace per la visualizzazione del codice (anche se solo il proprio).

Alcuni sistemi possono cavarsela con appena due o tre pesi del loro carattere tipografico primario, cercando di bilanciare varietà e flessibilità con governance e peso di download.

Conclusione: arrivare a un font primario non è sempre difficile, ma scegliere quali pesi includere comporta conseguenze a lungo termine. Aggiungere font e pesi è facile. Gestire le dimensioni del download e modificarle è difficile.

Ottenere i font, tramite download, collegamento o CDN

Indipendentemente dal fatto che un programma di sistema di progettazione possieda o meno i font, gli utenti di un sistema di progettazione si aspettano che un sistema fornisca le istruzioni necessarie per utilizzare i font.

Dal punto di vista di un designer, è tutta una questione di download. Alcuni font sono proprietà intellettuale strettamente detenuta con una condivisione intenzionalmente limitata. Quindi, come minimo, una pagina di tipografia deve fornire un download diretto o istruzioni su come ottenere l'approvazione per ottenerli.La maggior parte dei team fornisce uno ZIP scaricabile che include tutti i file necessari per installare e utilizzare i font localmente.

Per gli sviluppatori, dipende dall'approccio, offrendo opzioni come:

• Download diretto dei font per servirli da soli
• Istruzioni per il collegamento a un servizio come Google Fonts
• Riferimenti CDN a cui tutti i prodotti fanno riferimento collettivamente
• Un invito a contattare un architetto tecnico, poiché è richiesta una licenza per il font. Le organizzazioni lo richiedono per controllare i costi ricorrenti e spesso non banali dell'hosting e del servizio del font.

Conclusione: i font sono necessari a persone diverse in modi diversi. Gli utenti del sistema si aspettano che il sistema spieghi come usare tutto facilmente, anche se non è compito del team di sistema creare font personalizzati o fornire font stessi.

Scala e gerarchia tipografica

La maggior parte dei sistemi di progettazione dimostra una scala tipografica nella documentazione come una pila verticale. Non è sufficiente. Un sistema tipografico dovrebbe anche stabilire costrutti come corpo del testo, titoli, colore, reattività, colore e altri dettagli fini.

Corpo del testo

I sistemi sfruttano una scala tipografica per offrire dimensioni di testo di base, spesso denominate semplicemente testo o corpo, che includono piccolo, medio, grande e, se necessario, xs, xl e così via. La maggior parte dei sistemi ne necessita di tre circa (da qui la mia dimestichezza nell'usare le taglie delle magliette). Inizia con pochi ed espandi quanto necessario come design dei componenti e composizioni di pagina in natura.

Il corpo del testo può anche offrire un paragrafo "Lead" (in alternativa, "Lede") distinto per aprire una pagina, come in un articolo (ne parleremo più avanti). Quindi, una semplice scala S/M/L può anche aver bisogno di altre varianti di lead. Ciò è particolarmente rilevante nei sistemi che offrono più dimensioni, poiché un Lead per display più grandi e a densità inferiore sarebbe più grande di un Lead per alternative più piccole e ad alta densità.

Colore del testo

Anche il colore svolge un ruolo chiave nella gerarchia tipografica di un'interfaccia, spesso tramite tipi consolidati come: