O que é

A tipografia é uma parte importante de um produto digital. Tomamos o cuidado de selecionar novas famílias de fontes que promovam legibilidade e acessibilidade para os produtos Zenvia. São duas famílias tipográficas utilizadas pelo Sirius: Nunito Sans para corpo de texto, a fonte mais usada em todo sistema, e a Exo 2, para títulos.

Aplicação

Componentes tipográficos

Os componentes tipográficos são compostos por família, tamanho, altura da linha e peso.

Eles possuem dois estados: padrão e focus. Usamos o estado focus apenas para destacar palavras ou frases no texto. Não use esse estado para um título, descrição ou parágrafo inteiro.

O estilo de texto padrão é o text-body.

Tokens

Além dos componentes tipográficos, estão disponíveis dois tokens que podem ser usados em conjunto com eles.

Acessar tokens >

Boas práticas para títulos

• Utilize apenas um H1 por página. Mesmo sendo possível adicionar mais de um, essa prática ainda não é recomendada.

• Evite a quebra de hierarquia. Não pule níveis de títulos (ex.: do H2 para o H4). A consistência nos títulos é importante para as tecnologias assistivas.

Cor no texto

A cor padrão para textos no código é a Support Darkest. Essa deve ser a cor utilizada. Como os elementos tipográficos (no código) e estilos de texto (no Figma) não possuem cor inclusa, é responsabilidade das pessoas desenvolvedoras e designers prezar pela consistência da cor dos textos.

Dê sempre preferência para a Support Darkest em títulos e parágrafos. Evite o uso do preto 100% (Base color) em textos. O preto é uma cor dominante, portanto chamará mais atenção do que as outras. O cinza reduz o cansaço visual. As cores de marca (Brand Colors) são recomendadas para elementos interativos (componentes e links), ilustrações e reforço visual.

Os componentes da Library já estão aplicados com esses estilos, recomenda-se que use-os como um guia.

Conteúdo

Maiúsculas e minúsculas

O Guia de Redação da Zenvia possui padrões sobre o uso de letras maiúsculas e minúsculas em títulos e subtítulos. Você encontra esses padrões na seção Padronização visual.

Ir para Guia de Redação >

Alinhamentos no Figma

Até o momento, o Figma não permite a configuração de alinhamentos nos estilos de texto. Portanto, os alinhamentos horizontais e verticais devem ser definidos no momento da aplicação.

Recomendamos o alinhamento à esquerda e acima (align top) para textos em geral (principalmente parágrafos e títulos).

Tipos de estilos de texto

Os estilos são calculados para direcionar o conteúdo, dar ênfase e trazer hieranquia. Os estilos juntamente com os espaçamentos devem guiar o usuário criando uma linha de leitura que deve ser cuidadosa e equilibrada.

Na library do Figma, utilizamos a unidade pixels, mas no Design System o tamanho da tipografia é definido em rem.

Display

<h1 class="title is-display">Display</h1>

Como usar

Utilizado para textos que devem ter destaque, mas não são semanticamente mais importantes que os títulos. Ex.: banners de marketing. O estado focus é usado apenas para dar destaque a algumas palavras.

Title 1

<h1 class="title is-1">Title 1 </h1>

Como usar

Utilizado no título principal da página. Deve existir apenas um por página. O estado focus é usado apenas para dar destaque a algumas palavras.

Title 2

<h1 class="title is-2">Title 2 </h1>

Como usar

Utilizado em subtítulos de nível secundário. O estado focus é usado apenas para dar destaque a algumas palavras.

Body text

<p class="has-text-body">Body text</p>

Como usar

Usado em parágrafos, tabelas e etiquetas em checkboxes e radio buttons. O estado focus é aplicado apenas para dar destaque a algumas palavras. Pode ser utilizado com o token is-italic para destacar palavras em outros idiomas.

Caption

<span class="has-text-caption">Caption</span>

Como usar

Textos que tenham uma característica secundária comparado ao Body text. Badges, tags, tooltips e hint box. O estado focus é aplicado apenas para dar destaque a algumas palavras.

Small text

<span class="has-text-caption">Small text</span>

Como usar

Usado em helper text e mensagens de erro em campos de formulário. O estado focus é aplicado para dar ênfase.

Os estilos de texto seguem um linha hierárquica para todos os tipos de experiências. Já o peso equilíbra a estrutura dos tipos. Podem dar ênfase, foco e diferenciar as opções dispostas ao usuário. A imagem abaixo mostra a hierarquia distribuída entre escala e peso das fontes.

O uso da escala está diretamente ligado ao peso da fonte. Por exemplo, o Title Display tem peso Light e o Title 3 peso Medium. Lado a lado, ambos aparentam ter as mesmas configurações.