As I delve into an older project that heavily relies on em's for all design elements, including font sizes and layouts, I can't help but question the benefits of using em's in this way. Do they truly offer any advantages when it comes to laying out pages and styling fonts?
Personally, I've started moving away from using em's for fonts because I find them confusing, especially without resorting to the body { font-size: 62.5%; } hack (which is apparently discouraged). Furthermore, modern browsers are said to handle pixel sizes properly.
Is there really any advantage to utilizing em's for optimizing layouts on mobile devices? As per my understanding, specifying the viewport meta tag below should ensure that mobile browsers display pixels at a standard size:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
According to the CSS 2.1 spec:
The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm's length, 1px corresponds to about 0.26 mm (1/96 inch).
In essence, my inquiry revolves around whether em's have distinct advantages over px for sizing layouts and fonts, beyond the capability of em's to facilitate on-site font resizing functionality. Or has the debate between em's and px simply boiled down to personal preference?