Cree etiquetas de mapas claras y un lenguaje visual útil
Principios de diseño cartográfico para tipografía legible, insignias de alto contraste, paletas de colores accesibles y leyendas de mapas interactivos.
Equipo de Layerpin
Las reglas de oro de la tipografía de mapas digitales
La tipografía en un mapa interactivo cumple una misión principal: el reconocimiento espacial rápido. A diferencia del texto del cuerpo editorial, las etiquetas de los mapas deben permanecer legibles frente a imágenes de fondo complejas y multicolores, desde el verde césped del parque hasta caminos de asfalto oscuro y trampillas arquitectónicas.
Utilice tipos de letra sans-serif limpios y geométricos (como Inter, Roboto o SF Pro) con pesos medios a negrita. Evite las delicadas fuentes serif finas que desaparecen en las pantallas de alta resolución.
Aplique siempre una pastilla de fondo sutil o un halo de texto (un contorno de contraste suave). Una insignia limpia y oscura detrás de un texto blanco o una pastilla blanca detrás de un texto oscuro garantizan una legibilidad del 100 % independientemente del arte de fondo que se encuentre debajo.
- 1Utilice una tipografía sans-serif limpia con pesos seminegrita o negrita para las etiquetas.
- 2Aplique pastillas de insignia de contraste detrás del texto para separar las etiquetas del arte complejo.
- 3Mantenga la copia de la etiqueta concisa: "Comedor" en lugar de "Comedor y catering del campus central".
Establezca una jerarquía visual clara en todos los niveles de zoom
No todos los elementos del mapa son iguales. Un plan maestro tiene distritos primarios, edificios secundarios y puntos de servicios menores.
Establezca una escala tipográfica de 3 niveles: Nivel 1 (distritos/alas) en texto grande en negrita y mayúscula de 16 a 18 píxeles; Nivel 2 (Edificios/Tiendas) en texto seminegrita de 13-14 píxeles; Nivel 3 (Servicios/Baños) en insignias compactas de 11-12 píxeles con íconos.
Layerpin le permite configurar la visibilidad de las etiquetas en función del zoom, lo que garantiza que las etiquetas de las habitaciones menores permanezcan ocultas a vista de pájaro para evitar el ruido visual y se desvanezcan elegantemente a medida que los visitantes se acercan.
- 1Asigne niveles de jerarquía visual a sus puntos de referencia y destinos.
- 2Utilice texto rastreado en mayúsculas para zonas grandes y mayúsculas y minúsculas para salas específicas.
- 3Configure umbrales de zoom para que las etiquetas menores solo aparezcan en niveles de zoom cercanos.
Diseñe leyendas de mapas interactivas y accesibles
Una leyenda de mapa es la Piedra Rosetta visual de su diseño. Traduce los colores de tus pines, los íconos de categorías y los rellenos de forma a un significado comprensible.
En Layerpin, su leyenda no es un gráfico estático, es un control interactivo. Al hacer clic en 'Baños' en la leyenda, se filtra y resalta todas las ubicaciones de los baños en el lienzo.
Siga las pautas de accesibilidad WCAG AA al elegir los colores de las categorías. Nunca confíes únicamente en el color para diferenciar categorías; Siempre combine el color con una forma o ícono distintivo para que los visitantes daltónicos puedan navegar con total confianza.
¿Listo para crear un mapa interactivo?
Crea el mapa en privado, revisa la vista del visitante y publícalo cuando esté listo para compartir. No credit card needed.
Empezar gratis