ayael.ayael.orbit/Typographie
03 ayael / SYSTÈME GRAPHIQUE

Typographie
& langage.

Manrope est la voix visuelle d’orbit : géométrique, ouverte et lisible. La hiérarchie s’appuie sur le rythme, pas sur une accumulation de graisses.

01

La famille principale

#

Manrope couvre les titres, le texte et l’interface en français. Les fichiers distribués conservent leur licence SIL OFL 1.1. La fonte de secours est une sans-serif système ; les logos vectoriels n’en dépendent pas.

AaManrope

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
ÀÂÆÇÉÈÊËÎÏÔŒÙÛÜŸ · 0123456789

  • Texte courant en 400 ; interface en 600 ; titres entre 600 et 700.
  • Ne pas simuler l’italique ou le gras si le fichier ne les fournit pas.
  • Conserver accents, apostrophes et caractères utiles dans une version web optimisée.
  • Pour du code, utiliser la pile monospace système : elle a une fonction distincte de la voix de marque.
02

Échelle typographique

#

Les tailles ci-dessous sont des références à l’échelle CSS de 100 %. Les titres peuvent être fluides entre deux valeurs ; le corps de texte et les commandes doivent rester lisibles sur petit écran.

Display72 / 76 px · 600L’essentiel.
Titre 148 / 54 px · 600L’essentiel.
Titre 232 / 40 px · 650L’essentiel.
Titre 324 / 32 px · 650L’essentiel.
Titre 420 / 28 px · 650L’essentiel.
Texte16 / 26 px · 400L’essentiel.
Interface14 / 20 px · 600L’essentiel.
Légende12 / 18 px · 500L’essentiel.
Repère11 / 16 px · 650L’essentiel.
03

Composer pour lire

#

Viser 55 à 75 caractères par ligne pour un texte continu. Une mesure plus courte convient à une fiche, mais ne justifie pas de réduire la taille du texte. Les paragraphes doivent former des unités de sens, avec un espace réel entre deux idées.

  • Corps de lecture web : 16 px minimum comme base orbit, interligne 1,6 environ.
  • Texte d’interface : 14 px comme base desktop ; conserver 16 px dans les champs mobiles pour éviter un zoom de saisie inattendu.
  • Légendes à 12 px seulement pour les informations secondaires courtes. Une consigne importante reste en taille de lecture.
  • Ne pas justifier les paragraphes sur le web ; aligner à gauche dans une langue latine.
  • Éviter les capitales sur une phrase entière. Les repères en capitales sont courts et espacés.
04

Chiffres & conventions

#

Les données doivent se lire et se comparer sans effort. Utiliser des chiffres tabulaires dans les tableaux, compteurs et durées ; préciser l’unité et le fuseau lorsque leur absence peut modifier le sens.

ÉlémentConvention françaiseExemple
DécimalesVirgule1,5 Mo
MilliersEspace insécable12 480
DimensionSigne ×1080 × 1920 px
Date lisibleJour, mois, année10 novembre 2026
Date techniqueISO 8601 avec fuseau2026-11-10T14:00:00+01:00
DuréeUnité explicite2 min 30 s
Donnée absenteTexte, pas zéro inventéNon mesuré
05

Français & interfaces internationales

#

Le nom ayael. ne se traduit pas. Les textes d’interface, formats de date et unités se localisent. Pour le coréen, Noto Sans KR est incluse dans le kit, avec ses fichiers web et sa licence. Employer une fonte Hangul complète et une hauteur de ligne adaptée ; ne pas forcer les métriques latines sur des blocs coréens.

Un regard, une présence.
Créer sans perdre le sens.

시선과 존재감.
본질을 담아내다.

  • Déclarer la langue du document et des passages rédigés dans une autre langue.
  • Conserver les noms propres dans leur graphie fournie.
  • Prévoir des libellés 30 à 50 % plus longs dans les maquettes : ne pas figer la largeur d’un bouton sur un seul mot français.
  • Dans un sens de lecture inversé, adapter la navigation et l’ordre logique, pas le logo ni les photographies.
  • Vérifier la disponibilité réelle de la police internationale : une pile CSS de secours n’est pas une fonte distribuée.
06

Une voix claire et humaine

#

Le tutoiement est le registre habituel des interfaces ayael. Le texte est direct, concret et respectueux. Il explique ce qui change et ce que la personne peut faire ensuite. La couleur de marque ne compense pas une formulation vague.

SituationFormulation orbitÀ éviter
ActionTélécharger la copieProcéder au traitement premium
SuccèsLa copie est enregistrée.Tout est parfaitement sécurisé !
ErreurLe fichier dépasse 50 Mo.Erreur inconnue.
AttentePréparation de la copie…Votre demande est prise en charge.
Information absenteAucune mesure reçue.Tous les services opérationnels.
Lien expiréCe lien a expiré.Oups, quelque chose a mal tourné.

Rechercher dans la charte

Saisir au moins deux caractères.