Tipografía
El entorno tipográfico de Spaceship utiliza dos tipografías: la amigable y técnica Gotham Rounded, y la más simple y geométrica Proxima Nova.
La tipografía de Spaceship es segura y directa, lo que permite un tono amigable y conversacional con nuestra audiencia.
Fuente principal
Gotham Rounded es una tipografía amigable pero sofisticada. Se utiliza exclusivamente en el logotipo de Spaceship, sub-marcas de productos y las identidades del equipo. Los únicos pesos permitidos son medio, book y light.
Fuente secundaria
Proxima Nova es un elemento clave del entorno gráfico de Spaceship. Es la tipografía principal para todas las comunicaciones. Solo se permiten los pesos bold, medium, regular y light al trabajar con esta tipografía.
Escala
El sistema de escala tipográfica y los pasos de tamaño necesarios se construyeron y determinaron utilizando la Proporción Áurea (1:1.618).
Creamos un conjunto completo de escalas tipográficas con una calculadora de escala tipográfica a partir de un tamaño base principal. Debido a que la Proporción Áurea genera saltos grandes entre tamaños, se requiere un tamaño base secundario (2 veces el tamaño base) para generar un rango más óptimo. El ejemplo a continuación muestra una escala tipográfica basada en tamaños base de 16px y 32px.
Estilos de texto
Proxima Nova tiene máxima consistencia óptica tanto en textos de cuerpo pequeños como en títulos grandes. Su amplia gama de pesos la hace adecuada para cualquier tono o mensaje. Se prefiere el texto alineado a la izquierda, aunque se puede usar la alineación centrada cuando sea necesario.
Para títulos grandes, utiliza peso negrita, kerning óptico, interlineado automático y un espacio entre palabras del 80%.
Para los títulos regulares, utiliza peso negrita, kerning óptico, interlineado automático y un espacio entre palabras del 80%.
Para subtítulos cortos, utiliza pesos medio o regular, kerning óptico, interlineado automático y un espacio entre palabras del 100%.
Para subtítulos largos, utiliza pesos medio o regular, kerning óptico, interlineado automático y un espacio entre palabras del 100%.
Para párrafos, utiliza pesos regular o light, kerning métrico, interlineado automático y un espacio entre palabras del 100%.
Para texto de cuerpo pequeño, utiliza pesos regular o light, kerning métrico, interlineado automático y un espacio entre palabras del 100%.
Jerarquía tipográfica
Para una jerarquía de contenido efectiva, la tipografía debe comunicar la relación organizativa entre títulos, subtítulos y texto de cuerpo. Combinar los pesos y tamaños correctos crea un fuerte contraste visual y ayuda a guiar al lector.
Márgenes de seguridad
Utilizamos la medida de interlineado del título como referencia de espaciado para garantizar la máxima legibilidad y establecer márgenes de seguridad para los siguientes bloques de texto.
Combinaciones de colores
Solo se permiten las combinaciones de colores presentadas a continuación al usar texto con fondos de color sólido.
Fondos
El contraste y la legibilidad son elementos clave a considerar al usar texto sobre imágenes o fondos de color.
Guía
Aquí tienes algunos ejemplos de lo que debes evitar al trabajar con texto.
No alteres drásticamente los valores definidos de kerning, espacio entre palabras e interlineado.
Ten en cuenta la jerarquía: títulos más fuertes, subtítulos más ligeros, textos de cuerpo, etc.
No utilices párrafos alineados a la derecha.
No utilices otros colores en ningún texto, como colores auxiliares, de producto o de sub-marca.
Utiliza solo texto blanco o gris oscuro sobre fondos de color.
La legibilidad es clave. No coloques texto sobre imágenes complejas o fondos de un tono similar.