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.

Tipografia inizia impostando una base di famiglie di caratteri e pesi 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 Articolo e Intestazione) così come ai componenti personalizzati realizzati da altri team.

Caratteri

Prima di approfondire i dettagli, devi per accontentarsi 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

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 è 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 come meno di due o tre pesi del loro carattere tipografico principale, 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 porta 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 di sistema di progettazione possieda o meno i caratteri, gli utenti di un progetto system 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 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 caratteri in locale.

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

• Diretto download di 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.

Conclusione: i font 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 da soli.

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 il corpo del testo, le intestazioni, il colore, la reattività, il colore e altri dettagli dettagliati.

Corpo del testo

I sistemi sfruttano una scala del tipo per offrire il nucleo dimensioni del testo, 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 testo del corpo può anche offrire un paragrafo distinto "Lead" (in alternativa, "Lede") per aprire una pagina, come 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:

• Primario
• Secondario
• Interattivo
• Disabilitato
• 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 design dei componenti si estendono in ambienti chiari e scuri.

Ad esempio, nella libreria di 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.