Sizing - Comparing points & percentages
Continued from
page 1 - "Making use of a relative sizing scheme and its impact on your website."
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%;
AaBbCcDd 1234567890
AaBbCcDd 1234567890
Top sized to 7pt and bottom sized to 58%;
AaBbCcDd 1234567890
AaBbCcDd 1234567890
Top sized to 8pt and bottom sized to 67%;
AaBbCcDd 1234567890
AaBbCcDd 1234567890
Top sized to 9pt and bottom sized to 75%;
AaBbCcDd 1234567890
AaBbCcDd 1234567890
Top sized to 10pt and bottom sized to 83%;
AaBbCcDd 1234567890
AaBbCcDd 1234567890
Top sized to 11pt and bottom sized to 92%;
AaBbCcDd 1234567890
AaBbCcDd 1234567890
Top sized to 12pt and bottom sized to 100%;
AaBbCcDd 1234567890
AaBbCcDd 1234567890
Top sized to 14pt and bottom sized to 117%;
AaBbCcDd 1234567890
AaBbCcDd 1234567890
Top sized to 16pt and bottom sized to 133%;
AaBbCcDd 1234567890
AaBbCcDd 1234567890
Top sized to 18pt and bottom sized to 150%;
AaBbCcDd 1234567890
AaBbCcDd 1234567890
Top sized to 20pt and bottom sized to 167%;
AaBbCcDd 1234567890
AaBbCcDd 1234567890
Top sized to 22pt and bottom sized to 183%;
AaBbCcDd 1234567890
AaBbCcDd 1234567890
Top sized to 24pt and bottom sized to 200%;
AaBbCcDd 1234567890
AaBbCcDd 1234567890
Top sized to 26pt and bottom sized to 217%;
AaBbCcDd 1234567890
AaBbCcDd 1234567890
Top sized to 28pt and bottom sized to 233%;
AaBbCcDd 1234567890
AaBbCcDd 1234567890
Top sized to 30pt and bottom sized to 250%;
AaBbCcDd 1234567890
AaBbCcDd 1234567890
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?