{"id":25139,"date":"2011-05-24T12:00:06","date_gmt":"2011-05-24T12:00:06","guid":{"rendered":"http:\/\/rafaelfajardo.com\/portfolio\/font-sizing-with-rem\/"},"modified":"2011-05-24T12:00:06","modified_gmt":"2011-05-24T12:00:06","slug":"font-sizing-with-rem","status":"publish","type":"post","link":"https:\/\/rafaelfajardo.com\/portfolio\/font-sizing-with-rem\/","title":{"rendered":"Font Sizing with rem"},"content":{"rendered":"<p><a href='http:\/\/snook.ca\/archives\/html_and_css\/font-size-with-rem'>Font Sizing with rem<\/a><\/p>\n<div class=\"link_description\">\n<p><a href=\"http:\/\/blog.petervidani.com\/post\/5367234491\" class=\"tumblr_blog\">petervidani<\/a>:<\/p>\n<blockquote>\n<p><a href=\"http:\/\/cameronmoll.tumblr.com\/post\/5362868693\">cameronmoll<\/a>:<\/p>\n<blockquote>\n<p>Jonathan Snook:<\/p>\n<blockquote>\n<p>CSS3 introduces a few new units, including the rem unit, which stands for \u201croot em\u201d. If this hasn\u2019t put you to sleep yet, then let\u2019s look at how rem works.<\/p>\n<p>The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root\u2014or the html\u2014element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.<\/p>\n<\/blockquote>\n<p>This is golden. Sizing with <code>em<\/code> can be a nightmare because of how it\u2019s sized in relation to the parent element. With <code>rem<\/code> being based on the root element, it\u2019s the best of both worlds \u2014 the relativeness of <code>em<\/code> with the reliability of <code>px<\/code>.<\/p>\n<p>Browser support includes Safari 5, Chrome, Firefox 3.6+, and even IE9. At the end of his article, Jonathan provides a fallback at the end for older versions of browsers.<\/p>\n<\/blockquote>\n<p>This is what <code>em<\/code> should have been all along. I\u2019ll stick to <code>px<\/code> though.<\/p>\n<\/blockquote>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Font Sizing with rem petervidani: cameronmoll: Jonathan Snook: CSS3 introduces a few new units, including the rem unit, which stands for \u201croot em\u201d. If this hasn\u2019t put you to sleep yet, then let\u2019s look at how rem works. The em unit is relative to the font-size of the parent, which causes the compounding issue. The [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"link","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[10],"tags":[],"class_list":["post-25139","post","type-post","status-publish","format-link","hentry","category-words","post_format-post-format-link"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p6PWot-6xt","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/rafaelfajardo.com\/portfolio\/wp-json\/wp\/v2\/posts\/25139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rafaelfajardo.com\/portfolio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rafaelfajardo.com\/portfolio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rafaelfajardo.com\/portfolio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rafaelfajardo.com\/portfolio\/wp-json\/wp\/v2\/comments?post=25139"}],"version-history":[{"count":0,"href":"https:\/\/rafaelfajardo.com\/portfolio\/wp-json\/wp\/v2\/posts\/25139\/revisions"}],"wp:attachment":[{"href":"https:\/\/rafaelfajardo.com\/portfolio\/wp-json\/wp\/v2\/media?parent=25139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rafaelfajardo.com\/portfolio\/wp-json\/wp\/v2\/categories?post=25139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rafaelfajardo.com\/portfolio\/wp-json\/wp\/v2\/tags?post=25139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}