Padrões Web e CSS – Caio J Ruman

Amar pode ser uma palavra muito forte, mas não encontrei outra palavra para a situação.

A uns 6 meses atraz eu passei a adotar o ‘em’ para as fontes, em todos os sites que eu estruturo.

ex:

html { font-size: 62.5%; }

body { font-size: 1em; }

Do modo acima, como a fonte padrão dos browser é 16px, a fonte de tudo fica como 10px, ou seja, 1em = 10px. Então nos outros elementos, se eu quiser a fonte como 13px, eu faço 1.3m.

Se o usuário aumentar a fonte padrão do browser, tudo aumenta também. Útil para quem não consegue ler direito.

Há um pequeno problema com isso, já que um elemento filho herda o tamanho da fonte do elemento pai, e setando um valor em ‘em’ para os 2 elementos, o tamanho da fonte do elemento filho não vai ser o que você espera.

Até hoje eu não tinha tido um retorno de ganho de tempo com isso. Até hoje! O atendimento veio com um pedido: “O cliente ligou desesperado! Precisa aumentar a fonte de todo o site! Urgente!” (incrível como tudo é urgente!).

Modificação necessária: somente 1 linha no css

body { font-size: 1.1em; }

Ahh, que maravilha. E um viva às unidades relativas.

Quando o site citado for ao ar eu coloco o endereço aqui! Por enquanto ele está em produção, então o NDA ainda conta.

ps: Vergonhosamente o meu blog não usa isso ainda. Está tudo em px mesmo XD