Do I calculate font size using css?

Asked

Viewed 550 times

1

Could someone please explain to me how the calculation capabilities work for font sizes using CSS?

Example:

font-size:calc(1.73vw + 48.74px);

Thank you

2 answers

4


The function calc() is very interesting as 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 it renders the screen.
Join her with the estate font-size is an alternative to maintain the coupling between the elements and keep the design as responsive as possible.
There are many possibilities in the calculation, to learn more about the calculation resources follows the link: Fluid-typography.

3

It basically works the way you wrote it, but for a more complete explanation:

The "vw" unit is based on a percentage of the width of the viewport/window. If a screen is 50cm, 1vw will be 0.5cm. In the case of typography, a letter would have more or less this measure (it may vary due to the difference of factors such as the kerning of the font you chose).

font-size:calc(1.73vw + 48.74px);

In his example, he will make a calculation for the font size that will be equal to (1.73vw + 48.74px). This means that the size of a letter would be: 1.73% of the screen size + 48.74px.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.