The font-sizes of SharePoint are defined in pixels, points, and sometimes in percent or em. 

If a customer would have the font-size relative, I would advise him not to. Relative
fonts inherit from each other and SharePoint has a lot of dirty nested tables, which
would make this work almost undoable.

If a customer really would have a relative font-size, I would tell him to choose from
one of the keywords for relative font sizes. Mostly small or x-small.
But this means that the overall font-size will become a little bit bigger or smaller,
depending on his choice. This, however is the most simple way to make the fonts relative.
It’ll take you about 1,5 minutes to implement it, instead of a few days. Below every
other CSS code paste this:


*{
    font-size:small;
}

If a customer really really really would like to have every font relative and not
want to have a bigger or smaller overall font (and you cannot install the AKS), and
you are the implementer of the styles.. You are in trouble!

There are two things you can do: quit your job, or read the rest of this blog post.
Cause there is hope!

#1: First, scale the browsers’ font-size from large to small and back. Take a good
look to see what doesn’t scale. You need to focus on those text. In this example we’ll
focus on the ‘advanced search’ button, on the right of the search engine.

#2: Now open the same page in Firefox and start the add-on Firebug. If you haven’t
got it already, download
it here. Choose select and select the advanced search link. Now look at the CSS
attached to the link and find where font-size is declared  (and not inherited).
In this example select the <a> tag.
The font-size is declared to the elements .ms-sblink
a:link and .ms-sblink
a:link

#3: Copy the class or ID-names to which the property is granted and paste these on
a new rule in your CSS. In this example either a:link and a:visited are
used, so by setting just ‘.ms-sblink a’
you will declare both.

#4: In FireBug, choose options and Show Computed Style. Here you will see the properties
of that element the way it is rendered in the browser. Find font-size and place it
as a comment in your CSS. In this example that is /*10.7px*/ rounded.
It’s important to do this cause this will let you find parent elements and child elements
later on, with their font-sizes as they were meant to be.

#5: Now you know how big the font-size must become when it’s made relative, and on
what elements the declaration must be placed. Because of the dependency of the relative
font-sizes to it’s parents, it’s important to know which parent element have gotten
which font-size. 

Turn of the Computer styles in Firebug. Select the HTML-tag above the advanced search
link. Here that is the <td> above. Take a look
at the CSS again and find which element does the declaration of the font-size; In
this example that is the class .ms-sbtable.

Find this tag in the HTML by searching tag by tag from the advanced search link to
above. Select the tag that carries the declaration and turn on the computed styles.
Note and remember the font-size. Here that is 16.7px rounded.

#6: If the parent had got a font-size of 16.7px and it’s child must get a font-size
of 10.7px, then it’s the most skillful to calculate how much percent 10.7 of 16.7
is. Here’s a handy example in a excel sheet (screendump)

The percentage behind the child element is calculated by sharing the number of pixels
of the child element on the number of pixels of the parent element.

#7: Always start making relative fonts from top to bottom. Start putting the font-size
of the HTML tag on 100%; Second, put the font-size of the body tag on 100%;

Write down the rest of the style sheet in a way that you can define an element’s parents.
In the example we had already found the element .ms-sblink
a has the parent class .ms-sbtable.
Always write down all of it’s parents class names or ID’s, where a font-size is defined.
By doing this, you can easily define the dependency and therefore inherit.

In this example the class .ms-sblink a depends
on .ms-sbtable, which
depends on .ms-titlearea, which is
dependent on body. Eventually white down in the CSS:

body .ms-titlearea .ms-sbtable .ms-sblink
a {
    /*10.7*/     font-size: 64.1%;
}

Good luck!