Font Sizes and Accessibility

on September 18th, 2006 | Filed under CSS Tips, WordPress Tips

Lets take a closer look at the font-size property in CSS.

You might have seen this following piece of code in some theme’s style.css file.
#content h2 { font-size:1.4em;}
or this
#content h2 { font-size:14px;}
or this
#content h2 { font-size:10pt;}

What is the difference between all of these ? which one is better ?

In reality, there is nothing like ‘one is better than the other’, but it depends more on the context where it is applied.

‘1em’ means the size of the character ‘M’ for the given font when the browser displays the page at the normal text size.
(Similarly 1ex = size of character ‘X’)

‘1px’ means 1 pixel size. if your monitor’s display is set to 800 by 600 resolution, that means it displays 800 pixels horizontally, and 600 pixels vertically.

‘1pt’ means 1 point size. This is a fixed size across all fonts = 1/72 of an inch. Fixed size fonts might be usable in some cases but not for all.

Q : so what are Relative units for font ?

A : something like ’em’, ‘ex’, ‘px’ etc

Q : What are Fixed units for font ?

A : something like ‘pt’, ‘in‘, ‘cm‘, ‘mm‘ etc

Q : What is the advantage of having a Relative Size set for a font ?

With every modern browser, you have the capability to change the text size of a given web page you are viewing.
If you are using Firefox, it is available in the toolbar (View > Text Size > Increase ) or in Internet Explorer, it is available in toolbar (View > Text Size > Larger )

If your website’s CSS defines the page element’s font-size in relative units (such as em, ex or px), then the browser will show the page in a bigger font size.
else, the page always shows up with the same sized font, no matter what you change in the browser settings.

So, if you want to have a web page, that is readable by those people with minor visual impairment, you should use relative units for the font size.
If you are a theme author, you make sure, your theme uses them as much as possible, so the sites using your theme are accessible to everyone.

Thats all folks, for now.

Further Reading:
1. W3C’s Tips.
2. CSS2 Syntax

3 Comments

3 Responses to “Font Sizes and Accessibility”

  1. Caughtya says:

    While the W3C says that ‘px’ is a relative size font, there is a lot of debate about it in accessibility circles.

    The thing is, px *is* relative, but relative from one machine to another. That is, on one monitor, a pixel will always have the same size.

    In terms of accessibility, the “relativity” of a pixel is rather useless. In other words, that unit of measure should not really be considered relative for the purpose of accessibility.

    Again, for the purpose of accessibility, font sizes should be declared in EM or %.

    I’m glad people are talking about these issues, thanks for bringing it up 🙂

  2. Sadish says:

    Thanks Caughtya for throwing some light on this issue.

    So you think ‘px’ does not help people with disabilities as much as ’em’ or ‘%’ . Right ?

    I will have it in mind when doing future projects.

  3. Caughtya says:

    That’s correct.

    Think of another way pixels are used: width of divs, When we talk about “Fixed width”, we tend to refer to width that are set in pixels. That is, it doesn’t matter how much you increase font size through your browser interface, the size of the container remains the same. 500px wide will be 500px wide, unless you change your monitor’s resolution.

    I haven’t run those tests in a while, but it used to be that if you set a font size in px, some browsers would not resize them.