If ems essentially give you a result that is a percentage of the base font, what advantage is there to using it, rather than % for font sizing? I have looked around, and haven't really seen anything that implies that the two behave differently from each other. Is there a cascading issue?
2 Answers
EM and PERCENT are both very similar, the only difference between the two can be observed when changing text size on the client browser.
Summary
In theory, the em and rem units are the new and upcoming standard for font sizes on the web, but in practice, the percent unit seems to provide a more consistent and accessible display for users.
Original article by Kyle Schaeffer: http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
-
Thanks @Igorek! That is really helpful for base-font sizing, though it doesn't get into the reasoning behind his use of ems: "when I create a new design, I will use percent on the body element (body { font-size: 62.5%; }), and then use the em unit to size it from there." I'm wondering why he wouldn't just use % for everything, since ems ultimately amounts to a % of the base font.– Rath_ErCommented Nov 4, 2015 at 22:32
-
I can speculate that it does not make much sense to mix % and EMs. Now, as I mentioned above EM and REM both are becoming a new standard and based on the difference between EM and REM - REM offers less headaches and better control w/o having to worry about inheritance (you do have to worry about font inheritance with using EM and %).– IgorekCommented Nov 5, 2015 at 4:40
-
3This article is 7 years old, ancient in web design terms. Important current considerations like mobile experience barely existed then. Maybe it is still true, but do you have any more recent information?– user31143Commented Nov 5, 2015 at 6:31
-
@dan1111, the question was "what is the difference", which that article covers in very good detail. That difference is still true to this day. If you are interested in a question "What should I use?", there is a more recent article from 2014 found on CSS-Tricks.com website that talks about rem and em usage. Let me know if that is what you were looking for.– IgorekCommented Nov 5, 2015 at 17:00
-
My questions was less a general "what is the difference" than what are the fundamental advantages or disadvantages of basing my designs on one vs. the other, since they both seem to be about a relationship to some base style. I really wasn't sure if there was some behavioral difference between the two (e.g. cascading happens differently, ???), or if they really are basically the same, and i would be equally well off regardless of which one I use.– Rath_ErCommented Nov 9, 2015 at 21:40
In terms of behaviour, there is no difference. The difference cited above is simply a buggy browser implementation, in my opinion.
I just did a quick test in current Chrome and Firefox, and there is no difference in sizing of child elements : smaller; : larger when the parent is either 1em or 100%. I would very be surprised if this bug was present in any modern browsers; browsers have come a long way in seven years.
The only difference, in practical terms, is the extra character required to use %. Why use 4 when you can use 3?
Beyond that I believe the only difference is the historical precedent. There are hundreds of years of tradition behind setting type size in ems.
-
Thanks! That is what I suspected. It seems kind of funny that the field of user experience has adopted a measurement that is unfamiliar to a large number of people who would be interacting with the code, rather than something as standard and widely understood as %.– Rath_ErCommented Nov 6, 2015 at 16:46