Skip to main content
3 de 4
adicionou 303 caracteres ao conteúdo

Edição 1

Bem, eu li erroneamente a pergunta e acabei respondendo sobre responsividade de acordo com a viewport. Correndo o risco de ter votos negativos, deixarei minha resposta, mesmo errada, porque pode ser útil.

---------------------------------------------------------**********---------------------------------------------------------------

Você pode conseguir responsividade na tipografia usando somente CSS.

Primeiro, você pode recorrer à unidade em ou à %:

body {
    /**
    Faz a fonte ficar 2 vezes maior que o normal
    **/
    font-size: 2em;
    /**
    Fonte 95% do tamanho do normal
    font-size: 95%;
    **/
}

Ou ainda, aliar esses tipos de fonte com media queries ou, ainda, usar as media queries com os tamanhos de fonte para cada tamanho de tela:

/**
    Tela com até 600px
**/
@media (max-width: 600px){
    body{
        font-size: 10px;
    }
}

/**
    Tela com até 959px, maior que 600px
**/
@media (max-width: 959px){
    body{
        font-size: 14px;
    }
}
/**
    Tela com 960px +
**/
@media (min-width: 960px){
    body{
        font-size: 14px;
    }
}

A melhor solução CSS

Use a unidade vw

body{
    font-size: 8vw;  
}