Blurry Stuff — An Em Problem
The confusion over nesting elements set in
em has been over for a couple years now, so what else is there to worry about this magnificent unit we all learned to love?
Today I faced this problem while switching from SVG images to an icon font in an upcoming layout revision for Clicksign.
First, I thought it could be something related to the font or box size, but had no success in figuring it out until I started commenting out the CSS of elements surrounding the icon. I noticed that
margin had something to do with it.
This little forgotten feature in Chrome’s Developer Tools helped me confirm my suspicions:
It turned out that
1.8em was generating a
7.920px padding that nudged the icon to a half pixel. Olá Brother’s amazing Sip app also helped me with its quick zoom feature.
Be extra careful using
em units when you have pixel-perfect demanding assets like icon fonts and other small glyphs. You can either fall back to
px or fine-tune your
em numbers to achieve round values.