What Is Difference Between CSS Em and Ch Units

What is difference between CSS em and ch units?

I've looked at all the answers and also your comments on them and I got the feeling that you want using em and ch units mainly for width or height properties.

[...] they are not good for setting a field width then?

And from my perspective, I would not recommend that.

CH-Units

First of all, I've never worked with ch before and honestly I do not see any real use for it - maybe an input for the year, so that there is always the width for four numbers, but not more - because it never tells you exactly how wide an element will end up.

I changed my mind and now I see a good real use for ch. :)

The example of an input for the year, so that there is always the width for four numbers, will persist. But ch is also very useful for correctly defining the text width of a paragraph.

With pixel, relative or percentage values it is very difficult - especially for a responsive design - to set the perfect text width per line including spacing for a paragraph. However, this can be a liability for the user experience on the website. An abstract by Atlassian Design is a perfect match:

Set the reading environment to suit the reader. Wide lines of text are difficult to read and make it harder for people to focus. While there is no right way to measure the perfect width for text, a good goal is to aim for between 60 and 100 characters per line including spacing. Setting an optimal line length breaks up content into easily digestible blocks.
Source: Atlassian Design

This is where ch can be used perfectly as a unit. For a better view, you can look at the examples at the end.

But now finally to the definition of ch ;)

As often been said, ch refers to the width of the 0 character to its font size.

As example: The body has a font-size: 16px and the 0 character has a width of 10px from the selected font-family, then 1ch equals 10px. And even that is still inaccurate, because e.g. italic or bold can change the width of the character.

EM- & REM-Units

As also often said, em - and to bring one more player in - also rem are relative to the font-size.

Where rem is always relative to the root element font-size, em is relative to the font-size of the own element or the last parent element (can be also the root element) with a font-size.

As em example: Only the body has a font-size: 16px; and the element got no font-size himself, then 1em equals 16px. If a parent of the element or the element himself got a font-size: 20px;, then 1em equals 20px. em units can also multiply upon themselves.

As rem example: The body has a font-size: 16px;, then 1rem equals 16px. Even if the element himself or a parent element got a font-size: 20px;, 1rem still equals to the body settings of 16px.

[...] if ch is size of '0' in font, why is not em the size of 'M' in font [...]

em was originally based on the typographic measurement of the current font M character but that is already outdated. As you can see now, it always references to a "fixed start-value" and not the width of a character.

Recommended usage

As I said, from my perspective I would not recommend to use ch, em or rem for width or height properties. These units are more useful for "textual" properties.

Some examples:

All h2 should be four times as big as the text: font-size: 4rem;
All p should always have a margin of a half line: margin-bottom: 0.5em;
The line-height of elements should be 20% greater than the font-size: line-height: 1.2em;
A input for the year, should always have the width of four numbers: width: 4ch;
The text width of a p should always have a width of 80 characters per line including spacing: width: 80ch;

but pixels are not flexible when dealing with different devices

For this, as a conclusion, I would advise you to simply work with percentages width: 80%; or the viewport width and viewport height height: 100vh; width: 100vw;. Or at least always with a maximum value: width: 1000px; max-width: 100%;.

Here are a few snippets - just for the examples with width properties - for a better understanding:

em - Relative to the font size of the own element or the last parent element with a font size

body {
  font-size: 16px;
}

p {
  font-weight: bold;
}

div {
  width: 1em;
  height: 50px;
  background: lightgray;
}

.em-0-5 {
  width: 0.5em;
}

.em-10 {
  width: 10em;
}

.fs-10 {
  font-size: 10px;
}

.parent {
  font-size: 0.5em;
}

.parent div {
  width: 10em;
}

<p>1em (body font-size * 1 = 16px)</p>

<div></div>

<p>0.5em (body font-size * 0.5 = 8px)</p>

<div class="em-0-5"></div>

<p>10em (body font-size * 10 = 160px)</p>

<div class="em-10"></div>

<p>10em from 10px own element font-size (element font-size * 10 = 100px)</p>

<div class="em-10 fs-10"></div>

<p>10em from 0.5em parent font-size (body font-size * parent font-size * 10 = 80px)</p>

<span class="parent">

  <div></div>

</span>

What's the difference between em units and percents?

OK, so I've decided to sum up the answers.

line-height's percentage value is relative to the current font-size.
em units is always relative to font-size.
Percents depends on context. For example, if they're used in font-size, they will be relative to the current font-size; if it's in height, they will be relative to the height.
It changes a little bit when parent tag has font size declared as "small", "medium" or "large", because values of these are affected by browser's setting. In this context 1em == 100%, 1em seems to make setting a bit more "small" or a bit more "large" than 100%, read about it here

Length units ch vs em on IE

Any solution that goes away from using the ch length unit ruins some perfectly good CSS for Firefox and Chrome just for the benefit of IE.

The following solution seems to be a good compromise as it works for IE10+ with some alternate CSS. IE9 is dropped from support by Microsoft so not going to lengths of supporting that too although it would be possible with conditional comments or other hacks.

.mybox {
    font-family:monospace;
    white-space:pre;
    max-width:82ch;
    width:82ch;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .mybox {
        max-width:95ch;
        width:95ch;
    }
}

Font size in CSS - % or em?

There's a really good article on web typography on A List Apart.

Their conclusion:

Sizing text and line-height in ems,
with a percentage specified on the
body (and an optional caveat for
Safari 2), was shown to provide
accurate, resizable text across all
browsers in common use today. This is
a technique you can put in your kit
bag and use as a best practice for
sizing text in CSS that satisfies both
designers and readers.

Why em instead of px?

The reason I asked this question was that I forgot how to use em's as it was a while I was hacking happily in CSS. People didn't notice that I kept the question general as I wasn't talking about sizing fonts per se. I was more interested in how to define styles on any given block element on the page.

As Henrik Paul and others pointed out em is proportional to the font-size used in the element. It's a common practice to define sizes on block elements in px, however, sizing up fonts in browsers usually breaks this design. Resizing fonts is commonly done with the shortcut keys Ctrl++ or Ctrl+-. So a good practice is to use em's instead.

Using px to define the width

Here is an illustrating example. Say we have a div-tag that we want to turn into a stylish date box, we may have HTML-code that looks like this:

<div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

A simple implementation would defining the width of the date-box class in px:

* { margin: 0; padding: 0; }

p.month { font-size: 10pt; }

p.day { font-size: 24pt; font-weight: bold; }

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 50px;
}

The problem

However, if we want to size the text up in our browser the design will break. The text will also bleed outside the box which is almost the same what happens with SO's design as flodin points out. This is because the box will remain the same size in width as it is locked to 50px.

Using em instead

A smarter way is to define the width in ems instead:

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 2.5em;
}

* { margin: 0; padding: 0; font-size: 10pt; }

// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt

That way you have a fluid design on the date-box, i.e. the box will size up together with the text in proportion to the font-size defined for the date-box. In this example, the font-size is defined in * as 10pt and will size up 2.5 times to that font size. So when you're sizing the fonts in the browser, the box will have 2.5 times the size of that font-size.

What is the value of the css 'ex' unit?

It is useful when you want to size something in relation to the height of your text's lowercase letters. For example, imagine working on a design like so:

In the typographic dimension of design, the height of letters has important spatial relationships to the rest of the elements. The lines in the source image above are intended to help point out the x-height of the text, but they also show where guidelines would be if designing around that text.

As Jonathan pointed out in the comments, ex is simply the height version of em (width).

What is the difference between px, em and ex?

Pixels (px) are browser dependent. It is the absolute size that you would see on your screen.
Em are sort of like percentages. Ems is referring to the base text size. The value of 1 em means the same thing as a value of 100 percent. But you can also say it in the opposite way: A percentage value is just an em multiplied by 100.
Points(pt) are what you would want to use in print media.

CSS3 ch unit inconsistent between IE9+ and other browsers

According to caniuse.com, IE interprets 1ch as the width of the 0 glyph, without the surrounding space. This makes 1ch shorter in IE compared to any other browser.

Why does em font sizing do not change with font type?

In CSS, all dimensions are related to "absolute length units" (px, in, cm, mm, pt, pc) and defaults to a pixel (which is specified in CSS3 as 1/96th of 1 inch).

The three units you are referencing are font-relative lengths, so you would think that they relate directly to a fonts dimensions, but em's relate differently.

ex and ch are unique to the fonts idiosyncrasies, but em's are measured by the inherited font-size of the element (always an "absolute length unit" - usually referencing a pixel unit).

em unit: Equal to the computed value of the ‘font-size’ property of the element on which it is used (1.2em is 20% greater than the specific or inherited font size... always in an "absolute length unit").

The unit length doesn't change when you change font-family because em's are based on the font size - which is always based on an "absolute length unit". If no font size is specified, the default is 16px.

ex unit: Equal to the used x-height of the first available font, the value of one unit is unique to that font. The x-height is so called because it is often equal to the height of the lowercase "x". However, an ‘ex’ is defined even for fonts that do not contain an "x". I can think of no case where this is useful.

ch unit: width of the 0 (zero) character - as arbitrary as an ex measurement.

http://www.w3.org/TR/css3-values/#absolute-lengths

http://www.w3.org/TR/css3-values/#em-unit

What Is Difference Between CSS Em and Ch Units