Tipografia

Not found

Recomendações de uso

Essas recomendações de uso foram criadas para fornecer orientações sobre a utilização das fontes em nosso produto e garantir consistência, coesão visual e hierárquica em todas as interfaces. É importante ressaltar que as recomendações apresentadas neste guia não são regras imutáveis, mas sim diretrizes que refletem boas práticas a serem seguidas. À medida que o nosso produto evoluir e amadurecer, é possível que essas recomendações sejam revisadas e atualizadas para atender às necessidades.

Tipos de token

Atualmente, temos 5 tipos de tokens com diferentes características que foram pensados para contextos específicos. São eles:

Tipos de aplicação

Cada token é atribuído a diferentes tipos de aplicações. Temos 5 tipos de aplicações que são divididos em large, medium e small e possui tamanhos diferentes para desktop e mobile. São elas:

Display

Esse estilo é reservado para situações que demandam destaque e ênfase visual. É utilizado em títulos primários como cabeçalhos de página, títulos de artigos e landing pages. O estilo display funciona melhor em telas maiores, mas isso não impede sua utilização em dispositivos mobile. Esse estilo é utilizado na regra Variable Display.

Display Large

Para elementos de maior destaque, como títulos principais da página, seções importantes e chamada de artigos.

Display Medium

Suporte para mudança de tamanho de fonte na tela de playlists e álbuns que terá variação entre large, medium e small a depender da quantidade de caracteres.

Display Small

Recomendado para títulos secundários, que têm um destaque menor do que os "Display Large" como por exemplo os títulos de bloco na Landing Page.

Body

O estilo Body é utilizado no corpo do texto e é responsável por fornecer informações mais detalhadas. É onde a maior parte do conteúdo é apresentada, seja em parágrafos de texto (artigos e comentários), descrições, labels ou outros elementos informativos.

Body Large

Utilizado para textos de suporte ao "Display Large" e para passagens de texto mais longas como corpo de texto dos artigos do blog.

Body Medium

Adequado para corpo de texto secundário, como descrições menores.

Body Small

Adequado para corpo de texto secundário, como descrições menores.

Lyric

Esse estilo é exclusivamente utilizado para representar textos escritos em versos, como os encontrados nas letras de música. Esse estilo possui variações de fonte que se adaptam de acordo com o local onde está sendo exibido, podendo ser Arial (Desktop / iOS) ou Roboto (Android).

Lyric Large

Tamanho oficial da letra.

Lyric Medium

Adequado para acompanhar o tamanho e contexto que a letra está aplicada. Exemplo a citação de letra aparecendo nos comentários e no artigo no blog no site desktop.

Lyric Small

Adequado para acompanhar o tamanho e contexto que a letra está aplicada. Exemplo a citação da tradução da letra aparecendo nos comentários e no artigo no blog no site mobile.

Label

São estilos utilitários menores, usados ​​para texto dentro de componentes ou para textos muito pequeno no corpo do conteúdo, como legendas.

Label large

Utilizado em botões de tamanho large e também pode ser utilizado dentro de componentes diversos de acordo com a necessidade.

Label medium

Utilizado em botões de tamanho medium e também pode ser utilizado dentro de componentes diversos de acordo com a necessidade.

Label small

Utilizado em botões de tamanho small e também são aplicados em legendas de imagens ou tags, fornecendo informações adicionais em um espaço limitado.

Histórico de Atualizações