Tipografia
O aspecto visual da parte textual em nossa comunicação é um pilar da marca, reforçando nossa personalidade em diferentes materiais e conversando com nossos diferentes públicos em cada momento.
Além das características estéticas, a tipografia precisa garantir legibilidade através de mídias e contextos diversos.
Nosso sistema de marca utiliza duas famílias tipográficas principais com propósitos complementares.
“Tipografia é uma ferramenta para fazer coisas: moldar o conteúdo, dar um corpo físico à linguagem, permitir o fluxo social das mensagens.
A tipografia é uma tradição contínua que conecta você a outros designers — do passado e do futuro. Ela está com você em todos os lugares: na rua, no shopping, na internet, no seu apartamento.”Ellen Lupton
Thinking with type
Inter + Inter Tight
Nossa família principal para uso geral é a Inter e sua versão Inter Tight. Uma tipografia criada com interface do usuário como uma de suas principais aplicações e amplamente utilizada por sua versatilidade e alta legibilidade, fornecendo um padrão acessível em diferentes mídias.
A diferença entre as versões é que a Inter Tight possui um espaçamento menor, utilizando menos espaço horizontal. É a escolha principal para a maioria das necessidades, ficando a versão normal mais restrita aos nossos produtos e interfaces.
Inter • Função: Interface do usuário
Inter Tight • Função: Comunicação geral, apresentações, textos longos, etc.
Ambas estão disponíveis gratuitamente no Google Fonts (links abaixo) para serem utilizadas e baixadas caso necessário. É possível utilizá-las em todas as aplicações Google no ambiente do Super Professor (Planilhas, Slides, etc.):
Scale Variable
A tipografia que utilizamos em títulos e chamadas para comunicações de público externo.
Por ser uma fonte variável, dá um grande leque de possibilidades. Ela possui originalmente 6 pesos e 6 larguras como base, podendo ser trabalhada de diversas maneiras em nossas peças gráficas.
Essa não é uma fonte gratuita. Ela pode ser encontrada, ativada e licenciada para uso através do serviço Adobe Fonts (link abaixo):
Dicas e aplicação
No exemplo acima, temos uma aplicação que demonstra bem alguns pontos fundamentais de hierarquia visual e composição utilizando nossas duas famílias tipográficas juntas:
Tamanhos
Títulos devem ser maiores e a diferença entre eles e um parágrafo deve ser clara. No caso acima, o título tem tamanho 52 e o parágrafo, 26. Isso gera um contraste otimizado para a harmonia e organização. Esta dica vale para qualquer fonte que utilizar.
Cores
Com nossa paleta, temos neste exemplo o título aplicado no azul escuro da marca com destaque utilizando o verde primário do nosso símbolo. É uma forma trazer um ponto de atenção para uma palavra, termo ou frase. Já o parágrafo utiliza o cinza médio. Veja mais abaixo as indicações de cores para textos.
Pesos
Tanto no título quanto no parágrafo, foram utilizados diferentes pesos para gerar contraste entre os elementos e destacar informações mais importantes. O título traz a Scale em pesos Bold e Regular enquanto o parágrafo traz a Inter Tight Regular com destaques em Bold.
Cores para texto
Acima temos as principais escolhas para cores de títulos em diferentes fundos.
Para parágrafos e textos menores, de maneira geral, recomendamos ater-se aos tons neutros da paleta de cinzas.
Veja a página de cores para detalhes específicos de cada uma.