Le interfacce digitali quotidiane includono una ricca varietà di immagini, visualizzazioni e altre immagini. Tuttavia, più che altro, sono fatti di parole. Oh tante parole. Mentre dotiamo i team di 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. Mi manca una laurea in grafica. Non sono mai la persona che sceglie un carattere, un tipo di ridimensionamento o rifinisce 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. Esplora quindi come costruire la gerarchia utilizzando dimensioni, colore, dettagli aggiuntivi come l'altezza della linea e la reattività della stratificazione. Questi modelli vengono quindi applicati ai componenti nella libreria di un sistema (come l'articolo e l'intestazione) nonché ai componenti personalizzati realizzati da altri team.

Caratteri

Prima di entrare nei dettagli, devi accontentarti delle basi: font(s). Attraverso l'esplorazione, il confronto, la ricerca e spesso, per le grandi aziende, la creazione di un font da soli, ogni display deriva 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 sull'identificazione della famiglia di caratteri primari serif e/o sans-serif. Ogni carattere è potenziato 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 possono farla franca con solo due o tre pesi del loro carattere tipografico principale, cercando di bilanciare varietà e flessibilità con governance e peso del download.

Takeaway: Arrivare a un font primario non è sempre difficile, ma scegliere quali pesi includere comporta conseguenze a lungo termine. L'aggiunta di caratteri e pesi è facile. Gestire le dimensioni del 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 di un designer, è tutta una questione di download. Alcuni tipi di carattere sono proprietà intellettuale strettamente protetta con condivisione intenzionalmente limitata. Quindi, come minimo, una pagina di tipografia deve fornire il download diretto o le 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 font in locale.

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

• Download diretto dei font per servire i font stessi
• 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 carattere. Le organizzazioni lo richiedono per controllare il costo ricorrente e spesso non banale dell'hosting e della pubblicazione del font.

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 facilmente, anche se non è compito del team del sistema creare caratteri personalizzati o fornire i caratteri stessi.

Scala tipografica & Gerarchia

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

Corpo del testo

I sistemi sfruttano una scala di tipi per offrire dimensioni di testo principali, 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, il mio conforto nell'usare le taglie delle magliette). Inizia con alcuni ed espandi se necessario come design dei componenti e composizioni di pagine in natura.

Il body copy può anche offrire un paragrafo distinto "Lead" (in alternativa, "Lede") per aprire una pagina, ad esempio 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 con 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 per tipi consolidati come: