Question 202868 in CSS Question posted in
Some basic documentation can be found here.

Css – 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/

Tags:

2

Answers


  1. 0

    One thing you could do is set the font size of the html element to 62.5%

    html {
 font-size: 62.5%;
}

    Which now sets 1 rem = 10px

    Then set the default font size of the body

    body {
   font-size: 1.6rem;
}

    Now 1rem = 10px which is easier to work with for your other px values and your base font size is 16px

    Login or Signup to reply.
  2. 0

    Since I am a strong opponent of rems, I can advise you to always use pixels, but if you still need Rems, use this plugin https://github.com/lore-w/2rem

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search