{"authorId":"1","title":"Calculating Font Sizes","slug":"calculating-font-sizes","postDate":1185926702,"expiryDate":null,"enabled":"1","fields":{"2":"<p>There are a lot of articles out there about typography on the web. I wanted to explain my method of controlling font sizes and margins in CSS.<\/p>\n\n<p>I love <a href=\"http:\/\/www.danielmall.com\/archives\/2007\/04\/20\/soft_serve.php\">Dan Mall&rsquo;s Soft Serve Technique<\/a>, but then you have to make a special case for IE6. (Hopefully it won&rsquo;t be too much longer that we have to worry about IE6).<\/p>\n\n<!--more-->\n\n<h2 class=\"replaceHeadline\">Getting a Usable Base Font Size<\/h2>\n\n<p>Ok, so to start, I like setting the font size of the body to <em>62.5%<\/em>. I used to take Dan Cederholm&rsquo;s approach of setting the font size to <em>small<\/em>, but I finally realized that it did not give me a nice base font size to play with.<\/p>\n\n<p>So by setting the font size of the body to <em>62.5%<\/em>, we get a base font size of 10px. This gives us a nice round number to work with. Thus, 1em now equals 10px. 10px is way too small to be the font size of the content though. Thus, I just set the font size of the outter-most container to <em>1.2em<\/em>. Since we had a base size of 10px, our font size in the container becomes 12px.<\/p>\n\n<h2 class=\"replaceHeadline\">Heading Font Sizes<\/h2>\n\n<p>The next thing I like to do is to set the font sizes of all of the headings, h1-h6. A good set of values for headings is:<\/p>\n\n<ul>\n <li>h1: 22px<\/li>\n <li>h2: 20px<\/li>\n <li>h3: 18px<\/li>\n <li>h4: 16px<\/li>\n <li>h5: 14px<\/li>\n <li>h6: 12px<\/li>\n<\/ul>\n\n<p>Again, these are just values that I am suggesting, you could definitely choose whatever you want.<\/p>\n\n<p>To get these font sizes, we just need to do some simple math.<\/p>\n\n<h3 class=\"replaceHeadline\">Example<\/h3>\n\n<p>Let&rsquo;s use an h3 as an example. We take the size that we want the heading to be, 18px, and divide it by the container font size, 12px. So, 18\/12 = 1.5. Then, we set the font size to either 1.5em or 150%. I personally like working with ems, although I used to prefer percentages.<\/p>\n\n<p>So again, font size we want to achieve \/ font size of the container. Use this to compute the rest of your heading font sizes, and then you will have nice pixel values to work with.<\/p>\n\n<h2 class=\"replaceHeadline\">Attacking the Margins<\/h2>\n\n<p>So obviously you want to avoid letting the browser control how your elements will be spaced, so let&rsquo;s work on setting the margins on these elements too.<\/p>\n\n<h3 class=\"replaceHeadline\">Remove the Default Margins<\/h3>\n\n<p>The first thing I do in a stylesheet is zero out the margins and paddings:<\/p>\n\n<div class=\"codeblock\"><code>\nhtml,&nbsp;body,&nbsp;div,&nbsp;h1,&nbsp;h2,&nbsp;h3,&nbsp;h4,&nbsp;h5,&nbsp;h6,&nbsp;ul,&nbsp;ol,&nbsp;dl,&nbsp;li,&nbsp;dt,&nbsp;dd,&nbsp;p,&nbsp;blockquote,&nbsp;pre,&nbsp;form,&nbsp;th,&nbsp;td&nbsp;&#123;<br \/>&nbsp;margin:&nbsp;0;<br \/>&nbsp;padding:&nbsp;0;<br \/>&#125;&nbsp;\n\n<\/code><\/div>\n\n<p>Next, I set a bottom margin of 1em on p, ul, ol, dl, blockquote:<\/p>\n\n<div class=\"codeblock\"><code>\np,&nbsp;ul,&nbsp;ol,&nbsp;dl,&nbsp;blockquote&nbsp;&#123;&nbsp;margin-bottom:&nbsp;1em;&nbsp;&#125;&nbsp;\n\n<\/code><\/div>\n\n<p>Then, to get an equal amount of margin on the bottom of the headings, we just need to do more simple math. We can&rsquo;t just set the bottom margin to 1em because our font size on these elements are bigger than the rest of the content.<\/p>\n\n<h4 class=\"replaceHeadline\">Example<\/h4>\n\n<p>So let&rsquo;s use the h3 as an example again. This time, we take the font size of the container, 12px, and diving it by the size of the heading, 18px. 12\/18 = 0.667. So then, our h3 would look like this:<\/p>\n\n<div class=\"codeblock\"><code>\nh3&nbsp;&#123;<br \/>&nbsp;font-size:&nbsp;1.5em;<br \/>&nbsp;margin-bottom:&nbsp;0.667em;<br \/>&#125;&nbsp;\n\n<\/code><\/div>\n\n<p>So again, font size of the container \/ font size of the element. If you do this for all elements, you will have an equal margin between all elements. I made a <a href=\"http:\/\/trevordavis.net\/play\/fontSize\/\">page showing elements with equal margins<\/a>.<\/p>\n\n<p>I used to think this was best, but I have since realized that I like having the headings closer to the text that is following. So I divide the bottom margin on the headings by 4. Thus, we get a quarter of the margin above the heading, below it.<\/p>\n\n<p>In my opinion, <a href=\"http:\/\/trevordavis.net\/play\/fontsize\/example-2\/\">the example page with custom margins<\/a> looks much better.<\/p>\n\n<p>Anyone else have other methods?<\/p>","14":{"old_id":{}}}}