Aumentar e diminuir fonte

Quando desenvolvemos um site, sistema ou qualquer outro tipo de aplicação, sempre temos que ter em mente, que será acessado pelos mais diversos tipos de pessoas, e que devemos sempre pensar na acessibilidade para tentar atingir o maior número possível de pessoas.

Pessoas que enxergam pouco, que não conseguem ler letras pequenas, ou algum outro tipo de problema de visão, também acessam a internet, e quando essas pessoas entrarem em nossos sites, devemos ter pelo menos um preparo para recebe-las e deixar sua experiência mais agradável.

Existem várias formas de deixar o site mais acessível, como por exemplo:
Ir direto para o conteúdo
Atributo role

Outra forma é ter uma opção para aumentar e diminuir a fonte de todo o site, pode ser um botão, um link, ou algo parecido. Essa opção não é difícil de fazer, e podemos conseguir esse resultado com um simples script JavaScript.

Como funciona a propriedade font-size

A propriedade font-size é utilizado para alterar o tamanho da fonte de diferentes elementos. Podendo ser usado vários tipos de unidades de medida, como px, em, %, pt, entre outras. Essa propriedade é inherited (herdada), isso quer dizer que os elementos filhos herdaram o valor do seu elemento pai, usaremos esse comportamento a nosso favor.

Código para aumentar e diminuir fonte

HTML

Primeiramente vamos criar o HTML dos botões para aumentar e diminuir as fontes, vamos usar aqueles famosos "A +" e "A -", acredito que você já deve ter visto em algum site.

<div class="btn-container">
    <button name="increase-font" id="increase-font" title="Aumentar fonte">A +</button>
    <button name="decrease-font" id="decrease-font" title="Diminuir fonte">A -</button>
</div>

CSS

Nesse exemplo não usaremos nenhum estilo, pois o elemento button, já tem um estilo padrão, fique a vontade caso queira alterar. A única coisa que usaremos é definir um valor padrão para o tamanho da fonte. Atacaremos o elemento body, definindo o valor de 16px.

body {
    font-size: 16px;
}

O valor 16px, é o valor padrão da maioria dos dispositivos. Se você não definir o valor, geralmente o font-size começara com 16px. Explicarei logo abaixo o porque de definir o font-size para o body e não para outros elementos.

JavaScript

Agora só falta fazer os botões funcionarem, para isso vamos adicionar um evento de click para os nossos botões. Quando o usuário clicar no botão, vai ser obtido o valor atual do font-size, e será incrementado ou decrementado um valor definido.

window.onload = function() {
    var elementBody = document.querySelector('body');
    var elementBtnIncreaseFont = document.getElementById('increase-font');
    var elementBtnDecreaseFont = document.getElementById('decrease-font');
    // Padrão de tamanho, equivale a 100% do valor definido no Body
    var fontSize = 100;
    // Valor de incremento ou decremento, equivale a 10% do valor do Body
    var increaseDecrease = 10;

    // Evento de click para aumentar a fonte
    elementBtnIncreaseFont.addEventListener('click', function(event) {
        fontSize = fontSize + increaseDecrease;
        elementBody.style.fontSize = fontSize + '%';
    });

    // Evento de click para diminuir a fonte
    elementBtnDecreaseFont.addEventListener('click', function(event) {
        fontSize = fontSize - increaseDecrease;
        elementBody.style.fontSize = fontSize + '%';
    });
}

Explicando o código Javascript

O script será executado após o carregamento da página, adicionando "ouvintes" nos elementos buttons, que são funções de eventos quando o usuário faz uma determinada ação, no caso, clicar no botão. Após isso definimos o valor padrão da variável fontSize como 100, ou seja 100%, 100% é igual à 16px que é o valor definido no CSS.

Quando for clicado no botão, incrementamos ou decrementamos na variável fontSize o valor definido na variável increaseDecrease, no nosso caso é 10, de 10%.

Por fim, adicionamos o novo valor no elemento body, mas talvez você pergunte, mas por que no body? Porque alterando o font-size do elemento body, todos os filhos herdaram esse valor, isso porque a propriedade font-size é herdada, como mencionei no começo do artigo. Com isso, todas as fontes dos textos irão aumentar ou diminuir conforme os botões sejam clicados.

Código final para aumentar e diminuir fonte

Código completo para demonstrar como é simples aumentar e diminuir fonte:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Aumentar e diminuir fonte - Acessibilidade</title>

        <style type="text/css">
            body {
                font-size: 16px;
            }
        </style>
    </head>
    <body>
        <div class="btn-container">
            <button name="increase-font" id="increase-font" title="Aumentar fonte">A +</button>
            <button name="decrease-font" id="decrease-font" title="Diminuir fonte">A -</button>
        </div>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>

        <script type="text/javascript">
            window.onload = function() {
                var elementBody = document.querySelector('body');
                var elementBtnIncreaseFont = document.getElementById('increase-font');
                var elementBtnDecreaseFont = document.getElementById('decrease-font');
                // Padrão de tamanho, equivale a 100% do valor definido no Body
                var fontSize = 100;
                // Valor de incremento ou decremento, equivale a 10% do valor do Body
                var increaseDecrease = 10;

                // Evento de click para aumentar a fonte
                elementBtnIncreaseFont.addEventListener('click', function(event) {
                    fontSize = fontSize + increaseDecrease;
                    elementBody.style.fontSize = fontSize + '%';
                });

                // Evento de click para diminuir a fonte
                elementBtnDecreaseFont.addEventListener('click', function(event) {
                    fontSize = fontSize - increaseDecrease;
                    elementBody.style.fontSize = fontSize + '%';
                });
            }
        </script>
    </body>
</html>

Guardando o tamanho da fonte para outras páginas

Em nosso exemplo, não ficará guardado o valor do font-size caso o usuário troque de página ou carrega a página, para resolver isso só precisamos guardar o valor do font-size em algum tipo de armazenamento, para isso pode ser utilizado cookies, local storage ou outro tipo de armazenamento. Como isso já é um pouco mais complexo, você pode ver o código em meu repositório no GitHub:
Git - Aumentar e diminuir fonte acessibilidade

Conclusão

Esse simples procedimento para aumentar e diminuir fonte, pode ajudar muitas pessoas, pense nisso.