{"id":19484,"date":"2014-01-17T12:11:45","date_gmt":"2014-01-17T10:11:45","guid":{"rendered":"https:\/\/mamchenkov.net\/wordpress\/?p=19484"},"modified":"2014-01-17T12:11:45","modified_gmt":"2014-01-17T10:11:45","slug":"font-sizing-with-rem","status":"publish","type":"post","link":"https:\/\/mamchenkov.net\/wordpress\/2014\/01\/17\/font-sizing-with-rem\/","title":{"rendered":"Font sizing with REM"},"content":{"rendered":"\n

Font sizing with REM<\/a><\/p>\n

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\u00a0html<\/code>\u2014element. That means that we can define a single font size on the\u00a0html<\/code>element and define all rem units to be a percentage of that.<\/p>\n

[…]<\/p>\n

You might be surprised to find that browser support is surprisingly decent: Safari 5, Chrome, Firefox 3.6+, and even Internet Explorer 9 have support for this. The nice part is that IE9 supports resizing text when defined using rems. (Alas, poor Opera (up to 11.10, at least) hasn’t implemented rem units yet.)<\/p>\n

What do we do for browsers that don’t support rem units? We can specify the fall-back using px, if you don’t mind users of older versions of Internet Explorer still being unable to resize the text (well, there’s still page zoom in IE7 and IE8). To do so, we specify the font-size using px units first and then define it again using rem units.<\/p><\/blockquote>\n\n","protected":false},"excerpt":{"rendered":"\n

Font sizing with REM 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\u00a0html\u2014element. That means that we can define a single font size on the\u00a0htmlelement and define all rem units to be a percentage of that. […] You might … Continue reading Font sizing with REM<\/span><\/a><\/p>\n\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"link","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_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,"_links_to":"","_links_to_target":""},"categories":[1,62,1334],"tags":[20,1517,3010,1157,1330],"keyring_services":[],"class_list":["post-19484","post","type-post","status-publish","format-link","hentry","category-general","category-technology","category-web-work","tag-browsers","tag-css","tag-typography","tag-web-design","tag-web-development","post_format-post-format-link"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t