Nessa aula, abordamos um dos principais fundamentos do nosso design system:A tipografia. Destacamos a importância de definir todas as propriedades textuais a partir da tipografia escolhida para o projeto. No nosso caso, optamos pela fonteArchivo, e eu compartilhei com vocês algumas fontes para inspiração e locais para explorar diferentes tipografias. Discutimos a relevância de auditar a tipografia existente em um produto no mercado ou em desenvolvimento, e mencionei a necessidade de testar novas tipografias antes de integrá-las ao design system. Além disso, apresentei o conceito de fontes variáveis, que permitem ajustar o peso da fonte através de um valor variável, o que pode ser benéfico para a otimização do projeto. NoGoogle Fonts, que é uma excelente fonte para explorar tipografias, sugeri que vocês busquem fontes com um número significativo de estilos, usando o filtro de propriedades para encontrar opções com pelo menos oito estilos. Também mencionei que muitas fontes do Google são variáveis e que, no futuro, poderemos revisitar esse conceito à medida que ele se tornar mais padrão. Expliquei a importância de a tipografia estar alinhada com a estética do design, a marca e o produto, e que normalmente limitamos o uso a no máximo três tipografias, sendo idealmente duas. Para explorar a combinação de tipografias, conhecida como Font Pairing, deixei links para recursos que ajudam a encontrar combinações harmoniosas. Mostrei como acessar e escolher tipografias diretamente no Figma, e adiantei que nas próximas aulas vamos escalar a tipografia escolhida, definir a altura da linha para estabelecer um ritmo vertical e testar os estilos no design. Enfatizei a importância de ter flexibilidade ao escalar a tipografia e de testar os tamanhos para ver quais serão efetivamente utilizados no design. Links da aula: - https://fonts.google.com/ - https://www.fontpair.co/ - [](https://www.fontpair.co/)https://www.figma.com/google-fonts/
Data de lançamento
21/04/2025
Duração
Legendas
Português [PT-BR]
Tags
tipografia, design, fontes, GoogleFonts, FontPairing
Title Example
Message Example