Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the acf domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/u810915952/domains/romulobrasil.com/public_html/wp-includes/functions.php on line 6121
Tipografia Web: Usando fontes do próprio sistema na UI Web Design - Rômulo Brasil

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

• Publicado em: setembro 23, 2016

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.