Na lição anterior, aprendemos sobre unidades de comprimento absolutas como pixels. Embora unidades absolutas possam ser úteis em certas situações, haverá momentos em que você desejará usar unidades relativas. Nesta lição, aprenderemos sobre duas unidades relativas: ems e rems. Unidades em são relativas ao tamanho da fonte do elemento. Se você estiver usando ems para a propriedade font-size, o tamanho do texto será relativo ao tamanho da fonte do elemento pai. Para entender melhor como isso funciona, vamos dar uma olhada em um exemplo:

<link rel="stylesheet" href="styles.css" />
<p class="para">I am a paragraph element</p>

<div class="blue-box"></div>

.para {
  font-size: 20px;
  margin-bottom: 1.5em;
  border: 2px solid red;
}

.blue-box {
  background-color: blue;
  color: white;
  padding: 10px;
  width: 100px;
  height: 100px;
}

Para o HTML, temos um parágrafo e um elemento div. O elemento parágrafo tem uma classe para e o elemento div tem uma classe blue-box. Para a classe para, definimos o font-size para 20px e o margin-bottom para 1.5em. Isso significa que a margem será 1,5 vezes o tamanho da fonte do elemento parágrafo. 1.5em resulta em 30 pixels de margem na parte inferior do parágrafo. Também definimos uma border de 2px solid red para que você possa ver melhor as margens. Para a classe blue-box, definimos a cor de fundo como blue, a cor do texto como white e o padding como 10px em todos os quatro lados. No exemplo, haverá um espaço claro entre a parte inferior do elemento de parágrafo e a caixa azul. O que acontece se removermos a propriedade font-size da classe para? Bem, a margem inferior será relativa ao tamanho da fonte do elemento pai. Neste caso, o elemento pai é o elemento body, que tem um tamanho de fonte padrão de 16px. Bons casos de uso para ems seriam quando você está trabalhando com componentes modulares como botões ou cards. Ao usar unidades em, você pode garantir que todos os aspectos do componente (como padding, margin e borders) escalem proporcionalmente com o tamanho da fonte, mantendo proporções consistentes. Então, até este ponto, temos definido o tamanho da fonte para um elemento usando pixels. Mas isso apresenta alguns desafios para os usuários. Dentro das configurações do seu navegador, você pode controlar o tamanho da fonte padrão. Para pessoas com deficiências visuais, elas podem aumentar o tamanho da fonte para facilitar a leitura. Mas se você estiver definindo pixels para os tamanhos de fonte em seus designs web, o texto não será dimensionado proporcionalmente com o restante do conteúdo. Uma forma de resolver esse problema é usar unidades rem para tipografia. A unidade rem é relativa ao tamanho da fonte do elemento raiz, que é o elemento html. Por padrão, o tamanho da fonte do elemento html é 16px. Se o usuário aumentar o tamanho da fonte nas configurações do navegador, o tamanho da fonte do elemento html aumentará e todas as unidades rem serão dimensionadas proporcionalmente. Aqui está um exemplo de uso da unidade rem para o tamanho da fonte em vez de pixels:

<link rel="stylesheet" href="styles.css" />
<p>This is regular text.</p>
<p class="para">This text is slightly larger.</p>

.para {
  font-size: 1.2rem;
  margin-bottom: 1.5em;
  border: 2px solid red;
}

Ao definir o tamanho da fonte para 1.2rem, o tamanho da fonte do elemento parágrafo será 1.2 vezes o tamanho da fonte do elemento raiz. Se o usuário não alterou o tamanho da fonte padrão, o tamanho da fonte do elemento parágrafo será 19.2px porque é 1.2 vezes 16px. Então, quando você deve usar unidades rem? Unidades rem são preferidas em vez de pixels para tipografia porque elas escalam proporcionalmente com as configurações do navegador do usuário. Isso torna seu conteúdo mais acessível para usuários com deficiências visuais. Unidades rem também podem ajudar a manter espaçamento e layout consistentes entre diferentes elementos.