Ems ainda são as melhores unidades para dimensionar texto na web. Há apenas uma razão pela qual você está confiando em pixels, e é porque você ainda não pegou o jeito do ems. Vamos mudar isso!
M decorativo cortesia de Frances Mcleod – vencedor do TypeFight #34
Tamanho é tudo
Quando construímos sites, precisamos dizer ao navegador o quão “grande” é o material: “este título é tão grande”, “este contêiner é muito alto”, “este formulário é mais largo que isso”, é como fazemos o layout de uma página. Os pixels sempre fizeram todo o sentido como a unidade de medida escolhida; estamos enviando para uma tela, então o que mais usaríamos?!
No entanto, os pixels não são particularmente flexíveis. E acontece que ser inflexível não é bom para a web.
Problemas com pixels
Oliver Reichenstein afirmou há muito tempo: “A Web é 95% Tipografia”, mas é uma ideia que os designers ainda ignoram. Conteúdo e usuários; eles são nossas prioridades como web designers, e o design tipográfico nos ajuda a atender a essas prioridades.
Graças ao simples zoom da página, os usuários podem visualizar qualquer site em qualquer tamanho que desejarem, dimensionando perfeitamente o conteúdo para cima e para baixo proporcionalmente. Mas isso escala tudolayout e elementos de interface do usuário incluídos.
“Um recurso menos conhecido da maioria dos navegadores, porém, é a opção de ajustar o tamanho da fonte de sua preferência. Esse recurso opera independentemente do recurso de zoom da página.” — Kathleen McMahon
Os navegadores exibem a cópia do corpo em um tamanho padrão. Em desktops, geralmente é 16px, os navegadores móveis variam. E como diz Kathleen, os usuários podem alterar esse padrão, dependendo do que preferirem. Ao fazer isso, eles alteram o tamanho do texto e apenas o texto.
Mas quando web designers usam CSS para moldar o tamanho da fonte base em pedra.
..eles impedem que o usuário personalize sua própria experiência de leitura, tornando o conteúdo menos acessível. Se o tamanho da fonte for definido em pixels, as configurações do navegador não mudarão nada.
Definir um tamanho de fonte padrão flexível
A primeira lição é devolver o poder ao usuário. Não impeça os usuários de definir seu próprio tamanho de tipo, mas certifique-se de começar em igualdade de condições. Defina sua fonte base para 100% do padrão do navegador:
então podemos trabalhar a partir daí.
Nossa escala tipográfica
Ainda precisamos definir o tamanho dos vários elementos tipográficos, especialmente se tivermos usado uma técnica de redefinição de CSS para remover todo o dimensionamento padrão. Uma escala modular bastante típica seria mais ou menos assim:
Esses números são usados há séculos, calculados para otimizar proporções, sem a necessidade de fabricar fisicamente muitos dos blocos usados na impressão. Há todo tipo de matemática inteligente que justifica escalas como essa e tenho certeza que você pode apreciar que esse intervalo também é agradável aos olhos.
Nós traduziríamos essa escala para nossa própria tipografia aplicando CSS mais ou menos assim:
No entanto (como já dissemos) usar valores fixos de pixel é inflexível, então vamos corrigir isso.
O que é um Em?
Um em é uma unidade de medida. Assim como os pixels, o ems pode determinar o tamanho dos elementos em uma página da web. Ao contrário dos pixels, que são absolutos, os ems são relativos ao tamanho da fonte de seus pais, que é onde reside muita confusão.
1em é igual ao tamanho da fonte herdada. Se o tamanho da fonte de um
está definido para 16px, 1em dentro desse é equivalente a 16px. Se o tamanho da fonte desse muda para 20px, 1em dentro disso é equivalente a 20px.
Ems obtêm seu nome da impressão. Precisamente quando o termo foi usado pela primeira vez não está claro, mas como o M maiúsculo (pronuncia-se emm) representa mais de perto o bloco de impressão quadrado no qual as letras de impressão foram colocadas, veio a emprestar seu nome à medição. Qualquer que seja o tamanho do ponto da fonte em questão, o bloco do M maiúsculo definiria o Em.
Um em geralmente é um pouco maior que a forma da letra, mas essa é a ideia.
Um M maiúsculo em Calendas Plus – o quadrado ao redor tem 1em de altura, 1em de largura
Como converter pixels em Ems
Já começamos a definir nossa escala tipográfica em pixels, então como convertemos isso em ems? Um cálculo simples, que expressa o tamanho de fonte desejado em relação ao tamanho da fonte do corpo:
Usando o tamanho do corpo que supomos ser 16px, com o objetivo de converter nossos 36px
Nós temos:
Veja como nossa escala é convertida, usando o método acima:
Alguns desses valores podem ser um pouco complexos, mas não tenha medo de ser o mais preciso possível com as casas decimais. Os navegadores sempre farão o possível para renderizar os valores exatos.
É útil fazer uma anotação nos comentários, para se lembrar de como você calculou o valor de cada um.
Problemas com Cascata
A maior reclamação que as pessoas têm com o ems vem de complicações que surgem em cascata. Um valor em é relativo ao valor do pai mais próximo, o que pode atrapalhar acidentalmente as coisas se você não estiver prestando atenção. Dê uma olhada no seguinte css, que visa obter âncoras e parágrafos de tamanho igual:
Agora dê uma olhada neste pedaço inocente de marcação:
Como seria de esperar, tudo parece bem no navegador. Tanto o parágrafo quanto a âncora são exibidos em 1,2 em, em relação ao tamanho da fonte do corpo (1.2 * 16px = 19.2px).
No entanto, se introduzirmos uma segunda âncora dentro de o parágrafo, vamos ver o que acontece:
A âncora dentro do parágrafo ainda é dimensionada em 1,2 em, mas agora é relativa ao parágrafo pai, que já tem 19,2 px – (1.2 * 19.2px = 23.04px). Isso nos dá âncoras extragrandes em algumas partes de nossa página; dificilmente desejável.
Itens de lista aninhados em menus de navegação são um exemplo clássico de onde a cascata pode ficar fora de controle – cuidado com isso.
O conserto
Não há solução para isso; a última coisa que você quer fazer é adicionar uma regra extra para diminuir o tamanho das âncoras que estão nos parágrafos – isso é uma passagem só de ida para Migrainesville. Para manter seu CSS e HTML de fácil manutenção, é importante Keep It Simple™.
Mantenha sua marcação simples e modular.
Defina seus ems de forma clara e contida – não os jogue para todo lado.
Tente restringir o tamanho da fonte aos elementos tipográficos; seja cauteloso ao aplicar tamanhos de fonte a elementos estruturais.
Isso deve ajudar! Usar o Ems significa que você terá que pensar bastante às vezes, mas isso o forçará a limpar seu ato e ser eficiente em sua codificação.
Rems
Rems são úteis e se comportam exatamente da mesma maneira que ems, sem a cascata. Cada Rem que você define é relativo ao tamanho da fonte do corpo. O suporte é tão bom quanto você precisa hoje em dia.
Que tal usar o Ems em outro lugar?
Cobrimos o CSS font-size propriedade; um primeiro passo sensato para usar o ems, mas agora vamos ver line-height. Se alguma vez houve uma propriedade que grita “não use valores de pixel”, é a altura da linha.
Nesse caso, é melhor usar um valor sem unidade. Isso mesmo, apenas um número; sem pixels ou ems ou qualquer coisa. Valores sem unidade são a única maneira de garantir que os descendentes de um elemento herdem um parente line-height. Mesmo usando ems pode significar que um valor calculado é passado para elementos aninhados.
Não há uma regra fixa para quão grande a altura da linha deve ser, mas 1,5 é um valor razoável para experimentar e tornará sua tipografia agradavelmente legível.
Nesse caso, nossa altura de linha é 1.5 * 18px que é 27px
Elementos estruturais
Depois de adotar a mentalidade de manter seu layout flexível em termos de tamanho da fonte, você descobrirá que depende cada vez menos de pixels para dispor os elementos na página.
Se estivermos falando sobre layouts fluidos, use valores % para determinar a largura de qualquer elemento ou deixe que o Flexbox e o CSS Grid façam a medição para você.
CSS Grid vs. Flexbox: Qual você deve usar e quando?
Ana Monus
18 de julho de 2021
Um guia completo para o alinhamento do Flexbox
Ana Monus
23 de maio de 2021
O espaçamento vertical pode ser obtido facilmente com o ems, se você quiser. Novamente, é uma questão de ser limpo com sua marcação e estilo. Considere restringir as margens ao fundo dos seus elementos, de forma a facilitar a gestão do ritmo vertical.
Se você precisa definir um height (o que pode ser complicado em layouts flexíveis) use ems também. Talvez você esteja construindo uma navegação e precise definir a altura dos links do menu – eles devem crescer e diminuir com o tamanho da fonte.
Cantos arredondados em um botão? Colocou o border-radius usando ems, para que tudo seja dimensionado perfeitamente. Experimente esta caneta interativa; mudar o corpo font-size para 200% e veja o que acontece com cada botão.
Sombra de texto, sombra de caixa, idem.
RWD
E se você precisar alterar o tamanho de tudo sob certas circunstâncias, como viewports menores? Altere o tamanho da fonte base do corpo na consulta de mídia apropriada body { font-size: 90%; } e bam! Todo o seu site escala no tempo que leva para apertar enter.
Conclusão
Comece a usar o ems hoje! Seu conteúdo é fundamentado tipograficamente, quer você perceba ou não. Você não precisa abandonar totalmente os pixels, mas comece a pensar em ems e logo descobrirá que eles tornam seus designs da web mais flexíveis.
Saber mais
Pixels vs. Unidades relativas em CSS: por que ainda é importante por Kathleen McMahon
ferramenta de conversão pxtoem.com
Como aprendemos a deixar o tamanho de fonte padrão sozinho e adotar o em por Filament Group
Por que Ems? por Chris Coyier
Em (tipografia) na Wikipédia
O tamanho da fonte com rem pode ser evitado por Harry Roberts (uma abordagem menos popular atualmente)
Mixins for Rem Font Sizing por Chris Coyier (se você estiver confiante com o SASS)
Uma explicação do ems em “Os Elementos do Estilo Tipográfico Aplicados à Web”
LIVRE
7,9 horas
HTML e CSS para Iniciantes
Neste curso gratuito, você aprenderá a codificar com HTML e CSS modernos, os principais blocos de construção de qualquer site.
CSS Grid vs. Flexbox: Qual você deve usar e quando?
Um guia completo para o alinhamento do Flexbox
