How to calculate font size in point(pt) for responsive view when window resized

Question

I tried the css below

--max-font: 16;
--min-font: 12;
--responsive: calc((var(--min-font) * 1px) + (var(--max-font) - var(--min-font)) * ((100vw - 420px) / (1200 - 420)));
font-size: var(--responsive);

It displayed well on site view, but when printing the font goes small. How can i calculate it in point(pt) format for font size using this formula? Thanks.

Answer 1

First, work out the width of each unit of measurement relative to a third:

1px = 1/96th of 1 inch
1pt = 1/72nd of 1 inch

Then you can use this difference to work out their relation to one another:

1pt = (1px * 96) / 72
1pt = 1.3**px

That's how you can calculate the font size... but why not simply just replace px with pt in your code? That's much simpler than doing the calculation on the fly:

--max-font: 16;
--min-font: 12;
--responsive: calc((var(--min-font) * 1pt) + (var(--max-font) - var(--min-font)) * ((100vw - 420pt) / (1200 - 420)));
font-size: var(--responsive);