Log in Sign Up

Font-size: Use em, not px

Designers like to have control over every aspect of their design. Makes sense, right? But while you may be able to create a stunning, magical, background, over which the text sparkles like so much pixie dust, if the end user can't read it, it's worthless. You have to allow for users who are visually impaired and/or may have their default fonts set to something larger than-- oh, I don't know-- 6px. Saying that all the body text must be exactly 12px and that all the h1 text must be 14px is not going to work for someone who has trouble seeing anything smaller than 16px.

Yes, I know, they can zoom in with their browser. But let's face it, that's not an elegant solution and you can't expect all users to be patient enough to stick around if they can't immediately read the text. However, if they have their default font set to 16px and you use 1em for your body text, guess what? Now they can read the text. By using "em" or "%", you can adjust your font sizes relative to what the end user prefers. Bonus: it wreaks much less havoc on mobile browsers with super-high resolution screens.

Does this mean any extra work on your part? If you're doing your job right, it shouldn't. You just need to make sure your design works on different browsers and at different resolutions. But you're doing that anyway, right?

Try MagicEdit today!

Sign Up for free Demo
Scroll to Top