---
title: Redesign do Google Fonts
authors: tableless
type: post
date: 2016-06-24
url: /reimaginando-o-google-fontes/
titulo_personalizado:
  - 'Um pouco sobre o redesign do <strong>Google Fonts</strong>'
categories:
  - Browsers
  - Destaques
  - Traduções

---
O novo [Google Fonts][1] torna mais fácil do que nunca para ver nossa coleção de fontes de designer de código aberto e aprender mais sobre as pessoas que os fazem.

O Google Fonts foi [lançado pela primeira vez em 2010][2] como uma iniciativa de engenharia para mover a web para frente e torná-lo mais rápido, utilizando diferentes tecnologias como cross-site de armazenamento em cache de fontes e de compressão inteligentes, criando uma maneira simples de adicionar variedade tipográfico para os sites. O Google originalmente lançou 14 fontes opensource. Hoje, o Google Fonts são vistos mais de 15 bilhões de vezes na web mais por dia em mais de 135 línguas em todo o mundo. Nos últimos seis anos, novas fontes surgiram, acrescentando dimensão e amplitude para o diretório. E agora eles criaram um design que se adapta através diferentes tamanhos de tela e dispositivos, redesenhando o site inteiro.



Um dos nossos principais objetivos com o redesenho era que o Google Fonts envolvesse mais visualmente. O design foi feito de uma forma dinâmica e divertida para as pessoas a explorarem cada vez mais famílias de fontes. Eles adicionaram uma camada de interação e experimentação, incluindo informações sobre a tipografia, design e análise para cada fonte, permite aos usuários a tetarem se conectar com a tipografia em um nível pessoal.

Para o novo logotipo, eles atualizaram a font para uma letra F maiúscula sem serifa, puxando um vermelho brilhante da paleta do Material Design.

<img src="https://g-design.storage.googleapis.com/production/v6/assets/renditions/fonts-logo-1240.png" width="1240" height="620" class="alignnone" />

A flexibilidade do [sistema de grid do Material Design][3] permite que diferentes tipos de conteúdo de página e composições vivam harmoniosamente em todo o site, mantendo um ritmo visual consistente. Por exemplo, módulos como pares de fontes nas páginas exigem mais informações sobre a font em si, por isso o grid de quatro colunas para ajustar essas informações; as [coleções][4], por outro lado, só precisam de um grid de três colunas.

<img src="https://g-design.storage.googleapis.com/production/v6/assets/renditions/fonts-grid-1240.png" width="1240" height="725" class="alignnone" />

Para otimizar a experiência de navegação, mantendo características básicas como a buscar, filtrar e editar, o Google projetou a interface para se adaptar aos fluxos de diferentes usuário. O painel de pesquisa à direita permite que as pessoas explorem melhor o recurso &#8220;Pesquisa e Filtros&#8221; que pode ser fechado com um clique para voltar a navegação em tela cheia.

<img src="https://g-design.storage.googleapis.com/production/v6/assets/renditions/fonts-ui-container-1240.png" width="1240" height="762" class="alignnone" />

Google Fonts já é um dos serviços mais populares do Google, por isso era importante que em trazer o Material Design para o site.

[Post completo da designer que participou projeto][5].

 [1]: https://fonts.google.com/
 [2]: https://googlecode.blogspot.com/2010/05/introducing-google-font-api-google-font.html
 [3]: https://material.google.com/components/grid-lists.html
 [4]: https://fonts.google.com/featured
 [5]: https://design.google.com/articles/reimagining-google-fonts/