To make font sizing easier, you can use relative font sizes for all elements that are descendants of the body - essentially all contextual elements.
body{
font-size: 20px; /*This is our default*/
}
h1{
font-size: 1em; /*Relative to the body, this will also be 20px*/
}
h2{
font-size:0.8em; /*This will be 20 * 0.8 = 16px;*/
}
h3{
font-size:80%; /*This translates to 16px calculated from 20 * 80% */
}
h1.huge{
font-size:1.2em; /*Results in 24px based on 20 * 1.2 */
}
Now every element has a font size relative to the body. To adjust all font sizes with a click, simply modify the body font size:
var button = document.getElementById('.myButton');
button.addEventListener('click', function(){
var body = document.querySelector('body');
body.style.fontSize = '25px';
});
(You could also save this setting using localStorage or cookies to remember across pages)
After adjusting, the sizes will be as follows:
h1{
font-size: 1em; /*25px*/
}
h2{
font-size:0.8em; /*This results in 20px by calculating 25 * 0.8 */
}
h3{
font-size:80%; /*Derived from 24 * 80% = 20px; */
}
h1.huge{
font-size:1.2em; /*Calculates to 30px based on 25 * 1.2 */
}
Note: Relative font sizes are determined based on the parent element, not necessarily the body. So, if a parent element has a relative font size, additional calculations may be needed:
body{
font-size:25px;
}
div.container{
font-size: 0.8em; /* 20px when nested under body */
}
div.container > p{
font-size:0.8em; /* Results in 16px when calculated from 25px * 0.8 * 0.8 */
}