Skip to content

Instantly share code, notes, and snippets.

@Integralist
Created April 15, 2012 09:23
Show Gist options
  • Save Integralist/2391459 to your computer and use it in GitHub Desktop.
Save Integralist/2391459 to your computer and use it in GitHub Desktop.
Relative Sizing

If you set the <body> element to have font-size: 100% then you are effectively setting the pixel size base line to be 16px.

So now 1em equals 16px.

To size either our text or our layouts to match what the designer has specified in pixels we use the following calculation:

target / context = result

This means if your target font size for a <h1> is 24px and your 'context' (the container) is 16px then you calculate this as:

24 / 16 = 1.5

So you set your font size to 1.5em.

Same for a layout. If the designer has made the website 960px wide and has an element within it that is 900px wide.

First thing to do is to set the 960px width to be a percentage. Well we have to just take a guess on this I'm afraid so we'll choose 90%.

But thankfully to turn 900px into a percentage we can use the previous calculation of target / context = result again:

900 / 960 = .9375

But now (as you're using percentages for your layout) you move the decimal over two places: 93.75%

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment