Unidades de medida CSS para fontes Responsive Web Design

As melhores unidades de medida de CSS para trabalhar com tamanhos para tipografias em Responsive Web Design, vantagens, inconvenientes e soluções para a unidade rem.

Por Miguel Angel Alvarez - Tradução de Celeste Veiga


Publicado em: 15/8/13
Valorize este artigo:
As unidades de CSS não têm muito mistério, já que estão documentadas em centenas de sites web, sem ir mais longe, em CriarWeb.com temos vários artigos sobre o tema. Porém, na prática surgem dúvidas sobre estes assuntos porque, às vezes, não temos claro quando utilizar em ou rem, porcentagem, etc. quando se trata de dar tamanho aos textos.

Sobre este assunto, sempre devemos ter em conta usar unidades de medida que se adaptem ao dispositivo, para o Responsive Web Design.

Como devemos de saber, quando trabalhamos com designs adaptáveis devemos usar sempre medidas relativas, para que estas se adaptem, às dimensões das telas onde se possa ver o website. Isto nos obriga a descartar px, cm, mas nos faltam várias outras para escolher.

Basicamente, a melhor unidade para trabalhar textos adaptáveis em CSS é o rem, "a unidade perfeita". Esta unidade de medida quer dizer "root em", e é aquela que nos remete ao tamanho de fonte que temos na raiz. Por exemplo, se nós tomamos o BODY e tem um font-size de 100% (o que corresponderá geralmente a uns 16 pixels), sabemos que sempre rem será equivalente a esses 16 pixels, não importando onde você o coloque.

Por que rem é mais útil que em

Até pouco tempo, tenho certeza que muitos desenvolvedores vinham utilizando unidades de medida em em, mas qual era o problema com estes em? É que o em depende do tamanho da fonte do conteiner, ou do tamanho da fonte declarado em algum dos conteiners pai dele. A unidade em é relativa ao pai, que se tiver por sua vez outra unidade em em, é relativa ao pai e assim, na hierarquia de elementos até chegar ao elemento raiz, o BODY. Isto, que pode resultar fácil de entender, na prática às vezes pode nos dar alguma dor de cabeça ao calcular que medida é exatamente um em em um conteiner, porque esse tamanho depende de uma inumerável quantidade de conteiners que podem estar aninhados, até chegar ao conteiner onde estamos indicando as medidas. Deste modo, para mudar o tamanho da fonte desse elemento, temos que ter em conta muitas outras medidas que possam ter sido dadas a quaisquer dos pais na página.

Calculando um valor em em

Vejamos isto em números para percebermos como se deve calcular o tamanho de uma fonte usando em, para fazer com que ela corresponda ao tamanho de pixels desejado. Imaginemos que o tamanho base da fonte é de 16 pixels. Imaginemos que o tamanho de um H1 que queremos seja de 24 pixels, que seria 1.5em. Por quê? Bem, temos que aplicar a regra "target/context" o target é a medida que queremos dar ao H1, 24px e o contexto é a medida do conteiner onde estamos 16px. De modo que a medida que temos que dar a H1 seria de 24/16 = 1.5em.

Porém, agora imaginemos que dentro do H1 temos um link e queremos dar a ele um tamanho de letra menor, digamos 12px. Agora já não podemos dividir 12/16 para saber o tamanho dessa medida em em, agora teríamos que ter em conta o tamanho do H1 que tínhamos combinado que era 1.5em. Se não sabemos que isso equivale, neste caso, a 24px, primeiro deveríamos calcular o tamanho do H1 para chegar aos 24px que tinha. Target seria 12px e context 24px, de modo que 12/24 = 0.5em o tamanho em em que deveríamos colocar para o link.

Porém, o assunto pode ser complicado o quanto quisermos. Agora podemos imaginar que dentro do link há um SPAN, ao que queremos da outro tamanho de fonte distinto. Se queremos acertar com o tamanho desejado teremos que ter em conta o tamanho do BODY, o definido logo para o H1, o definido para o link e finalmente calcular o tamanho do SPAN.

Pensando em outros dispositivos

Pensemos também em diferentes dispositivos. O tamanho de uma fonte em um móvel poderia ser, caso se deseje, um pouquinho menor que o tamanho de fonte em um Ipad.

Nota: Aqui poderíamos pensar que por ser o móvel de tamanho menor que o Ipad, a fonte já por si só vai se ver menor, mas devemos ter em conta que o móvel sempre vai estar mais perto do rosto, o que realmente admite um tamanho de fonte menor.

Se queremos então reduzir a fonte poderíamos atribuir ao BODY, por meio de "mediaqueries" para telas pequenas, um tamanho de 80% no tamanho da fonte. Como todas as fontes estão definidas com medidas relativas, encontraremos que se reduzem em toda a página, mas na prática observaremos que começa a descompaginar, que os tamanhos não casam.

Estes são os típicos problemas que evitamos com rem.

Como funcionam as unidades Rem

Rem não funciona de maneira relativa a seu contêiner mas sim de maneira relativa ao tamanho definido na raiz. Dessa forma, quando quero calcular uma medida de um elemento, não tenho que pensar no tamanho de seu pai ou no tamanho do pai do pai.
A regra do "target/context" segue valendo perfeitamente, mas posso fazer a conta sempre com relação ao tamanho definido na raiz.

Se no elemento BODY tínhamos 16px de tamanho e quero 24px no H1, tenho que calcular 24/ 16 = 1.5rem. Se depois no link que havia dentro do H1 quero que seja 12px, tenho que calcular como context 16px (que era o equivalente ao100% definido como tamanho da raiz) e não o tamanho do H1. Ou seja, neste caso seria 12/16 = 0.75rem.

Compatibilidade com as unidades de medida Rem e fallback

Infelizmente, existe um problema com as unidades de medida especificadas em rem que é a Internet Explorer 8 e, claro, as versões anteriores a ele. Os IE antigos não são compatíveis com as unidades rem.
A solução é simples e é realizada pelo que se denomina fallback, que se baseia em especificar código alternativo no caso de que o original não funcione. Neste caso o fallback é tão simples quanto especificar as medidas em duas unidades.

font-size: 16px;
font-size: 1rem;

Os navegadores antigos que não entendem rem ficarão com font-size 16px (porque ignoram a segunda linha, já que não são compatíveis com essa unidade). Os que entendem rem simplesmente leem a segunda linha e sobrescrevem o valor especificado na primeira.

Nota: Por que nos podemos permitir escrever essa medida fallback em pixels? Porque nos resulta cômodo utilizá-los, já que não temos que fazer nenhum cálculo. Como essa medida só vai ser interpretada nos IE 8 ou inferior, e são computadores de escritório, não nos incomoda.

Certamente nos dá um pouco mais de trabalho especificar por partida dupla todas as medidas, mas aqui encontramos uma das vantagens em usar os chamados preprocessadores CSS. Eles têm a possibilidade de escrever um mixin por meio do qual podemos indicar em nossos CSS, sempre medidas em pixels e depois que o próprio preprocessador seja o que a converta para rem, mediante a regra target/context e escreva as duas unidades de medida, tanto em rem para os navegadores modernos e pixels quanto fallback para os Internet Explorer antigos.

Conclusão

No momento, com estas informações esperamos que você tenha suficiente para começar a experimentar com os rem e atribuir de modo mais simples os tamanhos das fontes seus websites.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato