Le interfacce digitali quotidiane includono una ricca varietà di immagini, visualizzazioni e altre immagini. Ma più di ogni altra cosa sono fatti di parole. Oh, quante 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 solide basi tipografiche. Lo ammetto, non sono un esperto di tipografia. Mi manca una laurea in graphic design. Non sono mai la persona che sceglie un carattere, un tipo di ridimensionamento o la spaziatura delle lettere. Di conseguenza, sono sempre stato riluttante a scrivere di tipografia.

La tipografia inizia impostando una base di famiglie e pesi di caratteri insieme ai fallback. Successivamente esplora come costruire una gerarchia utilizzando dimensioni, colore, dettagli aggiuntivi come l'altezza della linea e la reattività dei livelli. Tali modelli vengono quindi applicati ai componenti nella libreria di un sistema (come articolo e intestazione) nonché ai componenti personalizzati realizzati da altri team.

Caratteri

Prima di approfondire i dettagli, devi stabilirti sulle basi: i caratteri. Attraverso l'esplorazione, il confronto, la ricerca e spesso, per le grandi aziende, creando autonomamente un font, ogni visualizzazione scaturisce e dipende da questa scelta.

Famiglie, pesi e fallback

Sebbene i sistemi possano variare i caratteri in base al tema, la maggior parte si basa inizialmente identificando la famiglia di caratteri serif e/o sans-serif primaria. Ogni carattere è arricchito con una cascata di fallback (Hello, Arial e Times) e molti sistemi inseriscono un carattere a spaziatura fissa per la visualizzazione del codice (anche se solo il proprio).

Alcuni sistemi riescono a farla franca con solo due o tre pesi del carattere tipografico primario, cercando di bilanciare varietà e flessibilità con la governance e il peso del download.

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

Ottenere i caratteri, tramite download, collegamento o CDN

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

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

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

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

In conclusione: i caratteri sono necessari a persone diverse in modi diversi. Gli utenti del sistema si aspettano che il sistema spieghi come utilizzare tutto in modo semplice, anche se non è compito del team del sistema creare caratteri personalizzati o fornire i caratteri da solo.

Scala tipografica e amp; Gerarchia

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

Corpo del testo

I sistemi sfruttano una scala di caratteri per offrire dimensioni di testo fondamentali, 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 richiede circa tre (quindi, mi sento a mio agio nell'usare le taglie delle magliette). Inizia con alcuni ed espandi secondo necessità man mano che progetta i componenti e componi le pagine in natura.

Il testo del corpo può anche offrire un paragrafo "Lead" distinto (in alternativa, "Lede") per aprire una pagina, come in un articolo (ne parleremo più avanti). Pertanto, una semplice scala S/M/L potrebbe richiedere anche altre varianti di piombo. 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 testo

Il colore gioca anche un ruolo chiave nella gerarchia tipografica di un'interfaccia, spesso secondo tipi stabiliti come: