0

I have the following HTML code:

<h1>Hello World</h1>

I am styling this with:

h1 {font-size:100pt}

How do I convert this 100pt to EMs & REMs?

michaelmcgurk
  • 6,367
  • 23
  • 94
  • 190
  • 1
    Pts are set measurement, ems are relative, and rems are relative to primary em value (root em). So there's no way to convert anything to rem out of context, and pts to ems are going to be a rough estimate based on your average anticipated screen resolution. – Anthony Feb 09 '15 at 14:46
  • Better to just use an em value that looks good and is a close match to what you already have and compare in different screen media. If the issue is that it's inside a div that's 100pts, convert that as well – Anthony Feb 09 '15 at 14:48
  • Thanks for this. So should I be setting a base PT/PX size on my `body` element and then set my rem based on this? I'm very new to this area, as you can tell, so any guidance is much appreciated :-) – michaelmcgurk Feb 09 '15 at 14:48
  • No, you should use relative units whenever possible. Fixed units are best saves for a print style sheet and images. Use ems and rems everywhere and scale your browser way in and way out. You'll see why it's the way to go – Anthony Feb 09 '15 at 14:52
  • 1
    This has been asked umpteen times, sometimes with a correct answer, see e.g. http://stackoverflow.com/questions/19357839/how-do-i-convert-pt-into-em – Jukka K. Korpela Feb 09 '15 at 15:02

1 Answers1

1

In CSS,
- A pt is 1/72 of an in, and a px is 1/96 of an in.
- A px is therefore 0.75pt OR 1pt is equal to 1.3333px.

1. Convert pt to px - 

1pt = 1.3333px  
100pt = 1.3333 * 100px = 133.333px

2. Convert px to em - 

 1em = 16px (Typical Assumption)  
 133.333px = ?em = 8.333em

3. Convert px to rem - 

10px = .625rem (Assuming `:root` font-size is `16px`)  
133.33px = ?rem = 8.33rem
Pankaj Parashar
  • 9,762
  • 6
  • 35
  • 48
  • Thank you, Pankaj :-) So using my example above, is this correct? http://jsfiddle.net/awnc4ayn/ – michaelmcgurk Feb 09 '15 at 14:57
  • 1
    I think you accidentally pressed the down vote button :-) Yes the fiddle looks right. – Pankaj Parashar Feb 09 '15 at 14:59
  • The `em` unit is the size of the font. “Assuming” a specific value for it is pointless: if you “assume” that way, there is no reason to use the `em` unit. Just like assuming that 1 kg is $12 and then using this as a solution to the “problem” of converting kilograms to dollars. – Jukka K. Korpela Feb 09 '15 at 14:59