Nas últimas semanas, Diego Tres e eu estamos trabalhando em um projeto que funcionará em uma grande variedade de dispositivos: smartphones, tablets, laptops pequenos e grandes desktops como o iMac. Por isso temos lido, discutido e tuitado bastante sobre Responsive Design.

Acreditem: desenhar para múltiplos dispositivos é bem complexo. A parte boa é que a cada dia aprendemos mais uma tonelada de coisas sobre o assunto.

Tudo isso porque não muda apenas o tamanho da tela. Muda o contexto de uso, muda o layout, muda a quantidade de informações que queremos exibir em cada dispositivo, muda o tamanho e o peso das imagens, muda a navegação, mudam as funcionalidades que estarão disponíveis.

E muda também o tamanho das fontes.

Recentemente, li um artigo que falava justamente sobre a mudança no tamanho das fontes quando o site é exibido em um smartphone, em um tablet ou em um desktop. Como o artigo foi bastante útil para entender as diferenças, resolvi compartilhar por aqui.

Até um certo tempo atrás, as resoluções de tela eram mais ou menos homogêneas. Hoje existe quase uma centena de resoluções diferentes no mercado, e isso acabou tornando as coisas muito mais complicadas.

O uso de Responsive Layouts é uma das soluções para essa multiplicidade toda: um layout que se adapta automaticamente à resolução de tela em que o site está sendo visualizado.

Mas a fonte não pode simplesmente diminuir na mesma proporção que o restante do layout. Se fosse assim, o tamanho das fontes em um iPhone ficaria ridiculamente pequena, quase ilegível para os usuários.

Alguns tópicos abordados pelo artigo:

• Text size. The size of your body text doesn’t depend on your personal preference. It depends on reading distance. The further away your body text, the bigger it needs to be to compensate for a larger reading distance.
• Line height and contrast. While body text size can be evaluated with that reading distance trick, line height needs some adjustment. With more reading distance and (what we call) pixel smear, it’s wise to give screen text a little bit more line height than printed text. 140% is a good benchmark, but of course, it depends on the typeface you use.
• iPad vs. iPhone (or smartphones vs. tablets). Whether you use your iPad on the breakfast table, on your knee sitting on your sofa or right in front of your face lying in bed gives a variety of reading distances. This was an entirely new challenge, because the reading distance on desktop and laptop computers doesn’t vary that much. In order to make it work in all instances we chose the furthest reading distance defining the type size. Luckily, the iPhone is held closer to the face so being forced to use a smaller type size works out perfectly.

Leia o artigo completo: Responsive typography