px to rem calculation

Pain

Using rem for font-size is a good practice. 👍

But looking at a design tool like figma, font-size is displayed in px and need to calculate to rem value is a little annoying. 😣

The following is a solution ✨

Solution

(The example is when 16px is the global font-size)

css/scss
font-size: calc(14.08 / 16 * 1rem);

css-in-js
font-size: ${14 / 16}rem;