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 tipografica. 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 a 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 approfondire i dettagli, devi accontentarti delle basi: carattere/i. Attraverso l'esplorazione, il confronto, la ricerca e spesso, per le grandi aziende, la creazione di un font, ogni display deriva e dipende da questa scelta.

Famiglie, pesi e fallback

Mentre i sistemi possono variare i caratteri in base al tema, la maggior parte si basa inizialmente identificando la famiglia di caratteri primari serif e/o sans-serif. 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 possono farla franca con un minimo di due o tre pesi del loro carattere tipografico principale, cercando di bilanciare varietà e flessibilità con governance e peso del download.

Da asporto: arrivare a un font principale non è sempre difficile, ma scegliere quali pesi includere comporta conseguenze a lungo termine. L'aggiunta di 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 di 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, si tratta solo 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 fanno riferimento tutti i prodotti collettivamente
• Un invito a contattare un architetto tecnico, poiché è richiesta una licenza per il font. Le organizzazioni lo richiedono per controllare il costo ricorrente e spesso non trascurabile dell'hosting e della pubblicazione del font.

Da asporto: 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 servire i caratteri stessi.

Scala tipografica e amp; 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, titoli, colore, reattività, colore e altri dettagli a grana fine.

Corpo del testo

I sistemi sfruttano una scala di tipo per offrire dimensioni del 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 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, 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 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:

• Principale, per la maggior parte del testo dell'interfaccia sia corpo che intestazione.
• Secondario, per contrasto diminuito (spesso, il "testo grigio") per informazioni supplementari.
• Interattivo, non solo per i collegamenti ma anche per i pulsanti piatti, le etichette delle schede e altro ancora
• Disabilitato, spesso ne derivano trattamenti a contrasto particolarmente basso
• Errore, solitamente rosso, per il massimo contrasto con l'ambiente circostante

Quando si tratta di nominare i colori del testo in base all'intento, trovo che i nomi Hudl Uniform siano i più intriganti: predefinito, contrasto, sottile e non essenziale. Tali nomi bilanciano i compromessi di un controllo più forte con una maggiore astrazione (e quindi un riutilizzo meno evidente).

Questi tipi sono tipici, incontrati durante i primi progetti di componenti come pulsante, input e collegamento. Man mano che una libreria cresce, vengono disseminati in tutto il catalogo dei componenti tramite strumenti come token e mixin. In particolare, diventano necessari quando i progetti dei componenti si estendono in ambienti chiari e scuri.

Ad esempio, nella libreria Yoursite.com (gestita in modo molto meno rigoroso, i figli del ciabattino e tutto il resto), utilizziamo un mixin di colorazione del testo che itera attraverso i colori di sfondo, per tipo.