Font size percentage of what ?

When working on a webapp, font sizes is set thru styles. You can choose different measuring systems (pixel, point and percentage)
I don’t understand what 's the percentage system ? What does it refer to ?


Relative to the base font size.

base font size? what’s that ?

The font size of the containing element.
Say you have an element with font size 14px
An internal element with font-size:200% (or 2em) will result with font- size of 28px

Within this last element you have another element with font size:50% (.5em)
This element will have: 14% (28 * 50%)

Why use relative measure ?

You change idea and want the first element with 12px then automatically, without any other change, the first internal element will have 24px and the inner inner element 12px.

You set the font size for the html and the body element or the body element alone. If you don’t set it, the browser’s standard font will be 100%.

If you inspect a Xojo web application, you will see that this CSS rule is added by the framework:

body { font-family: "Lucida Grande", sans-serif; font-size: 10pt; }

So 10pt is 100%.

So the percentage is relative to that. Of course if you nest a HTML element into another, which has for example font-size: 150%, the percentage of this inner element will be calculated based upon 15pt.