Typographie
L’environnement typographique de Spaceship utilise deux polices : la conviviale et technique Gotham Rounded, et la plus sobre et géométrique Proxima Nova.
La typographie de Spaceship est affirmée et directe, permettant d’adopter un ton amical et conversationnel avec notre audience.
Police principale
Gotham Rounded est une police à la fois conviviale et sophistiquée. Elle est utilisée exclusivement dans le logo Spaceship, les sous-marques produits et les identités de l’équipe. Seules les graisses medium, book et light sont autorisées.
Police secondaire
Proxima Nova est un élément clé de l’environnement graphique de Spaceship. C’est la police principale pour toutes les communications. Seules les graisses bold, medium, regular et light sont autorisées avec cette police.
Échelle
Le système d’échelle typographique et les étapes de taille nécessaires ont été conçus et déterminés à l’aide du nombre d’or (1:1,618).
Nous avons créé un ensemble complet d’échelles typographiques avec un calculateur d’échelle typographique à partir d’une taille de base principale. Comme le nombre d’or crée de grands écarts entre les tailles, une taille de base secondaire (2 fois la taille de base) est nécessaire pour générer une plage plus optimale. L’exemple ci-dessous montre une échelle typographique basée sur des tailles de base de 16px et 32px.
Styles de texte
Proxima Nova offre une cohérence optique maximale aussi bien dans le petit texte courant que dans les grands titres. Sa large gamme de graisses la rend adaptée à tous les tons ou messages. Le texte aligné à gauche est préférable, bien qu’un alignement centré puisse être utilisé si nécessaire.
Pour les gros titres, utilisez la graisse bold, le crénage optique, l’interlignage automatique et un espacement des mots de 80 %.
Pour les titres courants, utilisez la graisse bold, le crénage optique, l’interlignage automatique et un espacement des mots de 80 %.
Pour les sous-titres courts, utilisez les graisses medium ou regular, le crénage optique, l’interlignage automatique et un espacement des mots de 100 %.
Pour les sous-titres longs, utilisez les graisses medium ou regular, le crénage optique, l’interlignage automatique et un espacement des mots de 100 %.
Pour les paragraphes, utilisez les graisses regular ou light, le crénage métrique, l’interlignage automatique et un espacement des mots de 100 %.
Pour le petit texte courant, utilisez les graisses regular ou light, le crénage métrique, l’interlignage automatique et un espacement des mots de 100 %.
Hiérarchie typographique
Pour une hiérarchie de contenu efficace, la typographie doit communiquer la relation organisationnelle entre les titres, les sous-titres et le texte courant. Associer les bonnes graisses et tailles crée un contraste visuel fort et aide à guider le lecteur.
Marges de sécurité
Nous utilisons la mesure d’interlignage des titres comme référence d’espacement des lignes afin de garantir une lisibilité maximale et d’établir des marges de sécurité pour les blocs de texte suivants.
Combinaisons de couleurs
Seules les combinaisons de couleurs présentées ci-dessous sont autorisées lors de l’utilisation de texte sur des fonds de couleur unie.
Fonds
Le contraste et la lisibilité sont des éléments clés à prendre en compte lors de l’utilisation de texte sur des images ou des fonds colorés.
Conseils
Voici quelques exemples de ce qu’il faut éviter lors du travail avec du texte.
Ne modifiez pas radicalement les valeurs de crénage, d’espacement des mots et d’interlignage définies.
Gardez la hiérarchie à l’esprit : titres plus forts, sous-titres plus légers, textes courants, etc.
N’utilisez pas de paragraphes alignés à droite.
N’utilisez pas d’autres couleurs sur le texte, telles que les couleurs auxiliaires, produits ou sous-marques.
Utilisez uniquement du texte blanc ou gris foncé sur des fonds colorés.
La lisibilité est essentielle. N’apposez pas de texte sur des images complexes ou des fonds de teinte similaire.