Sobre esse hack eu nao recomendo que ele seja utilizado por não ser acessível. Um dos requisitos WCAG é que a fonte se adapte ao zoom da tela, coisa que o rem faz direto da caixa por ser uma medida responsiva, qualquer redefinição do valor do rem (que é o valor inicial do root font size) afeta diretamente na qualidade do zoom e nas preferências do usuário.
Há fontes dizendo que o rem é afetado pelo tamanho da fonte da preferência do sistema, porém não encontrei essa informação na documentação oficial da w3, mas caso seja verdade, modificar o root font size de qualquer forma é ainda mais problemático
O que vc pode fazer é redefinir isso em uma variável CSS
Bom horário local mano, espero que tu esteja bem!
Sobre esse hack eu nao recomendo que ele seja utilizado por não ser acessível. Um dos requisitos WCAG é que a fonte se adapte ao zoom da tela, coisa que o rem faz direto da caixa por ser uma medida responsiva, qualquer redefinição do valor do rem (que é o valor inicial do root font size) afeta diretamente na qualidade do zoom e nas preferências do usuário.
Aqui uma fonte que elabora melhor esse ponto:
24a11y.com/2019/pixels-vs-relative...
Há fontes dizendo que o rem é afetado pelo tamanho da fonte da preferência do sistema, porém não encontrei essa informação na documentação oficial da w3, mas caso seja verdade, modificar o root font size de qualquer forma é ainda mais problemático
O que vc pode fazer é redefinir isso em uma variável CSS
--custom-f-size: 62.5%;
E aplique em classes utilitárias
.heading-1 {
font-size: calc(var(--custom-f-size) * etc etc;
}
Entendi, bem muito obrigado pelo feedback e pela informação! Creio que ajuda a esclarecer esse conceito.
Que isso mano! E continue postando sobre, unidades CSS é um assunto extenso e dúvida pra muita gente, parabéns pela iniciativa!