Visualizador de fontes do sistema
Digite um texto e compare-o nas fontes de sistema mais difundidas: ajuste o tamanho e o peso e copie uma pilha de fontes CSS pronta para colar na sua folha de estilos.
Por que usar fontes do sistema?
As fontes do sistema já estão instaladas nos dispositivos dos seus visitantes, então a página não precisa baixar nenhum arquivo de fonte. O texto aparece na hora, sem o incômodo “flash de texto sem estilo” (FOUT) que as fontes web costumam causar. Por isso o GitHub, o Booking.com e muitos outros sites grandes usam pilhas de fontes do sistema. Um detalhe: nem toda fonte existe em todo dispositivo. Impact e Comic Sans MS, por exemplo, não existem em muitos celulares Android, onde o navegador recorre à fonte genérica indicada no fim da pilha.
Como usar a pilha CSS copiada?
Cole a pilha na propriedade font-family do seu CSS, por exemplo body { font-family: Georgia, "Times New Roman", serif; }. A ordem importa: o navegador testa as fontes da esquerda para a direita e usa a primeira disponível; o último valor (serif, sans-serif ou monospace) é a rede de segurança que garante um texto legível em qualquer situação. A pilha “system-ui” merece uma menção especial: ela mostra a fonte nativa da interface do dispositivo (San Francisco no Mac e no iPhone, Segoe UI no Windows, Roboto no Android), então o visual muda de um dispositivo para outro, e esse é justamente o ponto forte dela.