While not completely related to our Phi explanation and exercise, (we'll be back to that soon, I promise,) explaining ems is absolutely relevant to typography and especially, to responsive typography.
In the old times of manual typesetting, the line-height of the physical block that the letter was built upon was the em. This gave birth to the element knowledge and arbitrary measure of it. Yes, it's arbitrary because it varies from font to font, usually being defined as the width of the capital M (hence the em name,) since the M usually fulfilled the casted blocks width. One em was equal to the current point size – so 1em generically equals 1pt.
In CSS, the em is equal to the height of the font. Since a standard needed to be developed for all browser rules and rendering options, 1em lost its arbitrary measure, being equal to a readable standard of 16pt for the screen. Height still varies depending on the font being used, but writing 1em without any user specific declaration will always mean 16pt, despite the font.
In fact, you can define the em rule as any other: if you apply the font-size for every written part in the body selector through a percentage or number, you'll modify the standard behavior: for example a declaration like this one:
body { font-size: 62,5%; }This will reduce and render the 16pt em to 10pt as a regular measure. If you specify later in the CSS, your elements as 1em – they will be rendered at 10px.
An em is a worldwide standard, defining the 16pt value. But within your project, they easily turn into relative values, referring to the defined measure in your document.
Acting on just the containing element, their use in responsive design is really a must: whatever method you use to resize the website content, just defining again the base in your breakpoint will make all the successive elements resize accordingly.
Pixel values on the other hand, being fixed, allow a better, more precise control on the design. But as I said they are fixed: they aren't relative to any element: If you want them to scale for the mobile viewer, you'll have to define each element again.
Despite being relative font sizing values, problems in the standard submission and implementation made it act quite variedly: while the idea was good, the implementation lacked something here and there, making it a contextual element.
It simply means, unfortunately, that the original em behavior has been shifted: not only referring to the base element, it now calls and scale accordingly to its container element.
Here we define a body element of 100% or 1em:
p { font-size: 0.625em }This will act normally, being rendered at 10px.
But if our p is wrapped inside an article, it will act contextually: meaning it will still be rendered at 0.625em – but according to the px size of the article itself, not longer of the base element and measure set in our page. This little defect means more math for us – and a less-straightforward implementation, since in responsive, we may need to change more than one value. Still, since its launch, this element has been more powerful and adjustable than the pixel defined size.