Compartilhe! 
Buscando trabalhos já feitos, pensei se nada melhor também seria compartilhar este, afinal tive de fazer algumas pesquisas para conseguir essas funcionalidades, e como o código abaixo reúne vários métodos diferentes, cada um apropriado a um cenário, é fácil ele ser útil a outras pessoas.
Primeiramente, no código abaixo temos formas de criar um "botão", digamos. Através de link, com a tag a, e através de uma imagem; mas como você pode ver, até a imagem não foge da tag a. Acredito que fazer deste modo em vez de usar o botão input é melhor pois um dia podemos alterar nosso CSS/aparência da nossa página e deste modo fica mais fácil, e eu particularmente não gosto de alterar aparência de botões input, principalmente porque eles ainda assim mudam bastante de sistema para sistema e navegador. Repare aqui que vamos chamar nossa função através do href.
Posteriormente criei um esquema de tags: uma div e outra dentro chamada code. Em nossa div coloquei um ID e dei o nome de "principal", e "code" é a tag que eu estava tentando alterar aqui no blog, mas pode ser qualquer outra. Você pode trocar a tag por span ou outra qualquer (até criar uma). Pois bem, aqui nos preparamos para o método getElementsByTagName(); é muito útil você conhecer esse método.
Em nosso script vamos capturar todos os elementos de tag "code", ou seja: em nossa página será permitido mais de um elemento de tag code, porém apenas uma div de ID "principal". Temos então dois métodos diferentes, e assim é porque getElementById() retorna o primeiro elemento com tal ID, enquanto que getElementsByTagName() um vetor de elementos.
Por fim, com a propriedade .style conseguimos alterar nosso CSS. Você pode conhecer mais dessa propriedade aqui, no W3Schools.
<!--Parte HTML de exemplo-->
<a href="javascript:mudaFonte('mais');" style="font-size: 20px">Aumentar fonte</a>
<br />
<a href="javascript:mudaFonte('menos');"><img alt="Diminuir fonte" height="25" src="lupa.png" width="25"/></a>
<br />
<a href="javascript:mudaFonte('dis');" style="font-family: 'opendyslexic' !important">Fonte para disléxicos</a>
<br /><br />
<div id="principal">
Minha div principal.
<code>
Meu código dentro da tag "cod" que está dentro da minha div principal.
</code>
<code>
Meu 2º código dentro da tag "cod" que está dentro da minha div principal.
</code>
<code>
Meu 3º código dentro da tag "cod" que está dentro da minha div principal.
</code>
</div>
<!--Parte JavaScript-->
<!--Aumentar, diminuir e alterar fonte-->
<script language='javascript'>
var tam=110;
var dis = 0;//Variável para sabermos nosso estado. 0 significa que o estilo da fonte está padrão.
function mudaFonte(tipo){
if (tipo == 'dis'){//Mudar fonte.
if(dis==0){
dis=1;//Prefiro setar que ação foi realizada antes do próximo código para que, caso algo dê errado, ao menos parcialmente funcione.
document.getElementById("principal").style.fontFamily='opendyslexic';
var cod = document.getElementsByTagName("code");
for (var i = 0; i < cod.length; i++){
cod[i].style.fontFamily="opendyslexic";
}
//Repare que em "document.getElementById" temos apenas UM elemento, já em "document.getElementsByTagName" podemos ter uma lista de elementos.
} else {
dis=0;
document.getElementById("principal").style.fontFamily="'Lato', Trebuchet, Verdana, sans-serif";
var cod = document.getElementsByTagName("code");
for (var i = 0; i < cod.length; i++){
cod[i].style.fontFamily="'Lato', Trebuchet, Verdana, sans-serif";
}
}
}else{//Mudar tamanho.
if (tipo=='mais'){
if(tam < 200)
tam+=10;
}else{
if(tam > 80) tam-=10;
}
document.getElementById("principal").style.fontSize=tam+'%';
}
}
</script>
<!--Fim-->