Could anyone please explain to me how the calculation capabilities for font sizes using CSS work?
Example:
font-size:calc(1.73vw + 48.74px);
Thank you
Could anyone please explain to me how the calculation capabilities for font sizes using CSS work?
Example:
font-size:calc(1.73vw + 48.74px);
Thank you
The calc()
function is very interesting because it is a native CSS way to do calculations with the ability to mix units of measure that is only possible because it performs these calculations at the same time that renders the screen.
Joining it with font-size
property is an alternative to keep coupling between elements and keep design as responsive as possible.
There are many possibilities in the calculation, to know more about the resources of calculations follows the link: fluid-typography .
It basically works the way you wrote, but for a more complete explanation:
The unit "vw" is based on a percentage of the width of the viewport / window. If a screen has 50cm, 1vw will equal 0.5cm. In the case of typography, a letter would have more or less this measure (can vary due to the difference of factors like the kerning of the font that you chose).
font-size:calc(1.73vw + 48.74px);
In your example, it will do a calculation for the font size that will equal (1.73vw + 48.74px). This means that the size of a letter would have: 1.73% of the screen size + 48.74px.