On 2014-07-24 22:47 (GMT-0400) Crest Christopher composed:
Is this a golden rule, 1em = 16px ?
Per happenstance, 16px is the most commonly shipped default. In some browsers, the default is actually 12pt, but because the display density a genuine traditional pt depends upon assumes a density of 96 DPI, 12pt translates to 16px. This 3:4 relationship is written into CSS3 as the definition of a pt, unlike in previous CSS versions, where a pt had the same meaning as in the rest of the universe.
Still, not every browser has always shipped with 16px whether directly or indirectly.
Furthermore, the browser default is one of those things that makes a personal computer personal - it can be personalized, the object being that it is only the user who is in position to make a determination what size is optimal. It only makes sense that the optimal size and the default size are made equal. Anyone who assumes that is not the case is taking a tyrannical view of web styling, styling for the stylist and/or whoever pays him rather the much larger multitudes who deign to use his work.
If the math is 120 * 16 = 1920 px or rounded down as mentioned 19px, correct ?
It bothers me that you seem to be having such a hard time with any mathematical relationship, because it seems you're focusing on px, which should be the job of the browser. Browsers are naturally good at math. They may not all round exactly the same, but they always get math right. 1.2 X 16 is always 19.2, just as 120% of 16 is always 19.2, just as 1.2rem is always 19.2px - if the initial value of the root element is in fact 16px.
OTOH, the em unit at the document root, where it's equal to 1rem, is also equal to the user's definition of optimal text size, as reflected by the browser's default size setting. If you focus on the rem, and use fractions and multiples thereof in same manner as you would a px, regardless what the browser's default size setting is, the browser can do the math to convert to px. The bonus is whatever default size works best for you in your own browser can work equally well for the user's browser, whatever its default size has been personalized to be, including for the majority of users the shipped from vendor size.
When you think in em/rem instead thinking in px, the math can be very much simpler. Instead of saying to yourself "this is how wide I want, so that I can fit this many words or letters on a line" or "one word's worth of whitespace", then figuring out how many px it takes to get that width, you can instead use an em/rem to get however many you want (almost) directly (since in width you get about 2 characters' width out of one em). If you want paragraphs to be 60 characters of optimal size wide, then it can be as simple as 60 / 2 == 30em! If you want a code block to be 12 lines tall, it could be as simple as 'code {height: 12em}'!
-- "The wise are known for their understanding, and pleasant words are persuasive." Proverbs 16:21 (New Living Translation) Team OS/2 ** Reg. Linux User #211409 ** a11y rocks! Felix Miata *** http://fm.no-ip.com/ ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
