Construção

95% das informações na web está em linguagem escrita – Oliver Reichensteisn

Sabendo que a informação textual compõe grande parte do meio digital, fica evidente a importância da Tipografia, pois esta é a disciplina que atua diretamente na modelagem dessa informação escrita.

Introdução

Na estrutura do Animalia DS, há variáveis tipográficas que são comuns à todas as marcas (global tokens), como line-height. E existem também as que se diferenciam de acordo com a marca (brand tokens), como por exemplo font-family.

Há ainda variáveis que estão na intersecção entre as duas camadas, como é o caso do font-size e font-weight. Isto porque possuem os tokens básicos na camada global, mas também possuem previstas na camada de brand algumas variações para atender a cenários específicos – que ficarão disponíveis apenas para a marca que tiver esta necessidade.

Assim, conseguimos ter uma estrutura geral, respeitando as particularidades e necessidades de cada marca ou produto dentro do Design System.

Font-family: família tipográfica

Família tipográfica, ou font-family, é o nome que se dá ao conjunto de fontes que apresentam as mesmas características estilísticas, mas variações de espessuras, larguras, etc.

A família tipográfica principal utilizada no Animalia DS é a Inter, que faz parte do catálogo do Google Fonts.

No Design System, as famílias tipográficas ficam na camada da marca e a estrutura atual prevê a utilização de até 3 famílias. Isto porque há três grupos principais onde pode haver variação: títulos, textos em geral e amostras de código.

• --font-family-heading, para títulos e chamadas
• --font-family-text, para textos em geral
• --font-family-code, para trechos de código em documentação técnica

Não existe a obrigatoriedade de se trabalhar com famílias diferentes – alguns cenários inclusive utilizam a mesma família tipográfica para títulos e textos, por exemplo. Mas é importante tratar de forma separada para o caso de haver uma mudança futura.

Font-size: tamanhos e escala

Font-size é o tamanho da fonte propriamente dito, podendo ser especificado em diferentes medidas, como pixel, ponto, rem, em.

Os tamanhos disponíveis no Animalia DS foram gerados a partir de uma escala modular que engloba de 10 a 96px. Porém, fica comum à todas as marcas (global) a progressão do 12 ao 48px. Os demais tamanhos podem ser adicionados à camada das marcas (brand) que apresentarem essa necessidade.

As ferramentas de design voltadas para interface utilizam pixel como unidade. Mas no desenvolvimento é importante considerar as medidas relativas, pois valores fixos podem prejudicar a acessibilidade.

A escala modular do Animalia DS

• O que é uma escala modular e por que precisamos de uma?

  Escala modular é uma maneira de se criar tamanhos de fontes, a partir de uma fórmula matemática.

  Adotar uma escala modular é interessante por permitir criar relações mais harmoniosas entre os tamanhos utilizados, além de tornar o processo de tomada de decisão consciente e menos arbitrário.

  Além disso, a progressão é gerada a partir de um número base, o que facilita o uso de medidas relativas (medidas em rem, ao invés de pixels), o que é um ponto bastante importante para acessibilidade.

  Principais vantagens:

  • Proporções harmoniosas
  • Diretriz racional para tomada de decisão
  • Caso algum cenário tenha a necessidade de adicionar mais variações, a escala já dá o direcionamento para tal
  • Utilização de medidas em números relativos (rem, em)

A escala modular adotada no Animalia DS é baseada na 1.250 - Major Third , por ter uma progressão suave entre os estágios, ao mesmo tempo que cria uma boa hierarquia. Tem como base 1 rem = 16px, por ser o tamanho padrão nos navegadores mais utilizados. Vale ressaltar que este valor não ficará fixo mas sim iremos assumir o font-size do navegador, pois assim damos liberdade para que o usuário ajuste o tamanho da fonte de acordo com sua preferência ou necessidade.

16 * 1,250 = 20 * 1,250 = 25 * 1,250 = 31,25 * 1,250 = 39,06 ...

Entretanto, como os valores nessa escala vão progredindo em números quebrados, foi feita uma pequena adequação para facilitar o uso, com a seguinte regra:

• acima de 16, o valor em pixel foi ajustado para o número inteiro (múltiplo de 4) mais próximo

Exemplo: 31,25→ 32

• abaixo de 16, o valor em pixel decresce de 2 em 2px

Font-weight: variações de pesos

Font-weight se refere às variações de peso/ intensidade da fonte dentro de uma mesma família. Essas variações às vezes aparecem identificadas como light, normal, bold, extrabold, etc; ou por meio de uma numeração padronizada (100 a 950), sendo que quando mais alto o número, mais grosso é o traço daquela versão.

Vale ressaltar que nem todas as famílias tipográficas possuem todas as variações. Isso não é um impeditivo, mas é algo que deve ser considerado ao se escolher uma família para uma marca ou projeto.

Dentro das variações possíveis, o Animalia DS possui alguns pesos que são comuns à todas as marcas (global tokens). Mas, caso exista a necessidade de trabalhar com outros pesos, estes serão incorporados e disponibilizados apenas para as marcas com esse cenário (brand tokens).

Assim, evita-se de sobrecarregar com variações que não estão sendo utilizadas, já que cada variação adicionada aumenta o tamanho do arquivo para download para o usuário.

Line-height: espaço entrelinhas

Line-height (altura de linha ou entrelinha) na web é o espaço adicionado acima e abaixo acima e abaixo dos caracteres.

Isto significa que uma fonte de 16px com entrelinha de 24px, terá 4px acima e abaixo. Essa medida é importante pois é ela quem molda a aparência dos parágrafos e está diretamente relacionada a uma boa leitura.

Uso em texto corrido

Para textos em geral, como parágrafos, legendas, etc, o uso de uma entrelinha adequada é essencial no conforto de leitura. Se o valor utilizado for muito justo ou muito espaçado, pode tornar a leitura mais difícil e cansativa.

Segundo a WCAG, todo conteúdo de texto precisa ter pelo menos 1.5x a altura do texto de entrelinha. Assim, se o texto possui 16px de tamanho, a entrelinha deve ser de pelo menos 24px, ou em porcentagens, no mínimo 150%.

Entretanto, essa medida está diretamente relacionada ao tamanho da fonte. Quanto menor o tamanho da fonte, maior precisa ser a entrelinha para garantir uma boa leitura.

Uso em componentes

Em componentes, a entrelinha perde sua função principal e passa a impactar na construção do componente em si e os espaços que o estruturam.

Nesses casos, há uma maior flexibilidade de uso e é preciso avaliar caso a caso, para aplicar a entrelinha mais adequada à necessidade.

Letter-Spacing: espaço entre caracteres

Letter-spacing é a propriedade que permite definir o espaçamento entre caracteres de texto. Somada à outras características – como a família utilizada, tamanho e peso – impacta diretamente o conforto na leitura.

Para atender aos diferentes contextos, o Animalia DS possui cinco valores positivos (mais espaçados) e cinco negativos (menos espaçados), além do automático (padrão da fonte).