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.