Which font sizing is best? EM vs PX vs %

[VinaY]

html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */

[Senff]

Throwing in my 2 cents…. I personally prefer pixels, exactly because they are so absolute and defined.

With ems, and rems, the fonts are all so relative. If the HTML is set to 62.5%, and the body is set to 1.4em, and then the P is set to 1.1em, then you’ll have to calculate what the font size in P is (in this case, it ends up being 15px I think).

With px, you can just set it right away and you don’t have to calculate: set P to 15px, done. I want it to be 15px, so I set it to 15px — instead of 62.5 * 1.4 * 1.1.

Now of course that gives less flexibility (I have not done enough responsive sites to take advantage of rems and ems), and maybe it’s a little lazy, but I find it personally easier to work with.

[joshuanhibbert]

@Senff In today’s world of media queries, being able to alter the typography of an entire site by simply adjusting the root font-size percentage is quite a blessing.

[Senff]

@joshuanhibbert Yea, I know you’re right — I just never had to need for it, really, since I haven’t done many true responsive sites yet…which is why I’ve been sticking with PX so far.

On the other hand, I did use EMs on big e-commerce sites a few years ago, and even though I saw the potential for it, I never actually executed that. In the end, it was all about pixels anyway. None of the sites I ever had to do for a client (freelance or work) was ever meant to be responsive, most of them just want things to work on desktop and “usable” on mobile (not “optimized”). Soooo….

In the end, I just have to do a good responsive site, and that’s when I will probably start using it! :)

[kf420]

I’ve done plenty of responsive sites and still don’t see the benefit of using EMs.

I set grid measurements in % and use PX for typography, and it works out splendidly – responsive and scalable across all devices while maintaining vertical rhythm.

As opposed to my experience with EMs, which always ended in disaster. First I’d have to do a lot of math converting PX to EMs and would end up with crazy numbers like:

li { font-size: 0.75em; line-height: 1.333333333333333em; }

And then there’s the compounding issue – any child element of that list is no longer 12px, it’s 9px! Now I’d have to write extra code to reset every nested element on the entire site. And if at some point client nested things incorrectly in WYSIWYG of CMS, the layout would break.

So, to keep my job (and sanity) I’m sticking with pixels.

[GMB]

I want to maintain a consistent “vertical rhythm” for my sites, so I use pixels for both font-size, line-height, and any padding or margin that’s going to introduce vertical space.

FWIW I have found the following two articles helpful:

http://24ways.org/2006/compose-to-a-vertical-rhythm

http://www.alistapart.com/articles/settingtypeontheweb

[kgscott284]

REM ftw. That is all. If not, go with EMs.

I think you need to definitely have and or develop a solid understanding of each type however, most people i think use what they understand the best. Perfect example: @kf420 perfectly illustrates this point… just do your research and find what works best for you.

[Anonymous]

At the root, (insert your number here)px, 1em, and 1rem are all the same. After that, it breaks down to whether or not you want to stay relative to the root (rem), or stay relative to the parent (em). For me, I like having one base number (usually 100%, or 16px), then base the rest on the parent, so I prefer ems. The reason I like ems over pxs is because, if I want to change all the font sizes for any reason, I only have to change the one base size, and the rest scale accordingly. Some, however, might find rems easier to work with since you base everything on the root size and don’t have to do as much math, but in all reality, I don’t see that it really makes a difference which option you choose aside from just personal preference. RWD will work with any option.

[joshuanhibbert]

@GMB It is quite easy to maintain vertical rhythm using ems. I’ve written an article that explains it: http://joshnh.com/2011/08/03/how-to-set-up-a-baseline-grid/

[Steem]

Altough browsers currently zoom better whether you use px or em, not all visitors know how to zoom or are used to other tools. Furthermore, what if you want to zoom the text but not the entire site? For instance, there are some sites which have buttons to enlarge all the text. In those cases by using em, you only have to enlarge the base font-size, and all the text will scale relative to that (but without scaling the entire site).

And you can argue if it’s a waste of time for such small a group. Yet, how much extra time does it take? If you know your base font-size, how much work is it to calculate it in em? After you have done this a few times, it will just get easier. I am used to it right now and using em takes just as much time as using px.

[David_Leitch]

All the work I’ve done has been using px for text, as I find it easier to work with, however I have been planning to start using rem/em for future projects.

In a course I completed in the last couple of months (which focussed on Accessible Web Design), the tutor was pretty adamant that we use rem/em for font. She reasoned that people with visual impairments would increase the base font size on the browser, rather than zoom in.

In any case, the reason I want to move to using rem/em is because I think it will be easier to keep the proportions between headings, texts and links, regardless of any future changes to the base font.

[David_Leitch]

Glorious, will keep in mind :)

[chrisburton]

I’m personally not a fan for large type that you can see a mile away (e.g. Trent Walton’s site).

[chrisburton]

I just want to make it clear that I don’t find anything wrong with Trent’s site, I just don’t care for such large type on websites. It takes longer to read articles and introduces more scrolling. But as Josh stated, it does come down to personal preference.

[Historical Forums User]

This Lyza Gardner article did a great job reinforcing why ems are so great: [The EMs have it: Proportional Media Queries FTW!](http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/).

You can set everything (padding, widths, etc) in ems and the site will gracefully zoom. This is nice because of the various devices that have a strange default zoom.

@GMB Re: Vertical Rhythm. Chris Coyier in [Smashing Magazine](http://coding.smashingmagazine.com/2012/10/15/css-qa-4/) had this to say:

> But I think it’s a bit of a fool’s errand to enforce perfection on it up and down every page of a website. One image inside the content will most likely throw the whole thing out of whack.

…

>Does it matter if the rhythm gets off? I don’t think so. Well set text will still look good. Remember: the type will still be in rhythm with the text right around it. So who cares if it’s off with text thousands of pixels away from it, and perhaps off screen? Making sure the type looks good in general is far more important than adhering to an invisible grid dogmatically.

For similar reasons as the ems w/ zoom. You don’t know how a person is viewing your website, and you want to create an experience that is flexible and will look as good as is reasonable possible in most situations.

[Author]

Posts