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.
Confiada 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 usa 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 se pueden usar con esta tipografía son bold, medium, regular y light.
Escala
Construimos nuestro sistema de escala tipográfica 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 genera saltos grandes entre tamaños, debemos agregar 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 titulares grandes con máxima consistencia ó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 titulares grandes usa peso negrita, kerning óptico, interlineado automático y 80% de espacio entre palabras.
Para titulares 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 cuerpo pequeño usa pesos regular o light, kerning métrico, interlineado automático y 100% de espacio entre palabras.
Guía
No uses valores específicos de kerning, ni positivos ni negativos.
No uses valores específicos de interlineado, ni más apretados ni más sueltos.
No uses párrafos alineados a la derecha
Jerarquía tipográfica
La tipografía debe mostrar claramente la jerarquía entre titulares, subtítulos y texto de cuerpo. Combinar los grosores y tamaños correctos 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 uses los mismos grosores de cuerpo para diferentes tipos de contenido
Mantén la relación de grosores de arriba hacia abajo, es decir, titulares más fuertes, subtítulos o textos de cuerpo más ligeros.
No uses tamaños y grosores de fuente similares para diferentes tipos de contenido.
Márgenes seguros
Para garantizar la máxima legibilidad, usamos la medida de interlineado del titular como referencia para establecer márgenes seguros con los siguientes bloques de texto.
Combinaciones de color
La tipografía, cuando se usa con fondos de color sólido, solo debe usarse en las combinaciones de color presentadas a continuación.
Guía
No uses otros colores, colores auxiliares SDS o de sub-marcas en ningún tipo de tipografía.
No uses tipografía color azul SDS sobre colores auxiliares o de sub-marcas. Solo usa blanco o gris oscuro.
Ten en cuenta la relación de contraste entre la tipografía y el fondo. No uses colores auxiliares, tintes o matices.
Fondos
El contraste y la legibilidad son elementos clave a considerar 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 aplica tanto para imágenes claras como oscuras.
No coloques texto sobre imágenes contrastantes. Esto aplica tanto para imágenes claras como oscuras.
No sobrecargues las imágenes con texto. El equilibrio es clave para una comunicación efectiva.