Online px to em calculator

Is there such thing as an online calculator that will translate 150px to 6.25em automatically for me?

I’m looking for something that will convert px to em but I can’t find anything that when I put in 150px, it tells me 6.25.

I don’t understand the question.

If (as you’re stating) 150px = 6.25em, then 1 em = 150 ÷ 6.25 = 24px.

Why do you need to set a default pixel size?

And that means that in your case, @asasass, every time you want to convert a pixel amount to ems, just divide by 24. So 135px would be 135/24 or 5.625em.

Browsers have their own default size, usually 16px I think. If you want the text to be consistent across browsers, you could set your own default size:

body {
   font-size: 24px;
}

or you will often see

body {
   font-size: 100%;
}
2 Likes

I’ve no idea. You’ll need to explain what you’re doing. I don’t understand what you’re trying to achieve with this calculation.

Thanks, now it works.

What does font-size have to do with width?

I never understood that.

If it’s 150px width, what does inputting font-size have do with that?

OK. An em is a unit of measurement based on font size, so you need to set a default font size for that calculator because the number of ems in 135px will vary, depending on the font size. (Try using different font sizes, and you’ll see what I mean.)

What would someone use em for width, height then?

Because then the design scales if the user varies their font size.

For example, you might design a box 150px wide, with text at 24px, and it looks fine. But if I have very poor eyesight, and I need to increase the font size to 36px, the text might break out of the box and look ugly. By linking the size of the box to the size of the text, your design will scale whether somebody increases or decreases their font size.

3 Likes

There’s a more expansive explanation here - https://developer.mozilla.org/en-US/docs/Web/CSS/font-size - IIRC though, an em is based on the width of the letter “M”, which is why it’s called what it is.

1 Like

18px font-size = 1.25em

Why is the pixel size 16, but not 18?

If the font size is 18px, shouldn’t the pixel size be the same thing?

See also the first few paragraphs of this - https://www.w3.org/WAI/GL/css2em.htm

You have set your default font size to 16px, so 1 em = 16 px.

Then you’ve converted 18px, which is obviously going to work out at slightly more than 1em (because 18 is slightly more than 16).

3 Likes

Hi there asasass,

150px width will only “translate” to 6.25em width when
the font size for the containing element is 1.5em.

If, for example, the font size is changed to 2em then
150px width will “translate” to 4.6875em width.

Play around with this quickly assembled calculator to
help understand what is going on…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
    text-align: center;
 }

#calc {
    display: inline-block;
    padding: 1em;
    border: 0.062em solid #999;
    border-radius: 0.6em;
    background-color: #fff;
    text-align: left;
 }

fieldset {
    margin: 0.25em 0;
    border: 0.062em solid #999;
    border-radius: 0.4em;
 }

label {
    display: inline-block;
    width: 13em;
    white-space: nowrap;
}
hr {
    visibility: hidden;
 }
</style>

</head>
<body> 

 <form id="calc" action="#">
  <fieldset>
   <label for="pixels">desired width in pixels: </label>
   <input id="pixels" type="text" required >
  </fieldset><fieldset>
   <label for="font-size">desired font size in ems: </label>
   <input id="font-size" type="text" required>
  </fieldset><fieldset>
   <label for="ems">actual width in ems: </label>
   <input id="ems" type="text" readonly disabled>
  </fieldset><fieldset>
   <label for="check">get actual width: </label>
   <input id="check" type="submit" value="calculate">
    <hr>
   <label for="clear">clear fields: </label>
   <input id="clear" type="reset" value="clear">
</fieldset>
</form>

<script>
(function( d ) {
   'use strict';

   var fs = d.getElementById( 'font-size' );
   var px = d.getElementById( 'pixels' )
   d.getElementById( 'check' ).addEventListener('click', 
      function(e){
         e.preventDefault();
         if ( isNaN(fs.value ) || isNaN( px.value ) ||
              fs.value ==='' || px.value ==='' ){
              d.getElementById( 'calc' ).reset();
         }
         else {
              d.getElementById( 'ems' ).value=
              px.value / ( fs.value * 16 );
         }
             },false);
}( document ));
</script>

</body>
</html>

coothead

2 Likes

No, I set it to 18px, not 16.

What’s wrong about this?

16px is equivalent to 1em

18px is equivalent 1.125em

Why do you think it’s wrong?

In your image, the default pixel size is set to 16 px, and then you calculate 18px as ems.

Nothing. If the base font size is set to 16px, then 16px = 1em and 18px = 1.125em.

If the base font size were set to 24px, then it would be 24px = 1em and 18px = 0.75em.

What does the 18 represent then, just the font-size, right?

font-size, and base size are 2 different things?