Tipografia responsiva facilitada

Editar 20 de julho de 2015: Se você quiser que sua tipografia seja dimensionada de maneira diferente (por exemplo: seus títulos e parágrafos não precisam apenas ser dimensionados em 20% em uma resolução diferente, você quer que ambos tenham um tamanho diferente), há ótimo artigo na Smashing Magazine sobre isso: Tipografia responsiva com mapas Sass

Os tamanhos das fontes devem ser diferentes em dispositivos diferentes (smartphone / tablet / desktop) porque as pessoas lêem nesses dispositivos a distâncias diferentes: você segura o telefone mais perto do rosto do que da tela do desktop. Para mais informações, consulte a tipografia responsiva, o básico .

Mas qual é a abordagem mais prática para fazer isso? (de acordo comigo)

• Use rem‘s (e um mixin Sass para um pxsubstituto)
• Altere o htmltamanho da fonte padrão de em diferentes resoluções (já que estamos usando remo, todos os tamanhos de fonte irão diminuir / aumentar com ele)

Observação: estamos usando rem‘s porque em‘ s pode ser complicado:

Um dos problemas de usar “em” como tamanhos de fonte é que eles se propagam em cascata, então você está sempre escrevendo regras que selecionam elementos aninhados para redefini-los de volta para 1em; CSS3 agora tem rem (“root em”) para evitar esse problema. Basta declarar um substituto de px e você pode usá-lo hoje. Snook nos mostra o caminho deles.
– truques css

Saiba mais sobre remo de em snook.ca

Definindo tamanhos de fonte com rem‘s

Eu coloquei meus tamanhos de fonte em variáveis ​​para garantir consistência em todo o site:

$font-size-xs: 11px;
$font-size-s: 14px;
$font-size-m: 16px;
$font-size-l: 18px;
$font-size-xl: 24px;
$font-size-xxl: 36px;

Este mixin converte o tamanho da fonte do pixel em um remformato, com um pxsubstituto

@mixin font-size($px, $base: 16px) { // 16px is the browser default
   font-size: $px; // px fallback
   font-size: ($px / $base) * 1rem; // calculate rem font-size
}

Uso do Mixin:

h1{
    @include font-size($font-size-xl);
}

Saída de mixin:

h1{
    font-size: 24px; // overwritten by rem declaration below, IF rem's are supported
    font-size: 1.5rem;
}

Redimensionando tamanhos de fonte em diferentes resoluções (primeiro celular):

html{ // Smallest resolutions
    font-size: .8rem;
}

@media only screen and (min-width: 480px) { // 480px and up
    html{
        font-size: .9rem;
    }
}

@media only screen and (min-width: 768px) {
    html{
        font-size: 1rem;
    }
}

Isso é tudo, pessoal!

Sim, é tão fácil assim, as telas da área de trabalho agora terão os tamanhos definidos em suas variáveis. Telas menores terão tamanhos de fonte menores, criando uma melhor experiência de leitura. Tente alcançar um comprimento de linha de ~ 50–60 caracteres para a cópia do corpo em cada dispositivo.