My Thoughts

A couple of weeks ago I posted an entry in the My Thoughts part of my site asking if anyone could shine any light on how best to implement relative font sizes. I want to make my website accessible to as many people as possible and have taken several steps in doing this, but the relative font size issue just span me out every time I tackled it.

I read through lots of articles and threads on the internet about how important it is to use relative font sizes but all solutions seemed to be using different ways of getting the relative fonts to display correctly.

Well after a bit of experimenting and reading up I have found a solution which works for me. I have tested it in most modern browsers on both Mac and PC, and have not got any issues so far. I decided to use ems as my measurement of choice, as absolute-size keywords still seem to be unpredictable on some browsers I tested on. I believe this is because the different browsers have different values for these different font keywords. Obviously not a good method if consistency across browsers is desired.

You can't use percentages as these still compound in some browsers on nested items. There is possibly a work around as I know the % measurement is still relative to the browsers default font settings but the inheritance of styles causes fonts to be displayed smaller than you would anticipate. If there is a work around I will leave that for another day!

Through experimenting with font sizes I found that 1em is roughly equal to 12pt in size, 1.1em is roughly 13pt and each time you increment a font size by 0.1em it is the same as increasing the font size by 1pt.

Relative Font CSS

body {
/* Sets the base size of all fonts used in site */
/* Scale fonts so 1em ~= 12pt */
font-size: 75%;
line-height: 1.4em;
}

h1 {
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 1.5em;
font-weight: bold;
}

h2 {
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 1.2em;
font-weight: bold;
}

p {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 1.7em;
font-weight: normal;
}
a {
color: #333;
}
a:hover {
color: #1094C2;
text-decoration: none;
}

Using the above CSS code in your style sheet should give you a solid foundation to begin creating your own styles which are accessible to those with visual impairment and will display consistently across different browsers.

If you do have any comments or questions just post it here and I will get back to you.