Polices de caractères

La typographie est plus qu'un simple mot sur une page ; c'est un élément fondamental qui tisse la trame de l'identité de notre marque. Nos polices de caractères soigneusement choisies sont les ambassadeurs silencieux de notre message, offrant une voix cohérente et reconnaissable dans toutes nos communications.

Liens rapides :

Télécharger Font Awesome

Au-delà de la transmission d'informations, notre police de caractères incarne l'essence de notre marque - un mélange harmonieux de propreté, de modernité et de professionnalisme. Dans cette section, nous explorons non seulement les polices de caractères que nous utilisons, mais aussi les principes qui guident leur application, afin d'assurer une représentation homogène et percutante de notre marque dans chaque interaction.

Notre système typographique est conçu pour la polyvalence, offrant des lignes directrices fluides adaptables à divers supports ; chaque canal possède des spécifications distinctes, adaptées à partir de notre système global pour une représentation de la marque à la fois cohérente et sur mesure.

Simplon

Notre palette principale constitue l'essentiel de notre création et doit représenter les teintes les plus fortes de toutes les pièces.

Norme

La sous-famille Norm est notre police principale et se décline en 8 graisses.

Mono

Bien qu'il existe un ensemble complet de caractères mono, ils ne sont utilisés qu'avec parcimonie pour les chiffres.

Roboto

Roboto est utilisé dans les cas où Simplon ne peut l'être. Si une police de caractères système est absolument nécessaire ou requise, Roboto est une solution de rechange acceptable.

Utilisation et application

Vous trouverez ci-dessous des exemples d'utilisation et d'application, dans lesquels nous décrivons les façons correctes et incorrectes d'utiliser notre système de polices et de typographie. Dans notre rythme de conception, le contenu et la typographie collaborent comme une danse bien coordonnée. Ces règles guident la façon dont la typographie visuelle et la conception du contenu fonctionnent ensemble, en veillant à ce qu'elles se complètent pour un mélange parfait de lisibilité, d'esthétique et d'identité de marque. Certains défis visuels peuvent être résolus par des changements de contenu, tandis que d'autres défis liés au contenu nécessitent des solutions visuelles.

Vous trouverez des orientations conceptuelles, mais les spécifications exactes sont volontairement absentes en raison de la nature variée et dynamique des supports que notre marque englobe. Les départements, tels que l'impression ou la conception de sites web, établissent leurs propres spécifications sur la base de ces principes directeurs afin de s'aligner sur les meilleures pratiques de chaque support.

Utilisez notre police Simplon Norm Bold en grande taille pour que nos déclarations héroïques et puissantes aient un impact important.

Donnez aux grands titres beaucoup d'espace libre. Laissez le message parler de lui-même sans être gêné par des graphiques superflus ou par la proximité d'autres contenus.

Les déclarations d'impact importantes et en gras doivent être courtes ; 3 à 5 mots maximum. La ponctuation peut être utilisée pour créer un effet dramatique avec un point ou une question. La ponctuation et la casse des phrases doivent toujours être utilisées ensemble et ne pas être mal assorties.

Il est parfois nécessaire de faire une déclaration puissante qui ne se limite pas à 3 ou 5 mots. Utilisez la police de caractères normale, mais conservez la grande taille, l'espacement et les règles de ponctuation et de casse.

Les titres et les déclarations d'impact sont de grande taille et nécessitent une hauteur de ligne plus serrée que le corps du texte. Une hauteur de ligne de 100 % par rapport à la taille de la police est recommandée, mais peut être ajustée en fonction du support. Évitez simplement d'étirer la hauteur de ligne et de la comprimer au point que les lignes descendantes et ascendantes se touchent dans le texte d'impact.

N' utilisez pas nos caractères gras dans les petites tailles, car ils posent des problèmes de lisibilité à mesure qu'ils deviennent plus petits. Nous devons maintenir un niveau élevé de contraste et d'ordre dans le contenu. Utilisez donc la taille, la couleur et le poids pour rendre la page agréable à lire.

N' utilisez pas le traitement de l'impact pour énoncer l'évidence. Utilisez des surlignages, des sous-titres ou la proximité pour maintenir ces blocs dans leur contexte.

SECTION SUIVANTE

La hiérarchie est importante

Tout ne peut pas être la chose la plus importante. Utilisez la typographie pour guider l'utilisateur et faire en sorte que l'article soit rapidement parcouru ou confortablement approfondi.

Les sous-titres sont rapides à lire et à balayer

N'essayez pas d'en dire trop dans un sous-titre similaire à un titre. Donnez à l'utilisateur la carotte ou le fil d'Ariane qui lui permettra d'en savoir plus s'il le souhaite. Utilisez les titres de l'article comme des repères dans l'histoire. Si l'utilisateur fait défiler toute la page ou parcourt une page et ne lit que les titres, comprendra-t-il le principe de base de l'article ? Pourra-t-il trouver rapidement ce qui l'intéresse ?

Les sous-titres doivent respecter les mêmes règles de ponctuation et de casse que les titres principaux.

Dans certains cas, vous devrez faire des déclarations secondaires ou imbriquées. Utilisez les mêmes principes pour ces sous-titres. Tout comme pour les déclarations à fort impact, utilisez la couleur, le poids et la taille pour créer suffisamment de contraste et de hiérarchie dans votre article. Ce n'est pas seulement parce que c'est joli, mais aussi parce que c'est plus facile à lire.

L'importance de la hiérarchie

Utilisez tous les outils de la boîte à outils de la marque pour faire briller l'histoire.

La combinaison de différentes graisses et de différentes tailles permet d'obtenir une meilleure définition sans que les différences soient si importantes qu'elles rendent le document désordonné et non professionnel. Essayez de faire correspondre les tailles de police et de ne changer que la graisse. Ou bien faites correspondre les graisses et changez les tailles. D'une manière générale, 5 variations de police, de poids, de couleur et de taille sont le maximum qu'une page, une feuille ou une diapositive puisse comporter.

4x = 64px

Le type propre témoigne de notre expertise.

50% = 8px

Veillez à respecter l'espacement afin d'assurer un polissage final.

2x = 32px

Nous nous efforçons toujours d'obtenir un design parfait au pixel près. Cela signifie qu'il faut prêter attention aux détails. Pour que l'espace soit propre, hiérarchisé et facile à gérer, la taille des polices et l'espacement doivent être relatifs. Utilisez des unités de mesure propres pour créer vos verrouillages de caractères. Nous utilisons souvent une police de 16 pt comme référence et utilisons des multiples de cette taille pour créer l'espacement de nos verrouillages.

120% de 16pt ~ 19px

Les sauts de paragraphe doivent être en rapport avec la taille de la police du corps du texte et les dimensions de la grille de verrouillage. Nous essayons toujours d'utiliser des sauts de paragraphe de 120 % afin de laisser suffisamment d'espace pour créer une définition, mais pas trop pour ne pas dépasser les dimensions de la grille de verrouillage. Pour donner de l'espace à notre contenu, essayez d'augmenter l'espacement entre les sections principales.

2x = 32px

Liste rapide des recommandations relatives au type de corps :

50% = 8px

Hauteur des lignes - La hauteur des lignes peut varier et doit être adaptée à des supports spécifiques. Pour que les caractères soient accessibles, confortables et lisibles, commencez par 130 % et ne dépassez jamais 155 % de la taille de la police. Les légendes peuvent être plus serrées, mais les caractères de corps ne doivent jamais dépasser 100 %. Un document technique peut nécessiter une quantité importante de contenu dans un espace restreint, tandis qu'un document marketing devrait toujours privilégier la clarté et l'ouverture par rapport à la surcharge de contenu.
Hauteur du paragraphe - Comme ci-dessus, vous devez vous assurer que cette hauteur est adaptée au contenu et au support. Cela étant dit, essayez d'obtenir une hauteur comprise entre 100 % et 140 % de la taille de la police.
Stylisation en ligne - La stylisation en ligne permet de mettre l 'accent sur un texte plus important. Utilisez ces techniques avec parcimonie et essayez de ne mettre l'accent que sur les mots clés.

Si nous devons mettre en évidence une pensée ou une phrase entière, essayez de passer à une nouvelle ligne.

Évitez d'utiliser le soulignement. Dans la technologie numérique, cette technique est devenue synonyme de liens. Pour les liens, essayez d'utiliser un poids et une couleur sans soulignement afin qu'ils n'aient pas l'air désuets. Lorsque vous travaillez avec des adresses URL dans des documents imprimés ou des supports non interactifs, indiquez l'adresse complète en note de bas de page ou entre parenthèses à l'endroit où le texte du lien numérique apparaîtrait.

4x = 64px

Utilisez la couleur des caractères pour créer une expérience de lecture confortable et utilisez la couleur pour évoquer l'action. N'utilisez jamais une couleur d'action comme titre. Réservez le bleu à l'action et aux liens et évitez de l'utiliser pour les caractères statiques. Veillez à consulter les lignes directrices suivantes en matière d'accessibilité pour connaître les exigences en matière de contraste des caractères.

Accessibilité

Pour garantir une expérience cohérente au plus grand nombre de nos clients, nous voulons toujours rester aussi accessibles que possible. L'un des moyens d'y parvenir est d'adhérer aux directives WCAG 2.1 concernant les rapports de contraste pour le texte.

Vous trouverez ci-dessous le rapport de contraste minimum acceptable pour nos palettes primaires en tant que couleurs d'arrière-plan. Les différentes couleurs de texte acceptables de notre palette sont superposées. Le terme "minimum" signifie que nous identifions le texte le plus clair sur les arrière-plans les plus clairs qui peuvent être utilisés pour répondre aux normes AAA. Cette couleur, y compris toute couleur plus foncée dans le groupe de nuances, peut être utilisée. Et vice versa pour les fonds sombres et les textes plus clairs.

Veuillez noter que si la couleur du texte est affichée en caractères gras, elle n'atteindra que les normes AA et devrait être évitée pour les applications de polices légères et de petite taille.

Nous n'indiquons que les couleurs recommandées pour le texte. Les accents violets, orange, jaunes et sarcelles ne sont pas recommandés pour le texte.

Neutres

Votre texte peut être plus foncé que n'importe laquelle des teintes indiquées ci-dessous.

Marine

Votre texte peut être plus clair que n'importe laquelle des teintes mentionnées ci-dessous.

Bleu

Votre texte peut être plus clair ou plus foncé que l'une des teintes mentionnées ci-dessous, en fonction de la moitié de la palette utilisée.

Informations sur la marque