Tipografia Web: Usando fontes do próprio sistema na UI Web Design

Estava querendo a bastante tempo mudar o layout do meu site, pois estava cagado e gostaria de deixar ele mais leve e mais clean em todos os sentidos, então primeiramente fui atrás de fontes bacanas para compor o design clean em que eu estava buscando, toda a vida do meu site foi a fonte Bariol (qual eu amo de paixão), porém fiquei na dúvida em usar a Poppins (nova queridinha de uma galera) ou Myriad e nem são tão cleans assim.

Bom, aí pensando em performance, vou carregar a fontes novamente e não tem uma mudança em qual eu estava querendo e então foi aí que eu caí no artigo da Smashing Magazine falando em um guia de como usar as fontes do próprio sistema na UI Web Design e foi aí que minha cabeça explodiu, é tão obvio. Tirando o MacOS, os sistemas tinham umas fontes meio bizarras, mas agora elas estão bem modernas e isso cai em um modelo bem interessante, de como devemos usar as tipografias em nossos UI e trazendo uma nova alternativa às tipografias web.

Quem nunca chegou na “padaria” do Google Fonts e foi na “seção” Lato ou na Roboto e pediu pro “padeiro”: – Oh, me vê um Roboto regular, medium e a bold e de quebra bota também a light e a thin, mas não se esqueça das italics que irei levar também. Pelo menos isso acontecia em meus projetos antigos e carregava tudo na tag link, dando abertura para mais uma requisição no servidor e o Google Fonts ainda é camarada e avisa o tempo de carregamento das mesmas. Uma das soluções é fazer o download e carregar via web fonts, mas mesmo assim será em cima de requisições junto ao servidor.

As fontes nativas dos sistemas estão melhorando a cada atualização e está sendo incrível, tipo, a Google tem melhorado muito com a Roboto (já usei em vários projetos meus) e que vem sendo atualizado regularmente, a Mozilla construiu a Fira Sans que é bem interessante e temos a Microsoft que reiniciou a discursão sobre fontes UI do sistema com seu Windows Phone (Metro Desing) e não podemos deixar a Apple de fora pois sempre foi uma preocupação o UI dos seus sistemas.

Essa ideia já vem se espalhando pelo mundo da web, alguns sites vem com essa filosofia tipo, o Medium. Carregar a tipografia em qual o usuário está acostumando a visualizar todos os dias é bem interessante, sem falar que você está usando uma fonte moderna, bonita e com zero latência (né Google Fonts).

Agora uma coisa é valido debater antes de implementar a fonte do sistema no seu UI (User Interface), que é que todas têm variações de peso e tamanho e cada uma possui sua particularidade, então tenha isso em mente antes de desenhar a sua UI e quando for implementar no CSS para não quebrar em algum sistema.

Bom, e como isso é implementado no CSS?

Tem varias abordagens de como fazer isso, mas a mais interessante é essa:

 font-family: -apple-system, BlinkMacSystemFont, 
    "Segoe UI", "Roboto", "Oxygen", 
    "Ubuntu", "Cantarell", "Fira Sans", 
    "Droid Sans", "Helvetica Neue", sans-serif;

Pelo que eu pude perceber inspecionando alguns sites, muitos usam essa abordagem e me parece ter menos problema, pois mantém uma lista e uma ordem. Talvez fontes de interface do usuário do sistema não vai mudar tão frequentemente como eles fizeram nos últimos anos, mas em qualquer caso, este não é à prova de futuro.