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.

Hero Image

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 e 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 fuente principal para todas las comunicaciones. Los únicos pesos permitidos al trabajar con esta tipografía son bold, medium, regular y light.









Escala

El sistema de escala tipográfica y los pasos de tamaño necesarios se construyeron y determinaron usando 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 crea grandes saltos 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 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, usa peso negrita, kerning óptico, interlineado automático y 80% de espacio entre palabras.


Para títulos regulares, usa peso negrita, kerning óptico, interlineado automático y 80% de espacio entre palabras.


Para subtítulos cortos, usa pesos medio o regular, kerning óptico, interlineado automático y 100% de espacio entre palabras. 


Para subtítulos largos, usa pesos medio o regular, kerning óptico, interlineado automático y 100% de espacio entre palabras.


Para párrafos, usa pesos regular o light, kerning métrico, interlineado automático y 100% de espacio entre palabras.


Para texto pequeño, usa pesos regular o light, kerning métrico, interlineado automático y 100% de espacio entre palabras.







Jerarquía tipográfica

Para una jerarquía de contenido efectiva, la tipografía debe comunicar la relación organizacional entre títulos, subtítulos y cuerpo de texto. Combinar los pesos y tamaños correctos crea un fuerte contraste visual y ayuda a guiar al lector.









Márgenes seguros

Usamos la medida de interlineado del título como referencia de espaciado para garantizar la máxima legibilidad y establecer márgenes seguros 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í hay algunos ejemplos de lo que se debe 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 uses párrafos alineados a la derecha.


No uses otros colores en ningún texto, como colores auxiliares, de producto o de sub-marca.


Solo usa 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.