Se você abrir qualquer folha de estilo de site, encontrará rems, ems ou pixels, ou qualquer combinação deles. No estilo CSS, essas são as principais unidades de medida usadas. Se você está projetando um site do zero ou se “herdou” um site projetado anteriormente que precisa ser mantido, isso é importante para tipografia, espaçamento e outros dimensionamentos no design visual.

O que torna uma unidade de medida melhor que outra? Não há uma resposta definitiva e, dependendo da situação, uma pode ser preferida à outra. Conhecer o caso de uso e o que funcionará melhor ajudará a determinar a melhor medida para o seu estilo.

Píxeis

Desde os primórdios da web, os pixels têm sido uma opção encontrada em folhas de estilo em todos os lugares. Eles são confiáveis, precisos e sua consistência não pode ser igualada. Os pixels são suportados em todos os navegadores, o que facilita o trabalho com eles.

Embora os pixels sejam ótimos, eles têm algumas limitações. Por serem uma medida tão definida, os usuários não podem alterar o tamanho do texto padrão do navegador nas configurações do navegador. As coisas não escalam como fazem com ems e rems, dificultando a mudança de tamanho do ponto de vista da acessibilidade para o usuário. Pode-se argumentar que um usuário pode apenas aumentar o zoom, em vez de entrar nas configurações do navegador. Não existe uma resposta certa ou errada, é apenas algo a ter em mente.

O que eles são?

Os pixels são uma unidade de medida baseada no dimensionamento do conjunto. Eles são a unidade para medir as dimensões em uma tela e são usados ​​quando um projeto preciso é necessário. Dizemos coisas como “resolução de pixel”, então estamos acostumados com essa medida.

Um exemplo seria algo assim:

.main-header p {
font-size: 14px;
}

Pixels têm seu uso em web design, mas na era do web design agnóstico de dispositivo, as medidas de tela não são o foco principal. É tudo sobre como fazer nosso conteúdo se encaixar melhor em inúmeros dispositivos, então existem ems e rems que podem ajudar com isso.

Ems

Esta unidade de medida tem uma longa história. Ele remonta a 1996 e existe desde os primeiros dias do CSS. Pixels eram considerados a melhor prática, então os ems não eram tão populares naqueles primeiros dias. Desde então, eles ganharam popularidade porque seu objetivo é servir como uma unidade relativa ao tamanho da fonte em um conteúdo específico e ajudam na consistência.

O que eles são?

Se você gosta de tipografia clássica, provavelmente reconheceu “em”, porque é uma unidade de medida que se origina no mundo dos tipos impressos. Usando isso como uma unidade na tipografia, essa medida é igual ao tamanho do ponto especificado no momento. Por exemplo, um em em um tipo de letra de 16 pontos é 16 pontos. Esta unidade é a mesma para todos os tipos de letra em um determinado tamanho de ponto.

Não estamos falando de impressão aqui, então como os ems figuram no design da web? O dimensionamento relativo é um grande ponto de venda para os ems porque ajuda a controlar o dimensionamento dos elementos conforme eles se relacionam com os outros. Ems podem funcionar como grandes blocos de construção para elementos de sites devido ao fato de que os valores em são compostos. No entanto, é importante realmente entender como essa composição funciona.

Entendendo os ems

Na maioria dos casos, a menos que o padrão do navegador seja definido como outra coisa, um em é de 16 px. Quando você vê 1,5 em, isso daria 24 pixels. Mas nem sempre é tão simples. O que acontece quando o aninhamento está envolvido? Pode ser conveniente e confuso. Saber como as coisas funcionam ao trabalhar com ems certamente ajudará a resolver qualquer mistério. Qual é o tamanho do parágrafo "Estou aninhado" abaixo?

<div class="one">
<div class="two">
<div class="three">
<p>I’m nested</p>
</div>
</div>
</div>

.one, .two {

font-size: 0.5em;

}

.three {

font-size: 2em;

}

Existem três divs aqui, e o parágrafo é bastante aninhado. Com a cascata do DOM, você pode ter que fazer algum trabalho de detetive. Digamos que estamos trabalhando com um em de 16px, já que é o mais comum.

A classe .one está multiplicando 1em por 0,5, que é 0,5 em ou 8 px. Com a classe .two , isso é novamente multiplicado por 0,5, que é .25 em ou 4px. As coisas estão ficando muito pequenas, então a classe de .three vai ajudar. Nós estaremos pegando 0,25 em e multiplicando por 2. O resultado é 0,5 em ou 8px.

Uma coisa que pode ajudar é definir um tamanho no elemento HTML. Algo assim especificará o tamanho do conjunto em, em vez de depender do em definido pelo navegador. Vamos definir 1 em para 20px. Se isso foi usado com o exemplo acima, os mesmos princípios com aninhamento se aplicariam. No entanto, lembre-se de que especificamos um tamanho de pixel, o que afetará a capacidade de dimensionar o texto usando a opção de configuração do navegador.

html {

font-size: 20px;

}

Além dos pixels, o tamanho da fonte também pode ser definido com uma porcentagem. A questão é que os ems podem funcionar ao lado de outras unidades de medida. Você certamente encontrará isso, pois é bastante comum definir a fonte do corpo para uma porcentagem para ajudar a definir uma linha de base. Digamos que o tamanho da fonte comece como 62,5% do tamanho em. Com um tamanho em de 16px, o tamanho da fonte seria 10px.

body {

font-size:62.5%;

}

Uma vez que você tenha uma compreensão, os ems podem ser um bom trunfo para o seu projeto. Dimensionar o texto de subelementos para seus elementos pai certamente pode ser útil. Além disso, os ems facilitam a especificação de um preenchimento maior no contêiner de texto do que o que pode ser encontrado no espaçamento de palavras, fazendo com que ele siga a regra visual de proximidade. Os itens relacionados serão agrupados visualmente, com menos confusão e fornecerão um layout organizado.

Outra grande característica do ems são as vantagens de acessibilidade. Por ser relativo à raiz do DOM, o ems o torna perfeito para redimensionar todo o design com base nas preferências do usuário. Nas preferências do navegador, você pode alterar facilmente o tamanho da fonte padrão, que altera os cálculos, em ems, para todo o site.

Rems

O que eles são?

Rems é uma adição bastante recente à linha do tempo do CSS. Esta unidade de medida foi introduzida com CSS3 e resolve alguns dos problemas com pixels e ems. Com um nome semelhante a “ems”, você pode estar se perguntando o que o “r” significa. Vem do termo “Raiz EM”.

A raiz é o elemento HTML. O dimensionamento especificado no elemento HTML é a base para esta medida. Você verá que usamos dimensionamento em no elemento HTML; não há problema em combinar os dois tipos de medição.

html {
font-size: 1em;
}

.one {
font-size: 1.2rem; /* 1.2 x the value set in html */
}

Os navegadores modernos suportam rems, mas certifique-se de verificar com o BrowserStack quais navegadores mais antigos você precisa suportar antes de se comprometer com rems. No entanto, não deixe que navegadores mais antigos o impeçam; você sempre pode especificar um fallback de pixel para qualquer coisa abaixo do IE9. Os navegadores modernos ignoram os pixels porque preferem rems. Pode ser algo assim:

.my-text {

font-size: 24px;

font-size: 1.5rem;

}

Entendendo rems

Lembre-se da matemática que tivemos que fazer para os elementos aninhados de ems? Isso não é necessário com rems. É tudo baseado nesse elemento raiz. Não precisamos nos preocupar com elementos pai, é sempre baseado na raiz.

<div class="one">
<div class="two">
<div class="three">
<p>I’m nested</p>
</div>
</div>
</div>

html {

font-size: 1em;

}

.one, .two {

font-size: 0.52em;

}

.three {

font-size: 2rem;

}

Existem três divs aqui, e o parágrafo é bastante aninhado como vimos no exemplo em. Novamente, digamos que estamos trabalhando com um tamanho em de 16px.

As classes .one e .two têm tamanhos atribuídos, mas eles realmente não importam aqui porque o aninhamento não é afetado com rems como é com ems. Tudo o que realmente importa é o estilo de .three, que é 2 ems. O parágrafo seria baseado no elemento HTML de 1em. Esta medida seria duplicada, dando-nos 2 rems ou 32 pixels.

Quer escalar tudo uniformemente? Basta ajustar o tamanho do elemento raiz. Isso também é útil ao ajustar o tamanho padrão do navegador. Você pode ver como os ems permitem isso, os rems também.

Há muito menos com o que se preocupar em relação ao comportamento de aninhamento imprevisível com rems. É fácil entender onde o elemento raiz entra em ação e como isso afeta seu estilo ao usar rems.

Ao comparar as diferentes medidas, você pode ver que elas têm seus prós e contras. Realmente entender como as unidades de medida funcionam e como elas funcionam com as configurações do navegador ajudará você a escolher qual funcionará melhor para a situação ou projeto.