font stack de sistema
A font stack de sistema mais usada na web é -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif: sete nomes que cobrem macOS, Windows, Android e um fallback genérico final. Esse visualizador aplica a stack completa ao seu texto e mostra, sem baixar nenhum arquivo de fonte, qual entrada realmente respondeu no seu sistema operacional.
Nenhuma dessas fontes é baixada pela rede: todas já existem no disco do usuário, então o texto aparece no primeiro paint sem o atraso de FOIT ou FOUT típico de fontes web carregadas por @font-face.
Ao remover -apple-system e Roboto da lista, este teste força macOS e Android a caírem em Arial, o fallback universal, o que revela visualmente a diferença de largura média de caractere entre a tipografia nativa e a de segurança.
Como nenhuma instalação real tem uma fonte chamada "Fonte Inexistente 2026", o navegador pula direto para o genérico sans-serif, que no Chrome do Windows normalmente resolve para Arial e no Safari do macOS para Helvetica.
Porque fontes locais dependem do sistema operacional, da instalação do usuário e do suporte a glifos. Se a família principal não existir no aparelho, o navegador usa o fallback e a aparência muda.
Porque -apple-system sozinho não funcionava no Chrome para macOS antes de 2016: o motor Blink exigia o nome BlinkMacSystemFont para acionar a mesma fonte San Francisco que o Safari já reconhecia com -apple-system, então manter os dois garante compatibilidade entre navegadores no mesmo sistema operacional.
Não: toda fonte listada na stack de sistema já existe no computador ou celular do visitante, então o preview só aplica a propriedade CSS font-family e deixa o navegador escolher entre as fontes instaladas, sem nenhuma requisição de rede nem custo de download.
Arial funciona como a última fonte nomeada porque está presente em praticamente todo sistema operacional desktop desde o Windows 3.1 dos anos 1990, o que a torna um fallback mais previsível que confiar direto na palavra-chave genérica sans-serif, cuja fonte final varia de navegador para navegador.
Sim: como cada sistema operacional resolve para a fonte de interface que o usuário já vê no dia a dia, o texto herda o hinting e o espaçamento otimizados por aquele fabricante para telas de baixa e alta densidade, o que costuma render legibilidade igual ou superior à de uma fonte web carregada externamente.
font-family: Inter, sans-serif;
font-size: 48px;
font-weight: 500;
font-style: normal;
letter-spacing: 0px;O texto e a família são renderizados localmente no navegador.