Alguém poderia me explicar por favor como funcionam o recursos de cálculos para tamanhos de fontes utilizando CSS?
Exemplo:
font-size:calc(1.73vw + 48.74px);
Obrigado
A função calc()
é muito interessante pois é uma maneira nativa CSS para fazer cálculos com a capacidade de misturar unidades de medida que só é possível pois executa esses cálculos ao mesmo tempo que renderiza a tela.
Juntar ela com a propriedade font-size
é uma alternativa para manter o acoplamento entre os elementos e manter o design mais responsivo possível.
São muitas as possibilidades no cálculo, para saber mais sobre os recursos de cálculos segue o link: fluid-typography.
Basicamente funciona da forma que você escreveu, mas para uma mais completa explicação:
A unidade "vw" se baseia em uma porcentagem da largura da viewport/janela. Se uma tela tem 50cm, 1vw será igual à 0.5cm. No caso da tipografia, uma letra teria mais ou menos essa medida (pode variar devido a diferença de fatores como o kerning da fonte que você escolheu).
font-size:calc(1.73vw + 48.74px);
No seu exemplo, ele fará um cálculo para o tamanho da fonte que será igual à (1.73vw + 48.74px). Isso significa que o tamanho de uma letra teria: 1.73% do tamanho da tela + 48.74px.