{"id":145,"date":"2005-10-21T15:35:21","date_gmt":"2005-10-21T13:35:21","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/archives\/2005\/10\/21\/typetesters-base-font-size\/"},"modified":"2012-12-21T16:42:16","modified_gmt":"2012-12-21T15:42:16","slug":"typetesters-base-font-size","status":"publish","type":"post","link":"https:\/\/www.maratz.com\/blog\/archives\/2005\/10\/21\/typetesters-base-font-size\/","title":{"rendered":"Typetester\u2019s base font size"},"content":{"rendered":"<p>As much as I\u2019m proud of the <a href=\"http:\/\/www.typetester.org\/\">Typetester\u2019s<\/a> popularity and the recent revival of typography for the screen, there\u2019s still a significant number of web designers, who are confused about the TT\u2019s base font size. <del>Until I place default sizing control into the interface, here\u2019s a quick clarification.<\/del> <ins>The base size control is now added.<\/ins><\/p>\n<p>The base font size of the TT is 10px, which means 1em is 10px, 1.2em is 12px and so on.<\/p>\n<p>The ems for the screen are actually multipliers of the document\u2019s base font size. The good practice is to set document\u2019s font size to 10px (or if you want it to be resizable by the Internet Explorer users, set it to 62.5%).<\/p>\n<pre><code>body { font-size: 62.5%; }<\/code><\/pre>\n<p>Once you fix your global sizing (which is 16px by default in most of today\u2019s graphic user agents), it\u2019s easy to multiply textual elements with ems.<\/p>\n<pre><code>body { font-size: 62.5%;  \/* 16px \u00d7 62.5% = 10px *\/ }\r\nh1 { font-size: 2em; \/* 10px \u00d7 2em = 20px *\/ }\r\np { font-size: 1.2em; \/* 10px \u00d7 1.2em = 12px *\/ }\r\n<\/code><\/pre>\n<p>The reason behind setting the body element\u2019s font size to 10px, is the ease of multiplying everything else with round number 10. If we set font size to 16px (or 100%, or not set it up altogether), the 1.1em would be 17.6px, which is a pretty nasty number to work with, since the current screens can\u2019t render 0.6 of a pixel.<\/p>\n<p>Still not convinced? Try calculating what would be the font size value set in ems, if we wanted to typeset a text at 18px?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Font sizing with ems in Typetester<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[7,16],"tags":[25,33],"_links":{"self":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/145"}],"collection":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=145"}],"version-history":[{"count":0,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/145\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=145"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}