Usability 101: Using Relative Font Sizes

Paul Watson

Rate me:

4.38/5 (5 votes)

11 Dec 20015 min read

136.4K

378

Using relative font sizes in your website will ensure that your site is accessible to users with poor sight. This article explains how to use relative font sizes effectively.

Download article source and examples - 5Kb

Assumptions

This article assumes you know how to use CSS and HTML. If you are unsure as to how CSS or HTML work then I recommend you read the other articles on CP before continuining.

Additionally any real web designers will probably explode and start frothing at the mouth after reading this article. So please stop reading and hand over the article to your usability "expert" or web coder.

Why Relative Font Sizes?

Try this: Visit useit.com/alertbox/ and then, in Internet Explorer, click the View menu, Text Size and then put it on Largest or Smallest. As you can see the text size of virtually all the elements on the page have changed. This is good usability and good accessibility.

If your website does not do this then you are potentially loosing out on literally hundreds of thousands of visitors. It is estimated that at least 10% of all web users in the United Kingdom alone are considered disabled in one way or another. A vast majority of that figure covers the "poor eyesight" disabled category. So if there are 100 000 web users in the UK fully 10 000 of them cannot use your site, cannot buy your products and cannot find out about you. Can your business afford that?

So what is going on then? How can you cater for these disabled users and keep them coming back to your website? useit.com is using the Relative Font Size capabilities of CSS and your browser. It puts the power of personalisation in the users hands, letting them choose at what font size they want to view your website. Some users cannot read size 11px text, no matter how cool or how easy it is to use that font size.

With relative font sizing you can specify font sizes at a certain level. When a user changes their text size level then all of your font sizes change relative to their chosen level. You loose no control, not relatively at least.

What you gain however is far more important than a few pixels of precision.

This article explains how to develop a website to use relative font sizes.

* Please note that this article targets Internet Explorer. In the near future I will update it to highlight the cross-browser differences between Netscape, IE and Opera.

What you have to work with

You have 7 different relative font sizes to work with. They do not use points (pt), pixels (px) or percentages (%) to set the font size. Instead you work with:

xx-small
x-small
small
medium
large
x-large
xx-large

So in your CSS file (I strongly advocate against inline CSS styles) instead of font-size: 10px; you would use font-size: xx-small;.

This gives you a nice range of font sizes. In the download up above I have included a "relative font size chart" (relativefontsize_fontsizechart.asp) page which shows the relative font sizes with their equivalent pixel sizes. This is useful when converting a px based site to relative font sizes. For example in IE on Text Size medium xx-small is equivalent to 10px and xx-large is equivalent to 48px.

For instance this is xx-small and this is 10px. This is xx-large and this is 48px. If your browser is set to Text Size Medium then xx-small will match 10px and xx-large will match 48px. Now try setting your Text Size to Largest or Smallest. Notice how xx-small and xx-large change but 10px and 48px stay the same.

An Example

Enough theoretical mumbo jumbo. You want to see a real example:

<HTML>
    <HEAD>
        <TITLE>An Example of Relative Font Sizes</TITLE>
        <STYLE>
            body
            {
                font-family: verdana;
                font-size: medium;                    
            }
            
            p {width: 450px;}
                
            .articlehead {font-size: x-large;}
            
            .articlblurb {font-size: medium;}
            
            .articleauthor {font-size: x-small;}
            
            .articlebody {font-size: small;}                        
        </STYLE>
    </HEAD>
    <BODY>    
    <P class="articlehead">Visual Basic Trounces C++</P>
    <P class="articleblurb">
        In an amazing demonstration Captain VB demonstrated the power, ease and 
        flexibility of Visual Basic. In real world applications VB proved to be 
        more robust, scalable and efficient than even the ex-king of the hill 
        language, C++.
    </P>
    <P class="articlebody">
        John Simmons and Chris Maunder were flabergasted after the presentation 
        and a few hours of tinkering by themselves. "It is amazing, I am going 
        to go out and buy VB right now!" said a starry eyed Chris Maunder. John 
        Simmons even apologised to all the VB users he has previously berated 
        for using VB. "It seems as though <b>I</b> was the one in the dark and 
        they had found the light!" 
        exclaimed John.
    </P>
    <P class="articlebody">
        "Reports of CodeProject.com being converted to run on VB are not at all 
        exaggerated" said a source close to the heart of CP.
    </P>
    <P class="articleauthor">by Pablo Picasso</P>
    </BODY>
</HTML>

* Yes I used inline CSS. Only to keep the example simple.

Cut and paste that into an HTML page (or view the page included in the download: example.asp) and view it in your browser. By changing your Text Size you will see the whole article grow or shrink to meet the users wishes. Maybe on Medium the authors name at the bottom of the article, by Pablo Picasso, is too small to read in Text Size Medium. Now the user can easily bump up the Text Size and be able to read the authors name.

Naturally this is a simple example but then relative font sizes are easy to understand and use.

Conclusion & Notes

So relative font sizes are not that hard really. All you need to do is take your existing sites and match your current font sizes to the relative font size declarations. Naturally if you use font-size: 11px; then you won't find an exact match. In that case go with xx-small or x-small. As I said, real designers will explode and start to froth at the mouth, but for real world applications and usability the sacrifice is well worth it.

What I have not covered in this article actually proves to be the difficult and highly frustrating topic of cross-browser compatibility. You see in Netscape xx-small is rendered differently to xx-small in Internet Explorer. Same with all the other relative font sizes. But then you probably guessed that already. Also you should not always use relative font sizes. For instance if you have a navigation bar which is tightly confined then using relative font sizing could result in your navigation bar going seriously out of whack. In that case choose a large enough font to be readable and code it using pixels.

However both cross-browser issues and when not to use relative font sizing will be covered in the next article.

Good luck and god speed, Jakob Nielsen will love you once you start using relative font sizing. You might even get invited around to his house for a cuppa :eek:

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Written By

Paul Watson

Web Developer Caliber AI

South Africa

My name is Paul Watson and I have been a professional web-developer since 1997. I live and work remotely from Cape Town, South Africa.

I have many years of experience with HTML, CSS, JavaScript, PostgreSQL, and Ruby on Rails. I am capable in Python and Machine Learning too.

Currently I am the CTO of CaliberAI. Formerly I worked with Kinzen (CTO & co-founder), Storyful (CTO, acquired by News Corp), FeedHenry (co-founder, acquired by Red Hat), and ChangeX.

Now that you know a bit about me why not say hello.