Aumentar e Diminuir Letra do Site

[ArthurTrabalho]

Boa tarde galera, beleza pura?

Então, to com um problema aqui no javascript para aumentar e diminuir letra do site.

Inicialmente ele está funcionando perfeitamente, entretanto para acessibilidade e usabilidade do site, ele está com uns problemas que estou com dificuldade para resolver.

Eis o código

//INICIA O AUMENTO DAS LETRAS

var tagAlvo = new Array('ul', 'p', 'h2', 'dd', 'dt'); //pega todas as tags p//

// Especificando os possíveis tamanhos de fontes, poderia ser: x-small, small...
var tamanhos = new Array( '0.3em','0.6em','0.7em','0.8em','0.9em','1.0em');
var tamanhoInicial = 3;

function mudaTamanho( idAlvo,acao ){
  if (!document.getElementById) return
  var selecionados = null,tamanho = tamanhoInicial,i,j,tagsAlvo;
  tamanho += acao;
  if ( tamanho < 0 ) tamanho = 0;
  if ( tamanho > 5 ) tamanho = 5;
  tamanhoInicial = tamanho;
  if ( !( selecionados = document.getElementById( idAlvo ) ) ) selecionados = document.getElementsByTagName( idAlvo )[ 0 ];
  
  selecionados.style.fontSize = tamanhos[ tamanho ];
  
  for ( i = 0; i < tagAlvo.length; i++ ){
    tagsAlvo = selecionados.getElementsByTagName( tagAlvo[ i ] );
    for ( j = 0; j < tagsAlvo.length; j++ ) tagsAlvo[ j ].style.fontSize = tamanhos[ tamanho ];
  }
}

// ACABA O AUMENTA DAS LETRAS

Então o seguinte problema é: No site possuo vários estilos, vários tamanhos de letras, menores e maiores. Quando eu coloco para aumentar uma letra, por exemplo uma tag <p></p> que está com o tamanho 8, ele aumenta perfeitamente para 9,10,11,12. Entretanto outra tag <p></p> possui o tamanho 12, e quando clico para aumentar a letra do site, ele parte do 9,10,11,12 igual que está no código. Isso é um problema chato pois todas as letras acabam tendo o mesmo tamanho definido no javascript. Mesmo eu diminuindo/aumentando para a letra que estava antes, as outras acabam perdendo a formatação. Meu pensamento para esse problema seria trabalhar com CSS ao invés de tamanho de letras. O código seria mais ou menos assim.

var tagAlvo = new Array('ul', 'p', 'h2', 'dd', 'dt'); //pega todas as tags p//


var cssVet = new Array("css1","css2","css3","css4","css5","css6", "css7", "css8", "css9", "css10");
var cssInicial = 4;

function setTamanho(idAlvo, acao )
{
    if (!document.getElementById) return
    var selecionados = null, tamanho = cssInicial, i, j, tagsAlvo;

    if (tamanho < 1 && acao == -1 ) return;
    if (tamanho > 8 && acao == 1) return;

    tamanho += acao;
    cssInicial = tamanho;

    if ( !( selecionados = document.getElementById( idAlvo ) ) ) 
        selecionados = document.getElementsByTagName( idAlvo )[ 0 ];  

    for ( i = 0; i < tagAlvo.length; i++ )
    {
        tagsAlvo = selecionados.getElementsByTagName( tagAlvo[ i ] );

        for ( j = 0; j < tagsAlvo.length; j++ ) 
            tagsAlvo[ j ].className = cssVet[ tamanho ];
  }
}

Enfim, não resolveu nada pois ainda ta dando problema que eu citei de tamanhos diferente e etc e tals.

Alguém poderia me da uma luz? Agradeceria, obrigado :D