Pular para o conte√ļdo principal

Estilos

Vis√£o geral#

Os estilos tipogr√°ficos s√£o estilos pr√©-definidos que ajudam a usar a tipografia de forma consistente, trazendo hierarquia visual para as informa√ß√Ķes textuais da interface.

Tipos#

Os estilos tipogr√°ficos previstos atualmente no Animalia contemplam Heading, Body e Code.

Heading#

Os Headings (cabe√ßalhos ou t√≠tulos) s√£o usados para criar n√≠veis de hierarquia entre os conte√ļdos de uma p√°gina.

Os usu√°rios costumam "scannear" o conte√ļdo de uma p√°gina pelos t√≠tulos, ent√£o √© importante us√°-los corretamente para facilitar a compreens√£o de como a p√°gina est√° organizada. Al√©m disso, os mecanismos de pesquisa e leitores de tela utilizam esses par√Ęmetros para identificar a estrutura e o conte√ļdo das p√°ginas.

S√£o 6 n√≠veis de Heading, que seguem uma hierarquia de relev√Ęncia.

Listagem dos 6 níveis de heading indo sendo 1 o maior e 6 o menor

Body#

√Č o estilo padr√£o da interface, que engloba todos os textos que n√£o recebam um tratamento espec√≠fico ‚Äď sejam blocos de texto ou textos dentro de componente.

Code#

√Č o estilo utilizado quando √© necess√°rio especificar um conte√ļdo como sendo um c√≥digo. Esse estilo deve ser usado para destacar no meio de um texto que aquele o trecho ou palavra se trata de um c√≥digo.


Anatomia#

Os estilos Heading e Body aplicam um grupo de tokens pré-definidos nos textos e, no caso do Code, há também um background que recebe uma cor.

Três estilo lado a lado, heading, body, e code

1. Text

2. Background

Os estilos tipográficos do Animalia foram construídos utilizando os design tokens, mas estes estilos podem ser alterados e estilizados de acordo com a necessidade de cada contexto. Para isso, você pode consultar a lista completa de design tokens de tipografia.

Estilo heading com a listagem dos tokens utilizadosEstilo body com a listagem dos tokens utilizadosEstilo code com a listagem dos tokens utilizados

Boas pr√°ticas#

Os estilos tipogr√°ficos foram projetados buscando atender os requisitos das Diretrizes de Acessibilidade para Conte√ļdo Web (WCAG) 2.1. Tamb√©m foram estruturadas padr√Ķes de usabilidade para auxiliar na utiliza√ß√£o e garantir uma boa experi√™ncia para os usu√°rios. Por isso, √© muito importante que, ao aplicar esse componente, o propriet√°rio do conte√ļdo leve em considera√ß√£o alguns crit√©rios e pr√°ticas:

Arquitetura da Informação (Hierarquia)#

  • Toda p√°gina deve conter um t√≠tulo, que descreva com clareza o assunto ou finalidade (WCAG 2.4.2 - Page Titled)
  • Mantenha a hierarquia das informa√ß√Ķes de formar clara e compreens√≠vel, n√£o apenas visualmente, mas tamb√©m para quem ouve o conte√ļdo. Os usu√°rios que enxergam percebem a estrutura e os relacionamentos por meio de v√°rias pistas visuais, como o peso dado aos t√≠tulos das se√ß√Ķes (WCAG 1.3.1 - Info and relationships)
  • Use os t√≠tulos das se√ß√Ķes para organizar o conte√ļdo e facilitar a identifica√ß√£o das √°reas (WCAG 2.4.10 - Section Heading)
  • N√£o use Headings apenas para tornar o texto grande ou em bold. Eles estruturam o conte√ļdo e s√£o utilizados por tecnologias assistivas para identificar corretamente os elementos da interface e seus n√≠veis. (WCAG 4.1.2 - Name, role, value)
note

N√£o se esque√ßa que os espa√ßos tamb√©m ajudam a organizar o conte√ļdo e a hierarquia na interface, separando ou agrupando os assuntos.

Três títulos com níveis de hierarquia diferentesFazer

Utilize os títulos com os níveis corretos para criar hierarquia e detalhamento do assunto.

Três títulos sem diferenciar níveis de hierarquiaNão fazer

Não utilize os mesmos níveis para todos os títulos, pois isso dificulta o entendimento da estrutura da página.

  • Os t√≠tulos devem descrever sem ambiguidade a finalidade dos conte√ļdos que est√£o relacionados. N√£o precisam ser longos. Uma palavra pode ser suficiente se fornecer uma pista apropriada para localizar e navegar pelo conte√ļdo. (WCAG 2.4.6 - Headings and Labels)

Visual#

  • N√£o utilize cores com baixo contraste entre o fundo e o texto, pois isso dificulta o entendimento do conte√ļdo. √Č poss√≠vel conferir se o contraste est√° adequado e atingindo o valor de 7:1 em um Contrast Checker (WCAG 1.4.6: Contrast)
  • Utilize alinhamento de texto √† esquerda ou √† direita, quando pertinente ao contexto. Nunca utilize texto justificado, pois gera espa√ßamento desigual entre as palavras. (WCAG 1.4.8 - Apresenta√ß√£o visual)
Bloco de texto com alinhamento à esquerdaFazer

Use alinhamento de texto √† esquerda ou √† direita para garantir a regularidade independente do conte√ļdo ou largura do bloco de texto.

Bloco de texto com alinhamento justificado e espaços grandes entre as palavrasNão fazer

N√£o use alinhamento justificado pois ele adiciona espa√ßos irregulares entre as palavras para faz√™-lo ocupar toda a largura do bloco, o que varia muito dependendo do conte√ļdo e largura do dispositivo.

Conforto de leitura#

  • N√£o utilize blocos de texto muito largos, pois linhas longas dificultam a leitura e exigem que pessoas que utilizam zoom precisem rolar a p√°gina horizontalmente para ler uma linha de texto. A recomenda√ß√£o √© ter uma largura de linha de at√© 80 caracteres, para comportar todo o texto na tela mesmo com at√© 200% de zoom;
  • Em blocos de texto, utilize um espa√ßamento entrelinhas (line height) de pelo menos 1,5x o tamanho da fonte, ou seja 150%. (WCAG 1.4.8 - Apresenta√ß√£o visual, 1.4.12 - Espa√ßamento de texto)
Texto com lineheight adequado, de 150% o tamanho da fonteFazer

Use entrelinha (line height) adequada ao tamanho do texto. Adotar medidas relativas como porcentagem, facilitam essa utilização.

Texto com lineheight inadequado, de 120% o tamanho da fonteN√£o fazer

Não use um line height estreito, pois torna a leitura mais difícil e as linhas tendem a se embaralhar.

Acessibilidade tratada nos estilos do Animalia#

Algumas diretrizes de acessibilidade já são tratadas no pacote de definição de estilos tipográficos. São elas:

  • Os estilos de cabe√ßalho (Heading) foram desenvolvidos de modo a facilitar a cria√ß√£o de hierarquias ao se utilizar os controles padr√£o do HTML, que permitem a identifica√ß√£o do mesmo na interface por tecnologias assistivas. (WCAG 4.1.2: Name, Role, Value)