Um guia simples para tipografia responsiva
A grande maioria dos artigos que falam sobre design responsivo se concentra em duas áreas principais: uma grade fluida e flexível e imagens fluidas e flexíveis. O que muitos deles não falam é tipografia.
E, no entanto, para a maioria dos sites, o texto, o conteúdo, é o elemento mais importante.
Concedido, para sites em que imagens ou vídeos são o conteúdo principal, o tipo responsivo é um pouco menos importante, mas ainda assim não deve ser negligenciado.
A boa notícia é que a tipografia responsiva não é particularmente difícil de alcançar. Precisamos apenas dedicar algum tempo para pensar em como nosso tipo deve responder às alterações no tamanho da tela e, em seguida, implementar essas alterações.
Princípios do tipo responsivo
Existem dois princípios principais para criar tipografia responsiva eficaz. O primeiro é o tipo redimensionável. Isso significa um tipo que não apenas redimensiona com base no tamanho da tela, mas que também é redimensionável pelo usuário.
O segundo é o comprimento de linha otimizado, que mantém a legibilidade. Isso significa que, para algumas telas, manter a área de conteúdo menor e os comprimentos de linha mais curtos faz mais sentido, embora teoricamente o conteúdo possa se estender mais.
Tipo redimensionável usando rems
A maioria dos designers usa pixels ou ems para dimensionar seu tipo. Ems é uma opção melhor, pois permite que os usuários redimensionem o tipo em seu navegador. Mas os ems são relativos ao elemento pai, o que significa que eles são mais complicados de usar do que os pixels, o que é composto apenas em designs responsivos, em que há mais tamanhos e relacionamentos a serem controlados.
Rems oferecem uma alternativa melhor para o ems. Eles funcionam de maneira quase idêntica, exceto por uma diferença fundamental: as unidades rem são relativas à html elemento, em vez de elementos pai individuais. Isso torna a manutenção do tamanho adequado do seu tipo muito mais simples.
Unidades rem agora são suportadas em todos os principais navegadores modernos, incluindo o Opera da versão 11.6 e IE9. Embora você queira incluir fallbacks para navegadores anteriores, há suporte suficiente para que os rems os usem agora.
Como você usará unidades remotas para o tipo de dimensionamento, certifique-se de aplicar a redefinição ao seu html elemento e não o seu body elemento. Então deve ficar assim:
html { font-size:100%; }
Agora, suas unidades rem serão aplicadas ao tamanho de fonte padrão do dispositivo.
Em seguida, você precisará especificar o tamanho da fonte para cada tamanho de exibição. Eu recomendo experimentar com tamanhos de fonte reais em vários dispositivos para ver o que parece melhor. É amplamente dependente dos tipos de letra que você selecionou, bem como do design geral.
É provável que você queira especificar vários tamanhos de fonte com base em diferentes tamanhos de tela, o que é uma coisa bastante direta a se fazer. Por exemplo, seu CSS pode ser algo como isto:
@media (max-width: 640px) { body {font-size:1.2rem;} } @media (min-width: 640px) { body {font-size:1rem;} } @media (min-width:960px) { body {font-size:1.2rem;} } @media (min-width:1100px) { body {font-size:1.5rem;} }
Concedido, este é um código simplificado para este artigo, mas fornece um ponto de partida. Você pode notar que, nas telas menores, um tamanho de fonte um pouco maior é especificado. Isso ocorre porque os tamanhos de fonte maiores geralmente são mais fáceis de ler em telas pequenas.
Claro, você vai querer fazer especificações adicionais para coisas como o seu h1 elementos e tal. Eu recomendo usar uma ferramenta como Web Font Specimen para ver como o seu tipo realmente parecerá.
Manter comprimentos de linha ótimos
Embora o tipo redimensionável seja um conceito bastante simples, manter os comprimentos de linha adequados em vários dispositivos fica um pouco mais complicado. Tem havido bastante debate sobre qual é o tamanho ideal da linha para a legibilidade, mas de acordo com o Instituto Baymard , o consenso parece estar entre 50 e 75 caracteres por linha.
Eles também recomendam o uso de um contêiner de largura fixa para o seu conteúdo, mas isso anula o propósito de um design responsivo, portanto, precisamos abordar as coisas de forma um pouco diferente, se quisermos manter a capacidade de resposta com comprimentos de linha otimizados.
Primeiro, observe os diferentes tamanhos de tela que você vai projetar e descubra qual fonte de tamanho você deve usar para obter aproximadamente 50 caracteres em uma linha. Para telas muito pequenas, você pode precisar ir abaixo de 50 caracteres por linha para manter um tamanho de fonte legível, mas 50 deve ser o objetivo. Isso nos dá um bom ponto de partida para o tamanho da nossa fonte.
Devemos também definir larguras máximas (ou pontos de quebra) para áreas de conteúdo de texto. Observe o tamanho do tipo que você está usando para um determinado tamanho de tela e, em seguida, determine a largura do contêiner de conteúdo quando tiver aproximadamente 75 caracteres por linha. Isso não será exato, a menos que você esteja usando uma fonte monoespaçada, mas você deve ser capaz de criar uma média com facilidade. Isso se torna nossa largura máxima de contêiner.
Digamos que o tamanho da fonte padrão para um determinado dispositivo seja de 16px, e você queira que o tamanho da sua fonte seja 20px (digamos que estamos usando uma fonte serifada como Droid Serif para este exemplo). Isso significa que você especificará o tipo como 1.25rem. Nesse tamanho, você vai querer uma largura de contêiner de cerca de 675px de largura. Isso nos dá uma contagem de caracteres nos anos 60 em média, o que está bem na nossa largura de alvo.
Para especificar a largura do contêiner, basta usar este código:
@media (min-width: 950px) { .container {width:675px;} }
Você pode definir essas larguras máximas de linha para cada tamanho de exibição ou apenas para as específicas. Com telas menores, você pode querer deixar a largura do contêiner e deixar o tipo se espalhar por toda a largura da tela.
Agora, com telas muito maiores, você pode querer dividir seu conteúdo em várias colunas. Digamos, por exemplo, que você esteja trabalhando com um iPad em modo paisagem. Sua largura de tela é de 2048 pixels. Esticar as linhas para preencher a tela dificulta a leitura, mas centralizar o conteúdo e manter os comprimentos de linha mais curtos prejudica a finalidade de visualizar o conteúdo no modo paisagem.
Portanto, defina seu tipo em duas colunas (ou até três, dependendo do tamanho da sua fonte). Especificação de várias colunas do CSS3 torna muito fácil dividir seu texto em várias colunas sem precisar alterar todo o layout. Combine isso com as consultas de mídia e agora você tem um layout de conteúdo que se divide em duas ou três colunas para telas maiores, mantendo um tamanho de tipo altamente legível e um comprimento de linha altamente legível.
Novamente, o código para fazer isso é bem simples:
@media (min-width:1140px) { .content { -webkit-column-count: 2; -webkit-column-gap: 1em; -moz-column-count: 2; -moz-column-gap: 1em; column-count: 2; column-gap: 1em; } }
Agora, em telas com mais de 1140 pixels de largura, você dividirá seu conteúdo em duas colunas, tornando os comprimentos de sua linha muito mais legíveis.
Usando tipos de letra alternativos
Uma coisa que muitas vezes é negligenciada quando se fala em tipografia responsiva, é a ideia de que diferentes tipos de letra podem não funcionar bem em tamanhos diferentes. Isso é especialmente verdadeiro para fontes de exibição.
Isso significa que você deve evitar usar essas fontes em seus designs responsivos? Claro que não. Em vez disso, basta especificar fontes diferentes para vários elementos em seus layouts maiores ou menores.
Por exemplo, com um design para computadores desktop, você pode querer usar uma fonte como Script da Liga para seus cabeçalhos. Mas em uma tela menor, como um iPhone, você precisará torná-lo tão grande que domine o conteúdo ou será muito difícil de ler.
O que podemos fazer aqui é usar o League Script para telas maiores (iPad, desktop, etc.), enquanto alterna para uma versão maior da fonte body para telas menores (como o iPhone ou outros smartphones).
Para fazer isso, você simplesmente especificaria algo assim:
@media (min-width:960px) { h1 {font-family:"League Script", script;} } @media (max-width:960px) { h1 {font-family:"Droid Serif", serif;} }
Claro que isso pode ser feito para mais do que apenas seus títulos também.
Conclusão
Embora o design responsivo tenha se concentrado em grande parte nas imagens e no layout geral, a tipografia é tão importante quanto essas duas coisas. A melhor parte é que não é particularmente difícil adaptar e otimizar sua tipografia para um design responsivo.
É vital que você coloque o mesmo tempo e esforço nele que você coloca em outros elementos do seu design. Manter a legibilidade do seu conteúdo de texto é um componente vital para criar uma experiência de usuário ideal para seus visitantes.
Você coloca tanta ênfase na tipografia responsiva em seus projetos quanto faz redes e imagens responsivas? Por que ou por que não?