Ems to Pixel Conversion - Why 62.5% and not 6.25%?

Related searches

I know that a lot of us are familiar with setting the font size on the body element in our CSS to 62.5%. This means that 1em will equal 10px and helps for keeping things pixel perfect but also allows for scaling of fonts.

So wouldn't that mean that setting it to 6.25% would equate to 1em = 1px? Seems like an even simpler conversion rather than having to mess with decimals...


Thanks guys! I'm quite aware of the em and it's history (design degree), but I'm sure others may find it helpful :)

As far as the 1em = 1px, I don't see how this is undesirable. The em is square, regardless of your units (be it points or pixels) and nobody would set their type at 1px (just like nobody would set printed type at 1pt). Furthermore, even your article concedes that in most digital typefaces, the capital "M" is usually smaller than 1em, and that the em is merely a reflection of the point size (48pt type would render a 48pt by 48pt square for the em, 12pt type would yield 12x12, etc.)

Besides, the reason people would do this would be more for setting dimensions of other elements on the page so that everything scales nicely when the user adjusts their font size. Sure, there will always be the rare few who set their default to something other than 16px, but well worth the price to pay for a pixel perfect layout that scales nicely.

First of all, do not assume that 1 em will equal 10 pixels. An em unit is in direct correlation to the typography being used. If someone has a font size of 16 pixels, then 62.5% is indeed 10 pixels (16 * 0.625 = 10) but this will obviously change when someone has modified their default font size.

Secondly, this is the first I've ever heard of using 62.5% for the base body font-size. I always use a font-size of 76% as based on Sane CSS Typography by Owen Briggs.

Lastly, to answer your question, yes you could use a font-size of 6.25% and then use 12em instead of 1.2em, for example. However, I would highly discourage this methodology. In the world of typograhy, one em is intended to be the width of the capital letter 'M'. This method completely violates that common practice and will seriously confuse anyone that may maintain your CSS in the future.

PXtoEM.com: PX to EM conversion made simple., An online tool to freely convert between pixels, points, rems (ems), and percent values. Primarily for 7.5pt, 10px, 0.625em, 62.5%, x-small, Sample And that's for small print, asides, captions, or the like and not body copy itself. I'm very� Ems to Pixel Conversion-Why 62.5% and not 6.25%? I know that a lot of us are familiar with setting the font size on the body element in our CSS to 62.5%. This means that 1em will equal 10px and helps for keeping things pixel perfect but als

Arguably, but then you lose control over your scale. Don't forget that headings will typically inherit those same sizes in proportion to their rank (i.e. <h1> will be largest, <h2> slightly smaller). If you want to decrease those elements, you will need to use em values with a lot of decimal placeholders. Imagine <h4> font-size: 0.005em.

Or worse, if you want fonts to be scaled larger, you could potentially be looking at font-size: 40em or something ridiculous.

In short, 1em = 10px is much more practical for the scaled values of fonts. While a 1:1 scale might make sense on paper, it doesn't lend itself that well to sensible and maintainable CSS.

Font size conversion px-pt-em-rem-percent, There is no point in thinking in (R)EM instead of pixels when defining. and font- sizes in pixels and let mixins do the pixel-to-(r)em conversion for us. to set it to 6.25% and then have 1px === 1rem because this would not work on some older � Pixel is a static measurement, while percent and EM are relative measurements. The size of an EM or percent depends on its parent. If the text size of body is 16 pixels, then 150% or 1.5 EM will be 24 pixels (1.5 * 16). Look at CSS Units for more measurement units.

The whole "62.5%=10px" thing is fundamentally broken anyway - 62.5% may or may not be 10px depending on the browser, the user's settings, and, especially, the minimum font size setting. So you can't just design in pixels and then "convert" to ems on the assumption that 62.5%=10px, because your design will break all the time. If you want a pixel-perfect design, you have to use pixels as the unit. If you want a flexible design, you need to think about the appropriate units for different elements of the web site - ems for elements which should scale relevant to text size, percentages for elements that should scale relative to window size, and pixels for elements (like images) that shouldn't scale at all.

Anyone who includes font-size: 62.5% in their CSS fundamentally doesn't understand how to design for the web.

Why the 62.5% method still rules with em-based breakpoints , CSS Font Sizes in rem/ px / em / no unit [duplicate] My only recommendation here is to stick with 62.5% to convert rem to an apparent size of But I was wondering: why not set <body> to 6.25%? Then you can use the same dimensions for� Em definition provided by Kyle Schaeffer. The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt.

The conversion may be simpler, but an em wouldn't mean what it is supposed to mean.

1em is supposed to be equal to the width if a capitalized "M" in a given font. If the width of the letter M is 1 pixel, your font is going to be unreadable.

http://en.wikipedia.org/wiki/Em_(typography)

Using fractional em's in CSS's font-size property - css - html, With NinjaUnits converter you can easily convert rems to pixels in seconds. An em is equal to the current font-size, for instance, if the font-size of the document� Here’s a chart that converts points to pixels (and ems and %). It’s an approximation, which will depend on font, browser and the operating system. These are important to know when you are doing web designs that fit to every screen. In below chart we are listing some frequently used measurements in Points, Pixels, Ems and Percents.

I tried to do the same thing, but ran into an issue of using rems for margins and paddings. Setting font-size to 62.5% avoids these issues.

For example, the following CSS

html { 
  font-size: 6.25% /* 16px * .0625 => 1px */
}

p {
  font-size: 1rem;
  margin:    1rem;
}

renders as:

p {
  font-size: 1px;
  margin:    9px; /* WTF?! */
}

Strange, right? I'm assuming this is caused by some odd conflict with minimum font sizes.


Now, if you use font-size: 62.5% on the other hand, things render as expected:

html { 
  font-size: 62.5% /* 16px * .625 => 10px */
}

p {
  font-size: .1rem;
  margin:    .1rem;
}

renders as:

p {
  font-size: 1px;
  margin:    1px;
}

Convert rem to pixels, Percent and EMs on the other hand are relative measurements. The size of EM or percent-based text depends on its parent. If body text is sized at 12 pixels, then text set at 120% or 1.2 EM inside the body will be 1.2 * 12, or 14.4 pixels. WHY SIZE YOUR TEXT WITH EMS IN CSS?

Formula: size in EMs * parent size in pixels Example: .75em * 16px = 12px EM to % Formula: size in EMs * 100 Example: .75em * 100 = 75% Why size your text with EMs in CSS? Style sheets that use EMs are easier to maintain for the designer (especially with PXtoEM.com at your side) and more accessible to end-users.

It's better to assume a browser default of 16px, let the user modify this as they like, and define html {font-size: 62.5%} = 10px / 16px, to get the same "simple calculations" while respecting accessibility options. – eedrah Jun 13 '18 at 14:50

Comments
  • If you want some space or size to be 1px, why don't you just specify 1px, why go via some assumed size of 100% em?
  • @Rolf - because if you set sizes in pixels, IE6 treats them as absolute and the user can't resize text.
  • I understand, but if you assume that 0.0625em == 1px, won't things get unaligned when IE6 resizes? If you try to keep things portable, shouldn't you just avoid thinking in px? The only reason I can think of to use px, is to align things with images (which ie won't resize), and then you want px.
  • Good point re: em-to-px conversion. My browser's default font size is 14px, so 62.5% is 8.75px, not 10px.
  • I like your breakdown of how the measurement types relate to their intents.
  • Another good breakdown of units. demosthenes.info/blog/775/Which-CSS-Measurements-To-Use-When