Recomendações para CSS font-family

• Se você criar um design na web confiando em um nome específico de fonte, ele pode quebrar dependendo da plataforma, da rede e das configurações de segurança; portanto, o font-family deve ser montado pressupondo um fallback de família genérica
• Para código, artwork e layouts que exigem representação monoespaçada, é indispensável incluir monospace; e, se quiser garantir a família desejada, também é mais seguro especificar serif e sans-serif
• Pilhas que listam muitos nomes de fontes que talvez existam localmente geralmente trazem pouco benefício, e os padrões de famílias genéricas do navegador podem até fazer uma escolha melhor
• Web fonts são mais lentas do que não usar web fonts e introduzem compromissos como falha de carregamento e font-display; por isso, usar a fonte padrão do usuário para conteúdo também é uma opção realista
• system-ui e ui-* têm forte caráter de texto curto de UI e podem não ser adequadas para conteúdo longo e suporte a idiomas; usá-las como substituto da fonte padrão para conteúdo é arriscado

---

Não confie em nomes de fontes

• Não existe uma fonte segura para web oferecida em comum por todas as principais plataformas, portanto não se deve presumir que um nome específico de fonte sempre funcionará
• Web fonts também não são uma solução garantida
  • Sub-recursos que não estejam embutidos inline podem falhar ao carregar por vários motivos de rede
  • Carregamento de fontes é uma área com preocupações de segurança, então pode ser bloqueado em alguns ambientes
  • O uBlock Origin tem um botão dedicado para desativar fontes remotas
  • O modo de economia de dados de alguns navegadores pode impedir o carregamento de fontes, e há a posição de que ele deveria impedir mesmo quando não impede
• Se o usuário não permitir que um site escolha suas próprias fontes, apenas as famílias genéricas funcionarão
• Em JavaScript, ao usar document.fonts.load("1em my-web-font"), a Promise retornada pode ser rejeitada
  • Ao longo de 6 anos, de 2020 a 2025, foram vistos cerca de 4 casos quebrados por esse problema, dos quais 2 ocorreram em 2025

Sempre especifique uma família de fallback

• Se precisar de texto monoespaçado, é obrigatório colocar monospace em font-family
  • A ausência de monospace não fica visível para muitos usuários, mas em alguns ambientes pode arruinar o layout ou a intenção da obra
  • Como exemplo, ASCII might fly?, de Adel Faure, no momento da escrita não incluía monospace, podendo aparecer em uma forma não monoespaçada
• Também é melhor incluir serif ou sans-serif se for necessário um fallback da família de fonte desejada
  • Ex.: font-family: Arial, sans-serif;
  • Ex.: font-family: Times New Roman, serif;
  • Se não incluir, a fonte padrão será usada; a fonte padrão pode ser serifada, mas também pode ser algo totalmente diferente

Reduza listas de fontes que talvez estejam instaladas

• Listar longamente fontes que talvez existam no sistema, como Arial, Helvetica, Helvetica Neue, Liberation Sans e Noto Sans, em geral não ajuda
• Em especial, considera-se que Arial nunca será uma escolha melhor que sans-serif
• sans-serif pode ser interpretada como uma fonte não pior do que as fontes especificadas, e há chance de uma fonte melhor ser escolhida
• Um exemplo real de declaração monoespaçada era uma lista excessivamente longa
  • font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif
  • Essa declaração é estritamente pior que font-family: monospace, monospace, e monospace pode ser interpretada como uma fonte não pior que essa lista
• Não é preciso proibir completamente fontes nomeadas que não sejam web fonts, mas no máximo uma costuma ser adequado
  • Georgia) e Times New Roman são ambas serifadas pertencentes às Core fonts for the Web, da Microsoft, mas têm características diferentes
  • Georgia é muito mais larga que Times New Roman; portanto, se esse traço for necessário para o estilo, font-family: Georgia, serif é uma escolha aceitável
• modernfontstacks.com e o repositório trazem ideias de seleção de fontes por plataforma
  • Porém, prescrevem fontes nomeadas em excesso, e a avaliação é que muitas delas deveriam ser removidas
  • O tratamento de Courier New está muito errado, e a imagem parece ter sido feita com Courier do macOS

A opção de usar apenas famílias genéricas

• Se você reduziu a listagem de fontes instaladas localmente, também vale reavaliar se web fonts são mesmo necessárias
• Web fonts são mais lentas do que a ausência de web fonts e podem criar problemas de carregamento
  • É por isso que existe font-display
  • Mas, em vez de lidar com compromissos entre períodos de block e swap, redesenho e reflow, também é possível simplesmente usar as fontes que o usuário já tem
• Também é possível escolher apenas a família genérica monospace
  • No passado, o padrão de monospace não era bom, e em especial Courier New#Courier_New), da Microsoft, foi mal digitalizada, parecendo na prática ter peso 200–250, e não 400
  • Depois, a Apple introduziu Menlo), e, numa época em que o monospace padrão dos navegadores não era atualizado, as pessoas começaram a colocar Menlo nas pilhas de fontes
  • Hoje, os padrões dos navegadores melhoraram; embora não sejam excelentes em todos os casos, já não são ruins
• É possível abandonar listas como Menlo, Monaco, Consolas, Bitstream Vera Sans Mono, Courier, Courier New e deixar apenas monospace
• Colocar Courier New intencionalmente na pilha de fontes é avaliado de forma fortemente negativa

monospace, monospace e o comportamento dos navegadores

• Ao usar font-family: monospace; de forma explícita ou implícita, o font-size pode ser definido por padrão não como 100%, mas provavelmente como 81,25%
  • O usuário pode alterar a fonte de família genérica, o tamanho padrão do texto e o tamanho padrão do texto monoespaçado
• Se houver uma segunda family na lista, esse comportamento não ocorre
  • font-family: my-web-font, monospace; funciona bem
  • font-family: monospace, monospace; também funciona bem
  • Especificar font-size diretamente também é uma opção
• O Lightning CSS tem um problema que quebra monospace, monospace
  • Issue relacionada: parcel-bundler/lightningcss#1221
  • Temporariamente, está sendo usado monospace, m
• Esse problema afeta apenas monospace
• A posição é de que seria desejável convencer os navegadores a abandonarem o comportamento de tamanho de monospace e aumentarem o valor, provavelmente 13px, para provavelmente 16px
  • O local para propor isso poderia ser o CSSWG

Não use system-ui e ui-* em conteúdo

• Fontes de UI são para textos curtos de interface, não para conteúdo longo
• Fontes de UI podem não oferecer bom suporte ao idioma do conteúdo
  • O macOS é considerado bom nesse aspecto, mas o Windows não
  • Como resultado, podem surgir casos em que usuários de CJK veem uma fonte monoespaçada ruim
• Alguns usuários escolhem de propósito fontes de UI do sistema caricatas, algo que aparentemente é bastante comum em algumas comunidades Android
  • Há a preocupação de que, ao usar system-ui, o conteúdo também possa aparecer assim
• A issue #3658 de w3c/csswg-drafts discutiu vários problemas de system-ui e contém a conclusão de que system-ui foi amplamente abusada
• A issue #41244 de mdn/content adicionou ao MDN uma nota alertando sobre o uso excessivo
• system-ui e ui-* têm sido usadas como uma espécie de proxy para obter uma fonte padrão melhor, mas esse uso não é bom
• A posição é de que system-ui foi um erro
  • A visão é que apenas -apple-system deveria ter permanecido, e BlinkMacSystemFont deveria ter sido transformado nisso
  • Na época da padronização, outras plataformas não tinham um conceito equivalente útil, e hoje se considera que algumas plataformas passaram a tê-lo
  • Entende-se que ela foi majoritariamente abusada para contornar o problema de os navegadores não atualizarem os antigos padrões das famílias genéricas existentes
• A posição é de que ui-serif, ui-sans-serif, ui-monospace e especialmente ui-rounded são erros óbvios que deveriam ser removidos
  • Em ambientes que não sejam Apple, não se espera que mapeiem para qualquer fonte
  • Como o próprio conceito existe apenas nas plataformas Apple, ele não deveria ter sido incluído no padrão
  • Se a Apple o tivesse fornecido, deveria ter sido em uma forma com prefixo -apple, como -apple-system
• Há casos de uso legítimos para system-ui em web apps, mas a impressão é que, na prática, ela foi quase inteiramente abusada, e uma intervenção para removê-la talvez não fosse ruim

[GN⁺]

Comentários do Lobste.rs

• No https://lindenii.org, a opção foi não definir font-family de jeito nenhum, respeitando assim a fonte padrão escolhida pelo usuário no navegador
  Pessoalmente eu prefiro sans-serif, mas se o usuário usa serif como padrão, não vejo motivo para sobrescrever isso
  Ainda assim, em casos como https://runxiyu.org/soc/ta/, em que foi necessário usar caracteres ausentes na maioria das fontes, não teve jeito a não ser incluir uma webfont, e o resultado foi o problema de forçar todo o resto do texto para sans-serif em vez do padrão do usuário
  A menos que se envolva cada caractere estranho com algo como <unusual-character>, não sei se existe uma forma melhor, e também seria bom haver um jeito de especificar algo como “a fonte preferida do usuário para código”
  A dica de monospace, monospace foi útil, e a diferença de tamanho era bem confusa

  • Um fallback aceitável para o segundo problema talvez seja usar uma imagem de substituição ao lado do caractere incomum
    Sites de listagem de caracteres Unicode fazem isso assim
  • Faço algo parecido no meu blog https://hauleth.dev, mas usando monospace
    Já elogiaram o design do site, mas na verdade eu só peguei um tema do Zola e reduzi o CSS e os elementos customizados, então concordo bastante com a ideia do texto, especialmente para páginas pessoais
  • Quanto à opção de não definir font-family de jeito nenhum, acho que para o usuário talvez fosse melhor se a fonte padrão padrão do navegador mudasse de serif para sans-serif
    A maioria dos usuários não escolhe manualmente as fontes, então não há como distinguir entre “a fonte escolhida pelo usuário” e “a fonte padrão do navegador”
    Embora eu goste de serif, hoje em dia provavelmente a maioria prefere sans-serif
    No meu ambiente, bloqueei páginas de definir fontes e nem instalei fontes CJK adequadas
    Foi porque pensei que, mesmo se aparecessem quadrados como “4E2D” no lugar de hanzi, isso continuaria não significando mais nada para mim do que o próprio ideograma
    O tratamento desse fallback de fonte foi bem feito, mas infelizmente não existe um jeito de indicar diretamente o nome da fonte padrão
    Em vez disso, no JavaScript, se você olhar getComputedStyle(document.documentElement).fontFamily em um documento vazio, no meu caso aparece "serif" ou "sans-serif" conforme minhas configurações avançadas de fonte
    Não sei exatamente o que significa “fonte preferida para código”; parece estar pensando em algo além de monospace

• Este texto ainda é um rascunho, então está bem incompleto, com duas ou três formas diferentes de fragmentos misturadas e por isso meio bagunçado
  Provavelmente no fim terá mais de uma página e ficará num formato bem diferente do atual, e parte dele talvez até vire caligrafia, desenho à mão e layout manual
  Ultimamente, porém, estou focado em implementar uma linguagem de marcação leve, que agora já está quase utilizável, naquela sensação de que os 90% finais nunca deixam de restar
  Depois disso pretendo voltar a escrever e publicar o texto

• Achei realmente interessante a parte de que, ao usar font-family: monospace;, o font-size padrão pode virar 81.25% em vez de 100%, e que isso não acontece se houver uma segunda fonte na lista
  Isso quer dizer que font-family: my-web-font, monospace; ou font-family: monospace, monospace; funcionam bem, mas parece que isso não está documentado no MDN no momento
  Fico curioso se alguém consegue explicar por que isso acontece e por que não está documentado

  • Pelo que lembro, o Firefox na prática não faz esse ajuste de tamanho de fonte, mas o Chrome faz
    Então isso também acaba sendo uma causa de inconsistência entre navegadores
  • Talvez a intenção tenha sido fazer o texto monoespaçado parecer visualmente do mesmo tamanho que o texto do corpo

• Mesmo sendo um rascunho, há uma repetição estranha que parece ter sido causada por copiar e colar a mesma seção uma segunda vez dentro do texto
  Isso me incomodou ainda mais porque passa uma nuance de que a fonte monoespaçada de que eu gosto não é muito boa

  • Isso ficou assim porque ainda estou reorganizando a estrutura
    Se você ler com atenção, ainda estou separando o que vai ficar como recomendação definitiva e o que precisa de uma posição mais sutil, então também há pequenas contradições
    Fiquei curioso para saber qual é a fonte monoespaçada de que você gosta

• Um motivo para evitar usar só serif e sans-serif é que a fonte serif padrão muitas vezes acaba sendo Times, o que às vezes parece ruim
  Por isso estou migrando a fonte do corpo de serif para sans-serif

• Sobre o conselho de “não listar fontes que provavelmente já estão instaladas no sistema” e “também, no caso de monoespaçadas, usar de preferência apenas a família genérica”, no meu site deixei assim
  Uso --sans-serif: Adwaita Sans, Adwaita Sans Bundled, Inter, sans-serif; e --monospace: Iosevka, Iosevka Web, Cascadia Code, monospace;
  A ideia é que, se Adwaita Sans estiver instalada no GNOME, a fonte do sistema seja usada sem baixar uma webfont; se não estiver, usar a webfont Adwaita Sans Bundled, e durante o carregamento cair em Inter e sans-serif, que têm métricas parecidas
  Para a monoespaçada é a mesma lógica: se houver Iosevka no sistema, usa; se não houver, usa a webfont Iosevka Web, e durante o carregamento faz fallback para Cascadia Code e monospace
  Também levei em conta que o monospace do Windows é Consolas, que não gosto muito, e que as versões mais novas do Windows já vêm com Cascadia Code instalada
  Sei que não é bom que Cascadia Code tenha métricas bem diferentes de Iosevka, mas queria saber o que acham dessa abordagem

  • Como quase não tenho conhecimento de programação web, talvez eu esteja deixando passar algum jeito melhor de especificar “baixar a fonte só quando ela não estiver instalada no sistema”

• Texto bem limpo, e eu não conhecia a dica de monospace, monospace
  Como problema menor de formatação, no meu navegador o texto do parágrafo .unimportant aparece sobre o fundo amarelo, mas fica por trás do texto da barra fixa .status, então fica estranho quando passo rolando pela seção .unimportant
  Acho que algo parecido também acontece com a marca-d’água DRAFT na diagonal