Como diminuímos nossa quantidade de fontes tipográficas, visando padronização e acessibilidade .
Quando estamos trabalhando com Design Systems (DS), sempre temos novas implementações e melhorias para os designers e desenvolvedores, e a paleta tipográfica não escapa disso.
Entretanto quando falamos de tokens é necessário pensar de forma mais estratégica, principalmente se o sistema já é utilizado no código e possui telas legado.
Gostaria de compartilhar a mudança que fiz em tokens tipográficos no último DS que cuidei.
Identificação da melhoria
Havíamos um ponto de melhoria em nossa antiga paleta:
Tamanhos e pesos não estavam atrelados a funções hierárquicas.
Isso gera uma maior dificuldade de padronização de tamanhos de fontes utilizadas em todo o aplicativo.
Tínhamos um total de 33 variações englobando os pesos regular, medium e bold. Seus nomes estavam conectados a tamanho, como por exemplo $font-xlg-medium, o que gerava uma confusão ao entender onde esse tamanho poderia ser utilizado e questionamentos constantes de: “Qual nosso tamanho e peso de título?”, “Temos um padrão de tamanhos?”
Aproveitando que iria mexer no token, também revisei o espaçamento entre caracteres e linhas para melhorar a leitura de textos para os usuários finais.
Essas mudanças pretendem deixar a fonte dinâmica em todas as plataformas para respeitar o tamanho de fonte que o usuário utiliza em seu celular, englobando a acessibilidade.
Benchmarking
Foram analisados oito Design Systems, entre eles: Wise, Human Interface Guideline (Apple), Material.io (Google) e Alma (Dasa).
Conseguimos observar que todos fazem aplicação de fontes com as hierarquias visuais de texto — Title 1, Title 2… Dessas referências, somente o Carbon a princípio não faz dessa forma.
Este benchmarking resultou em duas tabelas de dados: Tratativa de nomes utilizados e Variações de tamanhos.
Tratativa de nomes utilizados
Para conseguirmos utilizar como base e criar nossa própria nomenclatura.
Variações de tamanhos
Entender se estamos utilizando os padrões do mercado para tamanhos de fontes.
Estudos
Uso da paleta atual
Para entender quais os tamanhos e pesos que mais utilizávamos de fontes, foram mapeados os textos dos 5 fluxos mais recentes. Como conclusão, das 33 fontes que tínhamos, 11 são as mais utilizadas e 9 possuem algum tipo de uso. Essa análise teve maior mapeamento para mobile.
Altura de linha*
Consiste em um respiro entre as linhas. Essa medida é importante para moldar a aparência dos parágrafos e está diretamente relacionada a uma boa leitura.
Ajuste óptico*
Conseguimos ajustar o “espaçamento entre caracteres”, o que facilita na leitura. Nossos textos estavam com um espaçamento muito grande, ocupando mais linhas e gerando estranheza na leitura. Cada tipografia tem valores distintos para o ajuste óptico.
* Tanto a altura de linha como o ajuste óptico envolvem muitos testes até ficar “confortável” visualmente. Até mesmo com boas práticas que vemos na internet, fiz uma série de testes, sem pressa, para não acostumar os olhos em um caminho específico.
Fonte dinâmica
A fonte dinâmica é uma história a parte, vou passar de forma rápida aqui, mas com certeza é necessário um texto focado só nisso.
Segundo o artigo do Airbnb sobre fonte dinâmica (super indico), é dito:
30% das pessoas que usam o aplicativo possuem um tamanho de fonte preferido que não é o padrão do sistema.
Atualmente, pessoas que precisam de fonte ampliada ou que preferem menor do que o padrão, não conseguem navegar no aplicativo de forma confortável e personalizada, eliminando possíveis compradores, por não conseguirem enxergar ou pelos textos estarem cortados.
Mapeando cada plataforma, percebemos que o aplicativo versão iOS e site não possuem fonte dinâmica. Enquanto o aplicativo Android possui, mas não é aplicado de forma adequada.
Nisso, começamos a investigação da implementação para conseguir montar um roadmap para fazermos essa mudança no futuro, considerando dificuldades e desafios.
Alinhamento técnico multiplataforma
É interessante deixar destacado que todo esse processo foi acompanhado por desenvolvedores, com alinhamentos e reuniões para entender exatamente a visão deles.
Quando falamos de um Design System, é essencial ter o cenário técnico sempre alinhado, porque caso contrário o fluxo de trabalho pode ficar travado e com estudos rasos.
Aplicação
Ao final chegamos em 17 variações, sendo separadas por Display, Title, Body, Paragraph e Detail. Cada uma com sua descrição e exemplo de onde é utilizada em alguma parte específica do nosso fluxo.
Obs: nas imagens foram ocultadas algumas informações.
Display (3 opções)
Como o maior texto na tela, estilos de Display são reservados para textos ou números curtos e importantes. Eles funcionam melhor em telas grandes.
- $font-display-xlarge$font-display-large$font-display-default
Title (6 opções)
Títulos são mais adequados para textos curtos e de grande destaque em telas menores. Esses estilos podem ser bons para marcar trechos principais de texto ou regiões importantes do conteúdo.
- $font-title-large-highlight$font-title-large$font-title-default-highlight$font-title-default$font-title-small-highlight$font-title-small
Body (5 opções)
Estilos de body são estilos utilitários, usados para elementos como o texto dentro de componentes ou para texto muito pequeno.
- $font-body-default-highlight$font-body-default$font-body-small-highlight$font-body-small$font-body-xsmall
Paragraph (1 opção)
Estilos de corpo de texto (paragraph) são usados para passagens mais longas de texto no seu produto.
$font-paragraph-default
Detail (2 opções)
Estilo de detalhes de texto (Detail) são usados para legendas, notas de rodapé e detalhes interessantes de serem destacados para o usuário.
- $font-detail-default$font-detail-small
Proposta final
Iniciamos o processo de transição para essa nova paleta e vamos esperar alguns meses para ver como funciona a adaptação. No meio disso há uma grande imersão sobre o assunto com workshop e explicações para a galera colocar em prática.
Com certeza pode aparecer novos tamanhos/pesos que não foram mapeados, porque querendo ou não, o Design System é um organismo vivo, sempre com melhorias.
Após bem aplicada a paleta no código e no design está mapeada a aplicação da fonte dinâmica!
Interessante ressaltar que durante essas mudanças o squad de Design System precisa estar dando o suporte nas mudanças e participando de war rooms para padronizar e auxiliar os diversos times.
Algo muito importante de ressaltar é que cada Design System é diferente, tendo suas especificidades, portanto é muito importante olhar de outras empresas como referência, mas veja o que faz sentido no contexto do time, tanto no lado de design, como no de tecnologia! Espero que tenha ajudado. ;)
Referências
- Design System WiseDesign System da Apple — Human Interface GuidelineDesign System Material.ioDesign System Dasa — AlmaDesign System Morning StarDesign System Gympass — YogaDesign System CarbonDesign System UaiSupporting Dynamic Type at AirbnbAjuste óptico no design: Precisão vs. PercepçãoHow to use line height and letter spacing effectively in web design
Paleta tipográfica e relação hierárquica was originally published in UX Collective 🇧🇷 on Medium, where people are continuing the conversation by highlighting and responding to this story.
