Tipografía
Spaceship explora dos entornos tipográficos: una tipografía técnica y redondeada, Gotham Rounded, y una tipografía más simple y geométrica, Proxima Nova.
Segura y directa, la tipografía permite un tono amigable y conversacional con nuestra audiencia.
Fuente principal
Gotham Rounded es una tipografía amigable, manteniendo un ADN técnico. Se utiliza exclusivamente en el logo de Spaceship, sub-marcas de productos, herramientas e identidades del equipo. Los únicos grosores permitidos son Medium, book y light.
Fuente secundaria
Proxima Nova es un elemento clave del entorno gráfico de Spaceship. Es la tipografía principal para nuestro texto e información en todas las comunicaciones. Los únicos grosores que pueden usarse con esta tipografía son bold, medium, regular y light.
Escala
Construimos nuestro sistema de escalas tipográficas usando la Proporción Áurea (1:1.618), y determinamos todos los pasos de tamaño necesarios.
Usando el Calculador de Escala Tipográfica modularscale.com, podemos crear un conjunto completo de escalas tipográficas a partir de un tamaño base primario. Debido a que la Proporción Áurea crea grandes saltos entre tamaños, debemos añadir un tamaño base secundario (2x el tamaño base) para generar un rango más útil. En este ejemplo, mostramos una escala tipográfica basada en un tamaño base de 16px.
Estilos de texto
Proxima Nova puede usarse tanto en textos de cuerpo pequeños como en grandes titulares con máxima coherencia óptica. Su amplia gama de grosores facilita adaptar cualquier tono o mensaje. El texto debe estar preferentemente alineado a la izquierda, aunque se puede centrar cuando sea apropiado.
Para grandes titulares usa peso negrita, interletraje óptico, interlineado automático y 80% de espacio entre palabras.
Para titulares regulares usa peso negrita, interletraje óptico, interlineado automático y 80% de espacio entre palabras.
Para subtítulos cortos usa pesos medio o regular, interletraje óptico, interlineado automático y 100% de espacio entre palabras.
Para subtítulos largos usa pesos medio o regular, interletraje óptico, interlineado automático y 100% de espacio entre palabras.
Para párrafos usa pesos regular o light, interletraje métrico, interlineado automático y 100% de espacio entre palabras.
Para cuerpo pequeño usa pesos regular o light, interletraje métrico, interlineado automático y 100% de espacio entre palabras.
Guía
No utilices valores de interletraje específicos, ni positivos ni negativos.
No utilices valores de interlineado específicos, ni más ajustados ni más sueltos.
No utilices párrafos alineados a la derecha
Jerarquía tipográfica
La tipografía debe mostrar claramente la jerarquía entre titulares, subtítulos y cuerpo de texto. Combinar los grosores y tamaños adecuados crea un fuerte contraste visual y ayuda a guiar al lector. Esta es la clave para una jerarquía de contenido efectiva.
Guía
No utilices los mismos grosores de cuerpo para diferentes tipos de contenido
Mantén la relación de grosores de arriba a abajo, es decir, titulares más fuertes, subtítulos o cuerpos de texto más ligeros.
No utilices tamaños y grosores de fuente similares para diferentes tipos de contenido.
Márgenes de seguridad
Para garantizar la máxima legibilidad, usamos la medida de interlineado del titular como referencia para establecer márgenes de seguridad respecto a los siguientes bloques de texto.
Combinaciones de colores
La tipografía, cuando se usa sobre fondos de color sólido, solo debe usarse en las combinaciones de colores presentadas a continuación.
Guía
No utilices otros colores, colores auxiliares de SDS o colores de sub-marcas en ningún tipo de tipografía.
No utilices el color azul SDS sobre colores auxiliares o de sub-marcas. Solo utiliza blanco o gris oscuro.
Ten en cuenta la relación de contraste entre la tipografía y el fondo. No utilices colores auxiliares, tintes o matices.
Fondos
El contraste y la legibilidad son elementos clave a tener en cuenta al usar tipografía sobre imágenes o fondos de color.
Guía
Evita usar el color azul SDS sobre imágenes o ilustraciones complejas. Esto es válido tanto para imágenes claras como oscuras.
No coloques texto sobre imágenes contrastantes. Esto es válido tanto para imágenes claras como oscuras.
No sobrecargues las imágenes con texto. El equilibrio es clave para una comunicación efectiva.