ChangeSizeR

HTML

<input id="impaired" type="range" step="1" min="12" max="18" value="12"><br>
<hr>

<div class="wrapper-site">
    <h2>Георгий</h2>
    <p>Анастасия</p>
    <div class="other">
        <h2>Мария</h2>
        <p>Елена</p>
    </div>
</div>

CSS

.wrapper-site h2 {
    font-size: 22px;
    margin: 5px 0;
    padding: 5px 0;
}

.wrapper-site p {
    font-size: 14px;
    margin: 5px 0;
    padding: 5px 0;
}

.other h2 {
    font-size: 22px;
    margin: 5px 0;
    padding: 5px 0;
}

.other p {
    font-size: 14px;
    margin: 5px 0;
    padding: 5px 0;
}

JavaScript

(function() {
    var rng = document.querySelector("#impaired");
    var selector = "body, p";
    var forEach = Array.prototype.forEach;
    rng.addEventListener("input", function() {
        forEach.call(document.querySelectorAll(selector), function(node) {
            node.style.fontSize = rng.value + "px";
        });
    });
})();