Facelift da tipografia no Letras: Pequena atualização, grande impacto

Atualizei a tipografia do Letras para modernizar as Foundations do produto, migrando pra Inter sem perder a familiaridade com a experiência nativa do usuário.

---

---

Realizamos um Facelift no Letras, concentrando nossos esforços na atualização da tipografia do site para aprimorar as Foundations do produto. Nossa meta era realizar uma mudança sutil, mas impactante, focando em três áreas principais.

• Simplificar a variedade tipográfica, reduzindo a quantidade de famílias e variações.
• Revisar as escolhas de fontes em busca de modernidade e usabilidade.
• Estabelecer consistência visual entre o Letras e o Letras Academy.

Nosso público-alvo, composto por mais de 40 milhões de usuários que acessam o site mensalmente, foi o foco central desse projeto.

Identificamos 10 typefaces e 150 font styles utilizados ao longo de duas décadas na evolução do produto. Conduzimos benchmarks em várias categorias, como sites de música, redes sociais, sites visualmente modernos, entre outros, resultando em uma extensa lista de possíveis tipografias.

Para filtrar as opções, utilizamos critérios específicos, incluindo legibilidade, versatilidade linguística, modernidade, adaptabilidade, harmonia com outros elementos de design, consistência de estilo, distinção, identificação e neutralidade.

Esses critérios foram priorizados em uma metodologia MoSCoW, orientando nosso processo de seleção rigoroso, que culminou na escolha final de duas tipografias: Roboto e Inter.

Contamos com a valiosa contribuição do time de Frontend, que aprofundou as pesquisas sobre as melhores práticas para renderizar as tipografias, otimizando a performance do site. Isso incluiu investigações sobre melhor carregamento pela origem da tipografia, identificação de caracteres desnecessários e remoção deles, e outras estratégias para garantir o carregamento mais eficiente do site.

Após refinamento e discussões, oficializamos a escolha da fonte Inter para o layout principal do produto, complementada por fontes de sistema em conteúdos extensos, como letras de músicas e artigos do blog.

O resultado final foi uma pequena atualização no produto, mas com um impacto visual expressivo. A fonte Inter, um upgrade da Roboto e semelhante à SF Pro, proporcionou uma modernização que se alinha à experiência nativa do usuário, alcançando um equilíbrio entre familiaridade e modernidade.