Le interfacce digitali di tutti i giorni includono una ricca varietà di immagini, visualizzazioni e altre immagini. Tuttavia, più che altro, sono fatti di parole. Oh tante parole. Mentre forniamo ai team la possibilità di progettare e codificare interfacce utilizzabili, coerenti e belle utilizzando i sistemi, è essenziale che le parole dipendano da una solida base tipografica. Lo farò 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 spessori 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 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

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.

In conclusione: arrivare a un carattere principale 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 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 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 tipo 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

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

• Primary, per la maggior parte del testo dell'interfaccia, corpo o intestazione.
• Secondary, per contrasto ridotto (spesso, il "testo grigio") per informazioni supplementari.
• Interactive, non solo per link ma anche pulsanti piatti, etichette di schede e altro
• Disattivato, spesso il risultato sono trattamenti di contrasto particolarmente bassi
• 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 link. 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, figli del calzolaio e tutto il resto), utilizziamo un mixin di colorazione del testo che itera attraverso i colori di sfondo, per tipo.