Every modern webbrowser today has variable font sizes. There are two reasons for this: 1. It was a fairly trivial addition for browser makers. 2. It made the web more accessible to people with disabilities. On the later, it is important to note as the population grows older, vision becomes strained – and therefore adding an option to resize fonts is an important feature.
Today with responsive web, it is a matter of a few lines of code. However, there are a few issues that you will run into.
- One issue is where to hook the font-size change.
- The other is margins and padding.
Both of those will be covered after a walk through the example. Note, if you have trouble with the buttons, recycle the webpage.
The default size set for the <html> element is font-size=100%. In the emulator, the page layout looks very similar to the image with the caption font-size = 100%.
If you click the button [bigger], the entire page will have the all the fonts increased in size – to 125% of the original. The emulator results are visible in the image with the caption font-size = 125%. The code to change the font-size looks like this:
document.body.parentNode.style.fontSize = '125%';
If you click the button [smaller], the entire page will have the all the fonts decreased in size – to 75% of the original. The emulator results are visible in the image with the caption font-size = 75%. The code to change the font-size looks like this:
document.body.parentNode.style.fontSize = '75%';
Hooking the font-size Change
If you look at the code in app.js, you will see the modifications to the font-size made three (3) different ways. The code snippet below outlines the different methods. For all intensive purposes, the first two (2) lines are equivalent.
document.getElementById('allOfIt').style.fontSize = '100%'; document.body.parentNode.style.fontSize = '100%'; document.body.style.fontSize = '100%';
The first two (2) references above are for the document element – the one and only
<html>. The third reference is for
<body>. They will all do the same thing, when you make a change to
However, if you change to
<body>, you will notice that the [reset] for the first two (2) references (
<html>) do nothing at all. This is because the changes are compounding (or inherited, or scoping – depending on your point of view). This means, if make the font bigger for
<html>, then that makes the font bigger for
<body>. IF THEN, the final font size is 125% bigger for
<html> + 125% bigger for
<body>. In px this means, we start with 16px, then increase by 125% for
<html> – making it 20px, then increase by 125% for
<body> – making it 25px!
In the end, <body> seems to be the better choice. However, even after making this decision. There is another hidden pitfall, namely – margins and padding.
margins and padding
When I design my pages I do NOT use
px or percent (
px is fixed and would require me to hunt down every instance of
px and change it — And percent (
%) would require similar. I use
em, but even this has the infamous css compounding problem (google search link).
So you should be aware that for dynamically font resizing, there are two (2) possible solutions –
emis equal to the size of the font that applies to the parent of the element. (So, this suffers from compounding.)
remis equal to the size of the font that applies to the root
htmlelement, not the parent element.
em works for padding, and
rem works for margin. However – excluding headers, I tend to stick to one font. So, you’ll have to make your own judgement – but be diligently consistent!
Sidenote, some designers use
0.625em as a design reference. This Google search will help you research this point.
Having Dynamic Font Resize is fairly trivial, but requires diligence when design – even for mobile device.
Kerri Shotts has suggested also adding a user device preference from phonegap-plugin-mobile-accessibility.