Como um site pessoal adotou a escala tipográfica da Apple

Karl Koch trocou a tipografia do próprio site pelas escalas de texto do macOS e do iOS, mantendo suas fontes. O texto de interface usa 13 no layout desktop e 17 em layouts compactos ou touch. A troca não depende do sistema operacional do visitante. O que decide é o layout: a escala compacta é o padrão, e a de desktop só entra com viewport de pelo menos 64rem e entrada primária capaz de hover e ponteiro fino. Uma janela estreita de Mac recebe o texto maior, e um tablet largo com toque também.

Os valores viram rem a partir do tamanho raiz padrão do navegador: 1,0625rem para o Body compacto e 0,8125rem para a interface no desktop. Para respeitar o ajuste de Texto Maior do iPhone, o autor adicionou o opt-in emergente de escalonamento de texto e um fallback com o estilo Body do Dynamic Type para WebKit antigo em iPhone e iPad. Se o sistema devolve 23 em vez de 17, aplica-se um multiplicador de 23/17 ao tamanho raiz. O fallback não reproduz as curvas de escala separadas de cada estilo da Apple. Os testes usaram tamanhos simulados, e o autor admite que isso não prova o comportamento num iPhone físico.

A cobertura anterior toca o tema, mas não mostra evolução deste mesmo projeto. Em 15 de setembro de 2026, o CEVIU noticiou "Tipografia Acessível: Calculando Escalas Modulares com CSS", sobre escalas calculadas por proporção com pow(). O caso de agora segue o caminho oposto: parte de estilos nomeados e valores fixos por layout. Em 31 de março de 2026, o texto "Testando Escalonamento de Fontes para Acessibilidade com Variáveis do Figma" tratou do critério de 200% do WCAG 2.2, que o autor também cita.

Para quem desenha sistemas de design, a leitura é que a grade de quatro pixels resolve espaçamento, mas não diz se um parágrafo deve ter 16 ou 17. Escala nomeada por função (corpo, título, legenda) ajuda a decidir hierarquia com peso e tamanho juntos. E o texto maior só funciona se o layout acompanhar: o autor teve de mover um link para o menu e permitir quebra de rótulos. Teste em dispositivo real continua necessário.