Tipografia

O ambiente tipográfico da Spaceship utiliza duas fontes: a amigável e técnica Gotham Rounded, e a mais simples e geométrica Proxima Nova.

Hero Image

A tipografia da Spaceship é confiante e direta, permitindo um tom amigável e conversacional com o nosso público.



Fonte principal

Gotham Rounded é uma fonte amigável mas sofisticada. É usada exclusivamente no logótipo da Spaceship, sub-marcas de produtos e identidades da equipa. Os únicos pesos permitidos são médio, book e leve.









Fonte secundária

Proxima Nova é um elemento chave do ambiente gráfico da Spaceship. É a fonte principal para todas as comunicações. Apenas os pesos negrito, médio, regular e leve são permitidos ao trabalhar com esta fonte.









Escala

O sistema de escala tipográfica e os passos de tamanho necessários foram construídos e determinados usando a Proporção Áurea (1:1.618). Criámos um conjunto completo de escalas tipográficas com uma calculadora de escala tipográfica a partir de um tamanho base primário. Como a Proporção Áurea cria saltos grandes entre tamanhos, é necessário um tamanho base secundário (2 vezes o tamanho base) para gerar uma gama mais otimizada. O exemplo abaixo mostra uma escala tipográfica baseada em tamanhos base de 16px e 32px.









Estilos de texto

A Proxima Nova tem máxima consistência ótica tanto em texto de corpo pequeno como em títulos grandes. A sua ampla gama de pesos torna-a adequada para qualquer tom ou mensagem. O texto alinhado à esquerda é preferível, embora o alinhamento centrado possa ser usado quando necessário.




Para títulos grandes, usa peso negrito, kerning ótico, entrelinhamento automático e 80% de espaço entre palavras.


Para títulos regulares, usa peso negrito, kerning ótico, entrelinhamento automático e 80% de espaço entre palavras.


Para subtítulos curtos, usa pesos médio ou regular, kerning ótico, entrelinhamento automático e 100% de espaço entre palavras. 


Para subtítulos longos, usa pesos médio ou regular, kerning ótico, entrelinhamento automático e 100% de espaço entre palavras.


Para parágrafos, usa pesos regular ou leve, kerning métrico, entrelinhamento automático e 100% de espaço entre palavras.


Para texto pequeno, usa pesos regular ou leve, kerning métrico, entrelinhamento automático e 100% de espaço entre palavras.







Hierarquia tipográfica

Para uma hierarquia de conteúdo eficaz, a tipografia deve comunicar a relação organizacional entre títulos, subtítulos e corpo de texto. Combinar os pesos e tamanhos corretos cria um contraste visual forte e ajuda a guiar o leitor.









Margens de segurança

Usamos a medida de entrelinhamento do título como referência de espaçamento de linha para garantir máxima legibilidade e estabelecer margens de segurança para os blocos de texto seguintes.









Combinações de cores

Apenas as combinações de cores apresentadas abaixo são permitidas ao usar texto com fundos de cor sólida.










Fundos

Contraste e legibilidade são elementos chave a considerar ao usar texto sobre imagens ou fundos coloridos.










Orientações

Aqui estão alguns exemplos do que deves evitar ao trabalhar com texto. 




Não alteres drasticamente os valores definidos de kerning, espaçamento entre palavras e entrelinhamento.


Mantém a hierarquia em mente: títulos mais fortes, subtítulos mais leves, textos de corpo, etc.


Não uses parágrafos alinhados à direita.


Não uses outras cores em nenhum texto, como cores auxiliares, de produto ou de sub-marca.


Usa apenas texto branco ou cinzento escuro sobre fundos coloridos.


A legibilidade é fundamental. Não coloques texto sobre imagens complexas ou fundos de tonalidade semelhante.