Layerpin logo
Commencer

Créez des étiquettes de carte claires et un langage visuel utile

Principes de conception cartographique pour une typographie lisible, des badges à contraste élevé, des palettes de couleurs accessibles et des légendes de cartes interactives.

LP

Équipe Layerpin

7 min de lecture
Palette du système de conception et directives de hiérarchie typographique pour un étiquetage clair des cartes

Les règles d'or de la typographie cartographique numérique

La typographie sur une carte interactive remplit une mission principale : une reconnaissance spatiale rapide. Contrairement au corps du texte éditorial, les étiquettes des cartes doivent rester lisibles sur des images d'arrière-plan complexes et multicolores, de l'herbe verte du parc aux routes asphaltées sombres et aux écoutilles architecturales.

Utilisez des polices sans empattement épurées et géométriques (telles que Inter, Roboto ou SF Pro) avec des graisses moyennes à grasses. Évitez les polices fines et délicates qui disparaissent sur les écrans haute résolution.

Appliquez toujours une pilule de fond subtile ou un halo de texte (un contour légèrement contrasté). Un badge sombre et net derrière le texte blanc ou une pilule blanche derrière le texte sombre garantit une lisibilité à 100 %, quelle que soit l'illustration d'arrière-plan qui se trouve en dessous.

  1. 1
    Utilisez une typographie sans empattement épurée avec des graisses semi-gras ou grasses pour les étiquettes.
  2. 2
    Appliquez des pastilles de badge contrastées derrière le texte pour séparer les étiquettes des illustrations complexes.
  3. 3
    Gardez la copie de l'étiquette concise : « Salle à manger » au lieu de « Salle de restauration et de restauration du campus central ».

Établissez une hiérarchie visuelle claire entre les niveaux de zoom

Tous les éléments de la carte ne sont pas créés égaux. Un plan directeur comprend des quartiers principaux, des bâtiments secondaires et des points de service mineurs.

Établissez une échelle typographique à 3 niveaux : Niveau 1 (Districts/Ailes) en grand texte majuscule gras de 16 à 18 px ; Niveau 2 (bâtiments/magasins) en texte semi-gras de 13 à 14 px ; Niveau 3 (Commodités/Toilettes) sous forme de badges compacts de 11 à 12 px avec icônes.

Layerpin vous permet de définir la visibilité des étiquettes en fonction du zoom, garantissant que les étiquettes des pièces mineures restent cachées en vue à vol d'oiseau pour éviter le bruit visuel, et s'effacent gracieusement lorsque les visiteurs zooment de plus près.

  1. 1
    Attribuez des niveaux de hiérarchie visuelle à vos points de repère et destinations.
  2. 2
    Utilisez du texte suivi en majuscules pour les grandes zones et la casse des phrases pour des pièces spécifiques.
  3. 3
    Configurez les seuils de zoom afin que les étiquettes mineures n'apparaissent qu'à des niveaux de zoom proches.
Visualisation de la carte cartographique globale avec des touches de légende et une typographie claires à code couleur

Concevoir des légendes de cartes accessibles et interactives

Une légende de carte est la pierre de Rosette visuelle de votre mise en page. Il traduit les couleurs de vos épingles, vos icônes de catégorie et vos remplissages de forme en un sens compréhensible.

Dans Layerpin, votre légende n'est pas un graphique statique, c'est un contrôle interactif. En cliquant sur « Toilettes » dans la légende, vous filtrez et mettez en surbrillance tous les emplacements de toilettes sur la toile.

Suivez les directives d'accessibilité WCAG AA lors de la sélection des couleurs des catégories. Ne comptez jamais uniquement sur la couleur pour différencier les catégories ; Associez toujours la couleur à une forme ou une icône distinctive afin que les visiteurs daltoniens puissent naviguer en toute confiance.

Layerpin logo

Prêt à créer une carte interactive ?

Créez votre carte en privé, vérifiez la vue visiteur, puis publiez-la lorsqu’elle est prête. No credit card needed.

Commencer gratuitement