 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 i love dan malls soft serve technique but then you have to make a special case for ie6 hopefully it wont be too much longer that we have to worry about ie6 getting a usable base font size ok so to start i like setting the font size of the body to 62 5% i used to take dan cederholms approach of setting the font size to small but i finally realized that it did not give me a nice base font size to play with so by setting the font size of the body to 62 5% 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 1 2em since we had a base size of 10px our font size in the container becomes 12px heading font sizes 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 h1 22px h2 20px h3 18px h4 16px h5 14px h6 12px again these are just values that i am suggesting you could definitely choose whatever you want to get these font sizes we just need to do some simple math example lets 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 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 attacking the margins so obviously you want to avoid letting the browser control how your elements will be spaced so lets work on setting the margins on these elements too remove the default margins the first thing i do in a stylesheet is zero out the margins and paddings html body div h1 h2 h3 h4 h5 h6 ul ol dl li dt dd p blockquote pre form th td margin 0 padding 0 next i set a bottom margin of 1em on p ul ol dl blockquote p ul ol dl blockquote margin bottom 1em then to get an equal amount of margin on the bottom of the headings we just need to do more simple math we cant just set the bottom margin to 1em because our font size on these elements are bigger than the rest of the content example so lets 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 h3 font size 1 5em margin bottom 0 667em 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 page showing elements with equal margins 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 in my opinion the example page with custom margins looks much better anyone else have other methods 