Thisismarkantony.com

This is the best thing I've come across for some time - a logical/technical way to pick font sizes in relation to each other. Read on and if you have time, watch the video as Tim Brown gives his explanation (30mins). Essentially this technique is built around using a harmonious modular scale (using the Golden Ratio or any other "beautiful" scale) and applying it to text size (so simple I can't believe I haven't run into this before!!) Once you have settled on a suitable type size for the body text you can use the Golden Ratio to find a modular scale of headings and smaller fonts sizes that are visually in proportion, for example: Golden ratio = 1:1.618 Text size = 16px 16 x 1.618 = 25.888 16 / 1.618 = 9.888 This produces a pixel scale: 41.9, 25.9, 16, 9.9, 6.1 You can also "reverse engineer" an element box width to find the appropriate text/heading size, for example if you have a column of 570px (like this one) then divided by the G...

Following on from the last post about calculating beautifully proportioned text sizes, I thought it would be good to cover the "correct" unit of text measurement rather than just sticking with pixels. The W3C recommends that you use ems for font sizes - why? The "em" unit is the most scalable when it comes to on-screen display (read more from  W3C here ) Basically it gives users the ability to scale up all the font in a web page using their browser settings and see them "grow" proportionally. This is for accessibility reasons. Generally when you are in the design phase using pixels sizes is easier - so in the end you'll need to convert from pixels to ems. So how to convert pixels to ems? Most browsers have a default font size for "medium" text of 16px. In this case 1em = 16px. So if you want a font size of 20px you need to divide 20 by 16 which equals 1.25em - easy. You can use the following widget to calculate em sizes. Another trick...