a/20618812/1636522

HTML

<div>
    <button>smaller</button>
    <button>bigger</button>
</div>
<p style="padding:1em;border:1px solid black">
    <span style="font-size:150%">azerty
        <span style="font-size:150%">azerty</span>
    </span>
    <span style="font-size:1.5em">azerty
        <span style="font-size:1.5em">azerty</span>
        <span style="font-size:1.5rem">azerty</span>
    </span>
    <span style="font-size:16px">azerty</span>
</p>

CSS

body {
    font: normal 12px Arial;
}
span {
    background: yellow;
}

JavaScript

var zoom = 0;
$('p *').each(function () {
    var el = $(this),
        size = parseInt(el.css('font-size'));
    el.data('font-size', size);
});
$('button:first').click(function () {
    zoom--;
    $('*').each(function () {
        var el = $(this),
            size = el.data('font-size');
        el.css('font-size', Math.max(size + zoom, 0) + 'px');
    });
});
$('button:last').click(function () {
    zoom++;
    $('*').each(function () {
        var el = $(this),
            size = el.data('font-size');
        el.css('font-size', Math.max(size + zoom, 0) + 'px');
    });
});