Este site agora suporta tipo dinâmico no iOS e iPados. Se você for para as configurações do sistema no seu iPhone ou iPad e altere a configuração para Exibição e brilho> Tamanho do textovocê verá a mudança refletida neste site.
Esta é uma grande vitória para a acessibilidade: muitas pessoas fazem esse ajuste em seu dispositivo para corresponder às suas habilidades. Só porque você pode ler uma fonte minúscula não significa que eu possa. Também é uma vitória para a consistência: o tamanho da fonte do meu site corresponde ao outro texto que um visitante vê em seu dispositivo.
A melhor parte é que essa melhoria pode ser realizada com apenas algumas linhas de CSS:
html {
font-size: 0.9em;
font: -apple-system-body;
font-family: "Avenir Next", "Helvetica Neue", sans-serif;
}
O que está acontecendo aqui?
O font-size A propriedade define o tamanho do texto padrão para a página. Todos os navegadores reconhecem essa configuração e você também.
A nova adição é o font propriedade com o -apple-system-body valor. Essa fonte é a chave para obter suporte para o tipo dinâmico. Esse recurso está no webkit há quase uma década e é Totalmente documentado. Esta propriedade substitui o font-size Isso foi definido na linha acima e nossa página agora tem um tamanho que corresponde à configuração do sistema para o texto do corpo.
Um infeliz efeito colateral do font O valor é que ele também define a página na fonte do sistema. Eu gosto de São Franciscomas não quero isso no meu blog.
Com Uma dica de Mastodonocorreu -me que eu poderia substituir o rosto com font-family. Então agora tenho o melhor dos dois mundos: um tamanho que faz meu visitante feliz e uma fonte que me deixa feliz.
Uma outra adição que fiz ao meu CSS foi um ajuste para os navegadores de mesa. Não existe uma configuração de tipo dinâmico no macOS (ainda?!) E o tamanho padrão foi um pouco pequeno para o meu gosto. UM @media A regra corrigiu isso:
@media screen and (min-width: 801px) {
body {
font-size: 1.2rem;
}
}
Agora, qualquer janela do navegador mais larga que 800 pontos receberá uma fonte um pouco maior.
Você pode, é claro, usar qualquer um dos outros valores de fonte predefinidos, como -apple-system-headline ou -apple-system-footnotemas você também precisará substituir a família a cada uso.
Mas é provável que você já esteja usando em e rem tamanhos para que os elementos escalem corretamente em outros contextos. Definindo o tamanho da base no html Elemento, minha regra para os cabeçalhos “apenas trabalhavam”:
.entry-header h1,
.entry-header h2 {
font-size: 1.4em;
...
}
Outro ponto importante: se você estiver usando o WKWebView ou o SFSafariviewController em uma plataforma da Apple, ele terá os mesmos recursos que você viu acima. Isso significa que você pode ter texto dinâmico em uma visualização Swiftui e uma página da web que corresponde exatamente. É por isso Eu precisava resolver o problema em primeiro lugar.
Reserve um momento para olhar para o seu blog, produto ou folha de estilo da empresa e pense em como essa abordagem à acessibilidade pode melhorar as coisas. Se você é como eu, em algumas horas você terá um site muito melhor.