Sizing - Comparing points & percentages

By now you should understand the idea behind representing font sizes in percentages rather than points, so now let's move on to a more practical demonstration. The first thing I thought when I heard about the whole technique discussed here was "I be they wont look the same" and "It's going to take a tonne of fiddling to get the sizes the same way they were before" but neither of these points are valid, once you have looked over the information below most of your questions should have been answered.

The following show you the sizes of a font first of all in the absolute size, then in the relative size side-by-side to allow you to see for yourself that using a percentage based system doesn't make your design choices impossible.

Please note that the base font size without any modifications works out to 12pt, if your pages use the same default font size then the numbers quoted below will work perfectly for you. If on the other hand your pages use a different default size (for example this site used to use 10pt fonts as the default), or you simply want to see the maths behind this then please see the note at the bottom of the page on how to change this example to work with a different base font.

Comparisions between points and percentages

Top sized to 6pt and bottom sized to 50%;

Top sized to 7pt and bottom sized to 58%;

Top sized to 8pt and bottom sized to 67%;

Top sized to 9pt and bottom sized to 75%;

Top sized to 10pt and bottom sized to 83%;

Top sized to 11pt and bottom sized to 92%;

Top sized to 12pt and bottom sized to 100%;

Top sized to 14pt and bottom sized to 117%;

Top sized to 16pt and bottom sized to 133%;

Top sized to 18pt and bottom sized to 150%;

Top sized to 20pt and bottom sized to 167%;

Top sized to 22pt and bottom sized to 183%;

Top sized to 24pt and bottom sized to 200%;

Top sized to 26pt and bottom sized to 217%;

Top sized to 28pt and bottom sized to 233%;

Top sized to 30pt and bottom sized to 250%;

Additional notes

As obvious as this is, I will explain how to convert from a font with a certain point size to the equivalent percentage based calculation. To do this yourself you need to know the size in points of your original font and also what your base font size is.

Here's the calculation you require;
PERCENTAGE = ( POINT_SIZE / BASE_POINT_SIZE ) x 100
and for a practical example let's replace the variables with the numbers from my 10pt font example above so you can see how I reached that answer;
83.3r = ( 10 / 12 ) x 100

As the more mathematically enclined of you will have noticed - yes that is just a standard "work out the percentage" maths with a multiply thrown in to make the returned number make more sense if you never used that particular calculation before. Told you it was obvious didn't I?

© evolved code
2000 - 2008