What Is the Value of the CSS 'Ex' Unit

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).

Why is CSS 'ex' unit defined using the 'first available font'?

Why is the em unit defined in terms of the font actually used to render the text, and the ex unit using the first available font?

This shouldn’t be the case: both units are intended to be relative to the current font. The definition you provided mentions “font-relative lengths such as ‘ex’,” which also includes the ‘em’ unit.

That said, it seems like the authors agreed that the definition of “first available font” should be clarified: https://github.com/w3c/csswg-drafts/issues/4796

The section you quoted seem to imply that if the first font in the font-family list exists, but the U+0020 (space) character isn’t in the font, then the next font should be used. In practice, it sounds like browsers weren’t doing this anyway, and that probably wasn’t the original intent.

You can see the change that is being made to the definition here, as summarized in that issue: https://github.com/w3c/csswg-drafts/commit/7c2108c1764f328e0b60fffed47d3885a3dc7c11?diff=split

Why does the algorithm look for the space to compute the height of the letter 'x'? An explanation in layman terms would be very appreciated.

For the purpose of collecting and calculating font metrics, the U+0020 space is most likely the earliest and most common code point that could contain that information and would make sense to check. Many metrics are being calculated then, like the line height and em unit, not just the ex unit.

Beyond that, CSS ex unit section gives more detail on how that value is determined:

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". The x-height of a font can be found in different ways. Some fonts contain reliable metrics for the x-height. If reliable font metrics are not available, UAs may determine the x-height from the height of a lowercase glyph. One possible heuristic is to look at how far the glyph for the lowercase "o" extends below the baseline, and subtract that value from the top of its bounding box. In the cases where it is impossible or impractical to determine the x-height, a value of 0.5em must be assumed.

How is the 'ex' unit in CSS useful?

I'd think ex should be used instead of em when dealing with vertical rather than horizontal measurements (e.g., height instead of width).

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>

var div = document.createElement('div'); div.style.fontSize = '1000px';div.style.height = '1ex';document.body.append(div);var xHeight = div.scrollHeight;document.body.removeChild(div);
console.log('1ex = 0.'+xHeight+'em');

if ( contains("+") || contains("-") ) {
   // Code such that % don't get remove
} 
else if ( contains("/") ) {
  // Code such that % gets removed
}