Search code examples
csstypography

How do I convert from a root-EM/REM to a different size/REM, or is this not possible?


I've been given a list of sizes to use in order to redesign a card on our website. We have a root EM of 16px, however I've been given other sizes to use in this card but the other sizes aren't based on 16px but rather another size.

Is it possible to convert the title and subtitle to 16px REM? Is the ratio the same result between different point/pixel ratios, or will they always be different?

Title: size 14/17px - 1.098rem?
Subtitle: size 20/21px - 1.2698rem?
Option 1: size 13.5/16px - 1.125rem
Option 2: size 13.5/16px - 1.125rem
Option 3: size 13.5/16px - 1.125rem
Subtext: size 12/16px - 1rem
Return information: size 12.8/16px - 1.0667rem

I used this website for conversions: https://websemantics.uk/tools/font-size-conversion-pixel-point-em-rem-percent/


Solution

  • So first, I determined what the ratio between each of the non-16px sizes are. So:

    • 16px to 17px is 1.0625rem
    • 17px to 14pt is 1.098rem
    • Times them both, results in 1.166625rem
    • 16px to 14pt is 1.1667rem.

    And for the other one:

    • 16px to 21px is 1.3125rem
    • 21px to 20pt is 1.2698rem
    • Times them both, results in 1.6666125rem
    • 16px to 20pt is 1.6667rem

    The ratios are the same. So really, given a pt all that needs to be done is replace the px with the root-EM and the ratio will work.