Tipografia
Spaceship esplora due ambienti tipografici: un carattere tecnico arrotondato, Gotham Rounded, e un carattere più semplice e geometrico, Proxima Nova.
Sicura e diretta, la tipografia consente un tono amichevole e conversazionale con il nostro pubblico.
Font principale
Gotham Rounded è un carattere amichevole, che mantiene un DNA tecnico. È utilizzato esclusivamente nel logo Spaceship, nei sub-brand di prodotto, negli strumenti e nelle identità del team. Gli unici pesi consentiti sono Medium, book e light.
Font secondario
Proxima Nova è un elemento chiave dell'ambiente grafico di Spaceship. È il carattere principale per i nostri testi e informazioni in tutte le comunicazioni. I soli pesi utilizzabili con questo carattere sono bold, medium, regular e light.
Scala
Abbiamo costruito il nostro sistema di scala tipografica utilizzando il Rapporto Aureo (1:1.618) e determinato tutti i passaggi di dimensione necessari.Utilizzando il Typographic Scale Calculator modularscale.com, possiamo creare un set completo di scale tipografiche da una dimensione base primaria. Poiché il Rapporto Aureo crea grandi salti tra le dimensioni, dobbiamo aggiungere una dimensione base secondaria (2x la dimensione base) per generare una gamma più utile. In questo esempio, mostriamo una scala tipografica basata su una dimensione base di 16px.
Stili di testo
Proxima Nova può essere utilizzato sia per testi di corpo di piccole dimensioni che per grandi titoli, garantendo la massima coerenza ottica. L'ampia gamma di pesi facilita l'adattamento a qualsiasi tono o messaggio. Il testo dovrebbe preferibilmente essere allineato a sinistra, anche se l'allineamento centrato può essere utilizzato quando appropriato.
Per grandi titoli usa il peso bold, crenatura ottica, interlinea automatica e spaziatura tra le parole all'80%.
Per titoli regolari usa il peso bold, crenatura ottica, interlinea automatica e spaziatura tra le parole all'80%.
Per sottotitoli brevi usa i pesi medium o regular, crenatura ottica, interlinea automatica e spaziatura tra le parole al 100%.
Per sottotitoli lunghi usa i pesi medium o regular, crenatura ottica, interlinea automatica e spaziatura tra le parole al 100%.
Per paragrafi usa i pesi regular o light, crenatura metrica, interlinea automatica e spaziatura tra le parole al 100%.
Per testi piccoli usa i pesi regular o light, crenatura metrica, interlinea automatica e spaziatura tra le parole al 100%.
Guida
Non utilizzare valori di crenatura specifici, né positivi né negativi.
Non utilizzare valori di interlinea specifici, né più stretti né più larghi.
Non utilizzare paragrafi allineati a destra
Gerarchia tipografica
La tipografia dovrebbe mostrare chiaramente la gerarchia tra titoli, sottotitoli e testo di corpo. Abbinare i giusti pesi e dimensioni crea un forte contrasto visivo e aiuta a guidare il lettore. Questa è la chiave per una gerarchia dei contenuti efficace.
Guida
Non utilizzare gli stessi pesi del corpo per diversi tipi di contenuto
Mantieni la relazione di peso dall'alto verso il basso, cioè titoli più marcati, sottotitoli o testi di corpo più leggeri.
Non utilizzare dimensioni e pesi di font simili per diversi tipi di contenuto.
Margini di sicurezza
Per garantire la massima leggibilità utilizziamo la misura dell'interlinea del titolo come riferimento per stabilire i margini di sicurezza per i blocchi di testo successivi.
Combinazioni di colori
Il testo, quando utilizzato su sfondi a tinta unita, deve essere usato solo nelle combinazioni di colori presentate di seguito.
Guida
Non utilizzare altri colori, colori ausiliari SDS o colori dei sub-brand su nessun tipo di carattere.
Non utilizzare il colore SDS Blue su colori ausiliari o dei sub-brand. Utilizzare solo bianco o grigio scuro.
Fai attenzione al rapporto di contrasto tra testo e sfondo. Non utilizzare colori ausiliari, tinte o sfumature.
Sfondi
Contrasto e leggibilità sono elementi chiave da considerare quando si utilizza il testo su immagini o sfondi colorati.
Guida
Evita di utilizzare il colore SDS Blue su immagini o illustrazioni complesse. Questo vale sia per immagini chiare che scure.
Non posizionare il testo su immagini contrastanti. Questo vale sia per immagini chiare che scure.
Non sovraccaricare le immagini con testo. L'equilibrio è la chiave per una comunicazione efficace.