Stoa 63 / Tipografia em Elementos de UI
Uma dica prática de como melhorar seus componentes de interface e evitar o gigantismo.
Componentes de UI precisam de menos variações tipográficas que você imagina.
Vejo muitos designers, especialmente os iniciantes, exagerando nos tamanhos de texto na hora de criar componentes. Na maioria das vezes é necessário apenas 2 ou 3 estilos para criar uma variedade enorme de elementos dentro de uma biblioteca.
No exemplo acima, todos os componentes foram criados utilizando apenas 3 tamanhos de texto: 16px, 14px e 12px.
Os títulos, naturalmente, recebem o tamanho de 16px para enfatizar a hierarquia. Os subtítulos, labels, placeholders e outros textos auxiliares recebem o tamanho de 14px. Já os textos das tags, botões e outros elementos menores recebem o tamanho de 12px.
Quando usar tamanhos maiores
Mesmo que os componentes tenham poucas variações de tamanho, ainda é necessário ter uma escala tipográfica com mais tamanhos para que seja possível reforçar a hierarquia em páginas e outras estruturas.
Em um dashboard, por exemplo, precisamos de tamanhos maiores para servir de título da seção ou para os números dentro de alguns componentes. No exemplo acima, os números possuem 30px para reforçar a importância desse elemento na página.
No total, o shadcn possui 10 variáveis de tamanhos para acomodar todas as situações que um design system robusto pode apresentar, mas isso não significa que seu projeto também precisará de todos eles.
--text-xs: .75rem; (12px)
--text-sm: .875rem; (14px)
--text-base: 1rem; (16px)
--text-lg: 1.125rem; (18px)
--text-xl: 1.25rem; (20px)
--text-2xl: 1.5rem; (24px)
--text-3xl: 1.875rem; (30px)
--text-4xl: 2.25rem; (36px)
--text-5xl: 3rem; (48px)
--text-7xl: 4.5rem; (72px)Caso você esteja se perguntando como os valores em rem funcionam, basta definir um tamanho base e depois multiplicar o fator por ele (16px * 1.125 = 18px).
Evite o gigantismo
O exemplo a seguir é um ótimo caso do que não fazer.
Em um mesmo componente podemos contar facilmente 5 ou mais tamanhos diferentes.
Isso torna o componente difícil de ler e, quando pareado com outros componentes, reforça a inconsistência do sistema de design.
Sendo assim, na próxima vez que você for desenhar um app mobile ou desktop, tente usar os tamanhos de maneira intencional sem exagerar na quantidade de variações. Você perceberá que seus componentes ficarão mais consistentes e visualmente melhores.
Outra coisa que influencia a qualidade dos seus componentes é a variação de cores para os textos e outros elementos. Mas isso é assunto para outra edição.
Precisa de uma ajuda extra?
Se você tem dificuldade de avaliar suas próprias competências ou precisa de alguém para te incentivar/cobrar evolução, talvez um mentor possa te ajudar.
Dê uma olhada na minha mentoria para te ajudar nessa jornada.