There are those that say,
em is probably the best way to set font-sizes. px should be avoided.
Others point out,
em should be avoided for defining font-size. px is preferred in order to assure that fonts fit nicely into the layout.
But, what about mobile devices?
px is relative to the device you’re on.
So, what do you use and why?
px
Setting your fonts with pixel values (px) is the most accurate. You can’t get much more accurate than designing by pixel, right? No matter the end user’s OS, aliased, anti-aliased, cross-browsers, no matter, 16px is 16px. In the case of fonts, the screen appearance may vary by browser, etc … , but it won’t ever turn your layout or design into a train wreck.
em
These dudes are a little tricky. In fact, there are some online tools to aid designers in converting px to em.
Here’s how they work:
An em is a unit of measurement in the field of typography, equal to the size of the current font.
So, if your font-size is at 16px, then 1em is 16px. em’s works like a multiplier, so if 1em is defined as 16px, then 2em is 32px. Change the base em, and everything on your design using an em value bumps up uniformly. This can often be the draw in em use. You can invoke a font-size selector for you end user, and if you use em throughout your design, you can “grow” or “shrink” your page despite the screen resolution.
What Do You Use?
Do you use em for just your fonts? Or fonts and layout?
Do you only use em or px? Or do you use them for specific functions?
What do you use?
[via Forrst & CSS-Tricks | Image via MarcelGermain]
Ben says
PX for layout, EM for fonts. But only because that’s what the cool kids use.
Eric Dye says
LOL! You’re awesome!
James Cooper says
To throw another option in the mix, I’ve used % for the last few years (like em I guess…). But with page zoom standard now (and thus no “IE can’t resize px” problems anymore) I’ve been trying px again. For responsive/mobile px seems to be much easier/look better than em.
Eric Dye says
#PROTIP
Antoine RJ Wright says
Percentages for layout, pixels for border sizes only. Ems for fonts, line heights, and even box widths where the boxes need to resize for certain screen sizes and contain text.
Eric Dye says
Nice! Way to break it down, man!
Scott Reyes says
I use px because I am learning. I can more easily associate px with the output size. It’s like miles vs kilometers.
I guess I need to learn.
Eric Dye says
I’m with you.