Skip Navigation

Blog » Minimum Font Size

Using relative font sizes is a must for an accessible website, but you run the risk of having incredibly small text. This JavaScript workaround will ensure that the majority of your visitors do not need a microscope to read your content.

I think it's entirely fair to say that I don't didn't like JavaScript. Too many sites seem to be impossible to use without it, and with an ever growing number of users not JavaScript-enabled, creating a site that needs JavaScript to work is shooting yourself in the foot. What's the point of creating a site if before you start you prevent a quarter of your visitors buying your stock or reading your content?

That said, it does have its uses, and this is one of them. This is a simple, short script that will ensure that if you are using relative font sizes on your site, users with their default font size set very low will have their text resized to something more appropriate.

Of course, this won't work for everybody. It isn't an integral part of the site though - users without JavaScript will not even know that they have missed out on anything.

The way this works is relatively simple. The first stage is to grab the font size being used by the user. It's relative to their browser default font size, whatever fonts you have set, and which actual font they are using.

We achieve this by adding a small div to every page. This can be set to be invisible, and on this site I use the invisible div containing the site's "Skip Navigation" link and a link to the Accessibility Statement.

<div class="invisible" id="xdiv" name="xdiv"><a href="#content" accesskey="2">Skip Navigation</a> &middot; <a href="Accessibility/Accessibility_Statement/" title="Accessibility features of this site." accesskey="0">Accessibility statement</a></div>

This div is set to be invisible to graphical browsers, which have little use for it's content.

Next, we set up our JavaScript code. The following function can be included as an external .js file, or within your header file, if you use one.

function MinimumFontSize() { var XDivElement = document.getElementById('xdiv'); if (XDivElement.offsetHeight < "16") { tags = new Array ('body', 'div', 'a', 'td', 'th', 'p', 'span', 'h1', 'h2', 'h3'); for (j = 0; j < tags.length; j ++) { var getbody = document.getElementsByTagName(tags[j]).item(0); if (getbody) { getbody.style.fontSize = '10pt'; } } } }

In order to customise the function above, you might like to check your numbers. The '16' at the beginning of the script is for this site, and is the value it is because I decided that that should be the minimum height for that div, with it's padding, and font settings. Your 'xdiv' will be different, and you may want to set a different minimum font as well. Fortunately it's a very simple script to modify. If you want to experiment, you can add a line into the code like so (this will give you a popup with the height of your 'xdiv' when you load the page:

function MinimumFontSize() { var XDivElement = document.getElementById('xdiv'); alert(XDivElement.offsetHeight); if (XDivElement.offsetHeight < "16") {

If it sees that the current font size is too small, it will then resize the fonts to 10pt, a small size but an improvement nonetheless, and of course you can change this if you think it too small. You may also need to add elements to the array of tags. The script cycles through the elements I use on this site for text, but you may use entirely different tags around your data, so may need to add to that list.

And finally, we need to add this last bit of code to our tag, in order to execute the function every time a page is viewed. You can include this any number of other places, but I would recommend having it early in the page, or your users may see the small text before it is resized, rather than the script running invisibly.

onload="MinimumFontSize();"

And there you go, a simple way to set a minimum font size for a site, while keeping your site accessible to both those who wish to resize fonts and those without JavaScript.


comments powered by Disqus