Reimaginando a tipografia fluida

Por muitos anos, tem sido ‘melhor prática’ usar unidades relativas (especialmente eme rem) para dimensionar texto. Isso é ótimo! Mas depois de brincar com minhas preferências de usuário, acho que podemos melhorar as abordagens comuns.

Observação:

Falamos sobre algumas dessas ideias em nossa transmissão ao vivo Winging It no mês passado com Alan Stearns, copresidente do CSS Working Group. Confira para mais discussões sobre tipografia e unidades CSS !

O navegador fornece um tamanho de texto padrão com base nas preferências do usuário, e nosso texto deve ser relativo a essa preferência . Estabelecer nosso tamanho de fonte raiz com um emvalor ajuda a manter esse relacionamento intacto.

Da mesma forma, as ‘escalas’ de fontes têm a intenção de manter alguma harmonia interna em uma gama de tamanhos de fontes diferentes. Ao estabelecer toda a nossa escala em unidades relativas como eme rem, mantemos uma relação consistente entre os tamanhos, ao mesmo tempo em que permitimos que todo o sistema aumente ou diminua em relação aos padrões do usuário ou ao zoom do navegador (página).

Recentemente, a ‘tipografia fluida’ nos levou a incorporar unidades relativas de viewport ou container em nosso dimensionamento de fonte também – geralmente com uma clamp()função para integrar entradasem / reme vi/ em um algoritmo responsivo com limites inferiores e superiores. Veja utopia.fyi para a abordagem mais comum:cqi

:root {
  font-size: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
}

Esses números parecem um pouco mágicos, porque são. O Utopia nos pede para começar com um intervalo de tamanhos de fonte definidos em pxvalores, e então ele faz uma conversão para rem assumindo que 1rem == 16px. Enquanto essa suposição for verdadeira, a matemática acima escalará nossa fonte de um 18pxmínimo para um 20pxmáximo.

Essa é uma suposição na qual os desenvolvedores geralmente se apoiam, mesmo quando não estamos fazendo matemática fluida. Não é uma suposição totalmente confiável, mas corresponde ao padrão na maioria dos navegadores, e as coisas podem parecer bem moles se não fizermos alguma forma de tradução para pixels. Como podemos escolher um tamanho de fonte usando unidades que são totalmente independentes da exibição? O que é 1rem sem uma conversão?

É uma abordagem confiável, mas quanto mais eu brinco com ela, mais perguntas eu tenho. Então, vamos nos aprofundar e ver se há melhorias que podemos fazer.

Observação:

Cálculos fluidos com unidades de viewport podem causar problemas de acessibilidade se não tomarmos cuidado. Então fique de olho nos avisos que o Utopia fornece, ou pule para fluid.style para testar os recursos de zoom de página de qualquer cálculo fluido.

Qual é a finalidade de uma preferência de tamanho de fonte?

Tenho brincado com as configurações do meu navegador, começando com fontes e depois o tamanho de fonte padrão. Essas são configurações que a maioria dos navegadores fornece. Como geralmente prefiro texto da web em torno de 24px, isso parece uma preferência óbvia para definir, certo?

Mas eu já projetei meu site para ter texto grande em relação ao padrão do usuário. Ignorando os bits fluidos por enquanto, eu configurei a raiz font-sizepara aproximadamente 1.5em– metade do tamanho da configuração do usuário. Quando minha preferência foi definida para o padrão 16px, meu site já exibia texto em 24px. Agora que eu disse que queria 24px font-size, meu site aumentou para 36px!

Parece que os navegadores Chromium agora têm uma maneira de selecionar entre o padrão medium ou uma lista de opções maiores e menores:

• Muito pequeno
• Pequeno
• Médio (recomendado)
• Grande
• Muito grande

Você ainda pode obter uma configuração exata de tamanho de fonte, mas ela está escondida. Essa mudança faz algum sentido para mim e reflete melhor o que está acontecendo. Posso tornar os tamanhos de fonte geralmente maiores ou menores na web (pelo menos onde os sites usam dimensionamento relativo) – mas não posso realmente estabelecer um único tamanho de fonte que os sites respeitarão diretamente.

O problema é que não é isso que eu realmente quero ao definir uma preferência de tamanho de fonte. Meu objetivo aqui não é tornar o texto em todos os sites maior do que era antes – independentemente do design existente. Eu realmente quero que os sites geralmente me mostrem texto ao redor 24px(ou ‘grande’), porque esse é um padrão muito bom para mim . Sites com texto de corpo menor aumentariam o tamanho da fonte, mas sites com o mesmo tamanho ou texto maior certamente não deveriam ficar ainda maiores .

Não é só meu site – isso se tornou uma prática comum em toda a indústria. E isso significa que alguns dos meus sites favoritos que já usam fontes grandes se tornam muito grandes quando eu defino minha preferência de navegador. Então eu tive que remover essa preferência.

Vejo essa situação se repetir repetidamente na web. A lição que aprendemos com frequência é que os usuários não definem preferências , quando a realidade é que aplicamos suas preferências mal . Quando a preferência não faz o que eu quero, é claro que tenho que parar de usar essa preferência.

Isso nos leva a supor que a preferência do navegador sempre será 16px. Comparamos isso com nossos mockups com 24pxfontes, fazemos alguma aritmética básica e definimos nosso tamanho de fonte base para 1.5em. Bom o suficiente .

TL ; DR – Nunca faça matemática de pixel com unidades eme rem. Foi aí que erramos, ao assumir que isso 16px == 1emé um fato confiável.

Neste caso, há uma solução rápida e fácil que faria as preferências de tamanho de fonte funcionarem em todos os níveis. Há uma única configuração de tamanho de fonte raiz que é garantida para corresponder ao tamanho de fonte do usuário. Geralmente é mantido em segredo, mas Adrian Roselli quebrou o código do mágico para nos trazer as boas notícias:

Não é nenhuma.

Não defina um tamanho de fonte raiz. O artigo de Adrian é excelente, e acho que ele provavelmente está certo neste. O melhor tamanho de fonte base é o tamanho de fonte padrão do usuário – definido no navegador.

html {
  /* no size is the best size */
}

Por que a tipografia deve ser responsiva?

Mas ainda tenho um problema, porque o navegador não me dá muitas opções para definir a preferência. E (não surpreendentemente) um tamanho único não serve para todos os sites ou situações.

Gosto de ler textos grandes, mas “grande” é um conceito relativo. Um tamanho de fonte de 72px é quase ilegível no meu telefone, mas fica ótimo para títulos no meu monitor externo de 20 polegadas. Da mesma forma, o 16pxtamanho de fonte padrão comum parece bom para mim em um telefone, com comprimento de linha limitado, mas é menor do que eu quero quando tenho 20 polegadas para preencher.

Claro, eu poderia definir padrões diferentes para dispositivos diferentes, mas isso não ajuda quando eu redimensiono janelas. Mesmo com o navegador rodando constantemente em tela cheia, meu laptop só é conectado a um monitor externo algumas vezes. Quando eu o desconecto, tenho menos espaço disponível.

Mais uma vez, ouvi um refrão comum de que “os usuários não redimensionam suas janelas” – mas acho isso totalmente inacreditável. Na verdade, aposto que estou em uma minoria muito pequena por usar principalmente aplicativos de tela cheia. Quando vejo outras pessoas computando, espero ver uma dispersão de janelas de tamanhos aleatórios sobrepostas umas às outras em uma única área de trabalho. Esse é o padrão. E então essas janelas sobrepostas precisam ser arrastadas e redimensionadas para navegar por diferentes tarefas. Usuários comuns não ficam sentados redimensionando janelas para cima e para baixo por diversão, como nós, mas eles ajustam totalmente o tamanho da janela para se adequar a diferentes tarefas. Criei uma enquete para ver como as pessoas no Mastodon gerenciam as janelas do navegador.

Como um internauta, eu gostaria que meu tamanho de fonte padrão respondesse a essas mudanças. Como um autor da web, eu gostaria que meu site também fosse responsivo. Nós projetamos layouts que respondem suavemente da menor tela para a maior – parece absurdo manter o tamanho de fonte base travado no lugar durante todo esse processo responsivo.

Então eu quero tipografia responsiva , e os navegadores (como regra) não disponibilizam isso nas configurações do usuário. Existem alguns navegadores (como o Safari) que aceitam preferências CSS arbitrárias , mas isso é raro – e útil apenas para pessoas que escrevem CSS .

Existem algumas maneiras que eu poderia imaginar de abordar isso. Talvez nós apenas adicionemos um pequeno fator de escala ao padrão do usuário:

html {
  font-size: calc(1em + 1vw);
}

Mas isso sempre será maior do que o usuário pediu. Então poderíamos ajustá-lo um pouco para baixo e fornecer grampos:

html {
  font-size: clamp(1em, 0.9em + 1vw, 1.5em);
}

Isso se parece muito com a abordagem comum em estrutura, mas tem algumas diferenças distintas. Não estamos tentando atingir um tamanho de fonte específico (ou intervalo de tamanhos) assumindo que o usuário tem um 16pxpadrão. Não há nenhuma bruxaria de cálculo visando algum valor alvo em nossa mente de designer, e os grampos não estão relacionados ao meu intervalo desejado de resultados. Em vez disso, estamos adicionando uma leve responsividade ao valor do usuário e usando os grampos para manter nosso valor fluido dentro do intervalo da intenção do usuário.

Unidades relativas como eme rem são excelentes para relacionamentos internos – mantendo a escala consistente entre o corpo do texto e os títulos, por exemplo. Mas as coisas sempre dão errado quando tentamos tratar emcomo um alias para px, com conversões mentais baseadas em seu relacionamento padrão assumido. Nesse ponto, estamos mantendo o zoom , mas descartando todo o resto sobre a preferência do usuário.

Sempre que você começar a fazer contas mentais com 16px == 1em, pare e pergunte-se se essa matemática se aplica a uma ampla gama de preferências do usuário.

(Não faz isso. Não faça isso.)

Fazendo o que o navegador não faz

Também tenho um problema em que minha preferência de navegação na web por texto grande não se aplica igualmente a todos os sites. Quando estou lendo uma postagem de blog, só quero uma boa visão grande do texto. Quando estou digitalizando transações bancárias, fico feliz por algo um pouco mais compacto. Acho que navegadores como o Arc estão no caminho certo com ajustes de estilo por site.

Poderíamos levar minha abordagem responsiva-padrão ainda mais longe, fornecendo controles específicos do site como parte da nossa IU . Ainda queremos ter certeza de que os padrões são razoáveis, com base nas preferências globais, e fornecer a IU apenas como um aprimoramento progressivo. Para citar a especialista em acessibilidade Kate Kalcevich:

O verdadeiro avanço na acessibilidade é fornecer opções e se adaptar às preferências do usuário.

— Kate Kalcevich , Ampliando a acessibilidade (vídeo)

Eu fiz um mock-up de um elemento personalizado (autônomo) com uma prova de conceito aproximada. Tenho certeza de que há maneiras de melhorá-lo, como ajustar os valores, adicionar uma opção de envio de formulário ou rastrear a preferência no armazenamento local – mas estou curioso para saber o que você acha.

Pode não ser o tamanho de fonte base Ideal Bestest ™, mas não nos afastamos muito – e evitamos números mágicos ou bruxaria de cálculo. Talvez o pequeno desvio seja justificado para um site mais responsivo e adaptável ao usuário?