O caminho para um texto responsivo elegante

Por
Twittar
Compartilhar
Compartilhar
Pin

CSS (Cascading Style Sheets) é um dos blocos de construção de interfaces de usuário em aplicativos da web, móveis e desktop. Essa linguagem de estilo tem valores e propriedades diferentes, facilitando a atribuição de diferentes estilos e propriedades aos aplicativos. REM é um dos valores que você encontrará com frequência ao estilizar suas páginas da web usando CSS.

Neste artigo, explicarei REM em CSS, discutirei a importância da tipografia responsiva em web design, descreverei como as unidades REM são calculadas e mencionarei alguns benefícios do uso de REM em CSS.

O que é REM em CSS?

Root-EM (REM) são unidades que indicam o tamanho da fonte de um elemento em relação ao tamanho da fonte do elemento raiz. REM é uma unidade relativa, o que significa que todos os valores que a utilizam serão alterados quando o tamanho da fonte do elemento raiz for alterado. O tamanho de fonte padrão da maioria dos navegadores é 16px. Assim, se o elemento raiz tiver 16px, o tamanho do REM será 1.

As unidades REM são o oposto de unidades absolutas como pixels. Tomemos, por exemplo, este código:

<div>Hello World</div>

Este é o nosso estilo:

div {
  border: 1.5px solid black;
  width: 200px;
}

A largura do bloco (200px) permanecerá a mesma independentemente de o tamanho da tela aumentar ou diminuir. Esta largura não é relativa a nada em nosso documento HTML.

O mesmo se aplica à fronteira do nosso contentor; permanecerá 1,5px, independentemente da variação da tela ou do ambiente.

Importância da tipografia responsiva em web design

A tipografia responsiva envolve muitas coisas, como layout, tamanho e espaçamento do texto. Estas são algumas das razões pelas quais web designers implementam web design responsivo:

  • Experiência de usuário aprimorada: os usuários da Web são atraídos por aplicativos fáceis de navegar. Um aplicativo que se ajusta a diferentes tamanhos de tela e ambientes oferece uma experiência de usuário agradável e integrada.
  • Facilita o ajuste a diferentes viewports: a tipografia responsiva verifica o espaço disponível em uma viewport e ajusta de acordo. Assim, você não terá casos de textos sobrecarregados em telas grandes ou textos minúsculos em telas pequenas.
  • Legibilidade aprimorada: um bom site deve ser fácil de acessar e ler. Investir em tipografia responsiva garante que o texto do seu aplicativo se ajuste de acordo com o tamanho e a orientação da tela.
  • Marca consistente: à medida que seu código-fonte aumenta, você pode ter variações de fontes mistas em seu aplicativo. O design responsivo garante abordagens de design consistentes, independentemente do tamanho da tela ou do comportamento do usuário.
  • Integra-se com consultas de mídia: a tipografia responsiva pode ser combinada com consultas de mídia. Os web designers podem criar estilos diferentes por meio de consultas de mídia, nas quais as fontes são ajustadas com base em características como orientação e tamanho da tela.
  • Acessibilidade aprimorada: a tipografia responsiva é uma das bases da acessibilidade de um aplicativo. Dessa forma, usuários com habilidades variadas podem ajustar os tamanhos de tela e as fontes para atender às suas necessidades.
  13 ferramentas SMTP para diagnosticar e testar a segurança de e-mail

Como as unidades REM são calculadas

As unidades REM são calculadas em relação ao tamanho da fonte do elemento (raiz). Esse recurso nos permite criar designs consistentes e escaláveis, definindo valores com base em um único valor raiz.

A maioria dos navegadores é definida por padrão para 16px. No entanto, você pode definir o tamanho da fonte do valor raiz para um valor como 10px. Você pode ter algo assim:

html {
  font-size: 10px;
}

Nesse caso, 10px=1 REM

Podemos usar este código para demonstrar:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Welcome to etechpt.com</h1>
</body>
</html>

Este código não tem estilo e possui um único elemento, um H1, que diz “Bem-vindo ao etechpt.com”.

O tamanho da fonte por padrão será 16px, o que significa que 1REM=16px. Quando renderizamos esta página, é isso que obtemos:

Agora podemos adicionar uma folha de estilo, estilos.css, e demonstrar como funciona o REM. É assim que você vincula os arquivos estilos.css e index.html na seção do seu documento HTML:

   <link rel="stylesheet" href="https://wilku.top/the-path-to-elegant-responsive-text/styles.css">

Você pode então ter este código:

html {
  font-size: 10px;
}

Neste caso, quando definirmos os valores REM, eles serão relativos a 10px. O tamanho da fonte do nosso H1 também diminuirá, conforme mostrado nesta captura de tela.

Agora podemos alterar o tamanho do nosso H1 usando valores REM da seguinte forma:

h1 {
    font-size: 3.5rem; /* Equivalent to 35 pixels (3.5rem * 10px = 35px) */
  }

Nosso H1 agora será maior em 35px=3,5REM.

  6 principais planejadores de rotas EV para uma viagem por estrada

Benefícios de usar REM em CSS

A maioria das pessoas está acostumada com pixels (px) e porcentagens como unidades de medida ao escrever código CSS. Por que não seguir essas duas opções em vez de optar pelas unidades REM? Estas são algumas razões para usar REM:

  • Aumenta a escalabilidade: você pode alterar o tamanho da fonte do elemento raiz, tornando as unidades REM escaláveis. Tal abordagem facilita a alteração proporcional das unidades REM. As unidades REM também serão ajustadas quando os usuários ajustarem os tamanhos das fontes do navegador.
  • Fácil de gerenciar: você pode alterar o elemento raiz na tag ou e as unidades REM serão ajustadas automaticamente. Essa abordagem evita o trabalho de ajustar cada elemento em seu arquivo CSS. Assim, você pode alterar o tamanho da fonte, digamos, de todos os H1s com uma única alteração.
  • Dimensionamento consistente: as unidades REM controlam o tamanho e o espaçamento das fontes. Assim, você tem a certeza de que terá tamanhos de fonte consistentes em suas páginas da web, pois são relativos ao elemento raiz.
  • Torna possível ter designs responsivos: Você pode criar designs que se ajustam a vários tamanhos de tela e dispositivos. Quando unidades REM são usadas junto com consultas de mídia, você pode ajustar o tamanho da fonte do elemento raiz e outras unidades serão ajustadas proporcionalmente.

CSS REM x EM x porcentagens

Você pode ter encontrado pixels, REMs, EMs e porcentagens ao escrever código CSS. Embora todas essas unidades sejam usadas para definir tamanhos e espaçamentos de fonte, elas são aplicáveis ​​em diferentes cenários e vêm com recursos diferentes. Vamos comparar o REM com unidades diferentes:

REM x EM

REM e EM são unidades relativas, o que significa que mudam com base em um determinado valor. No entanto, REM está vinculado ao elemento raiz (), enquanto EM está vinculado ao elemento pai (contêiner). Por exemplo, você tem uma div que atua como pai e outra div dentro do pai que atua como filho. Dê uma olhada neste código:

<div class="parent">
    <p>This is the parent element.</p>
    <div class="child">
      <p>This is the child element.</p>
    </div>
  </div>

Você pode definir as unidades EM da seguinte forma:

.parent {
  font-size: 1.5em; 
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}
.child {
  font-size: 1.2em; 
  color: #333;
}

Atribuímos à classe .parent um tamanho de fonte de 1,5em. No entanto, o elemento .child tem um tamanho de fonte de 1,2em, que é relativo à classe pai. Todas as alterações na classe pai serão automaticamente transferidas para o elemento filho.

REM vs. Porcentagens

As unidades percentuais são relativas ao tamanho/espaçamento do elemento pai. Portanto, se tivermos um elemento pai, como tendo 16px como tamanho de fonte, podemos definir um elemento filho, como

para ter um tamanho de fonte de 50%, o que significa que é 50 /100*16=8px.

Você pode ilustrar isso usando este código:

body {
  font-size: 16px;
}
p {
  font-size: 50%;
}

Podemos resumir a relação entre REM, EM e porcentagens usando esta tabela:

RecursoREMEMPercentageRelative toRoot elementElemento pai /containerElemento pai/ containerInheritanceFrom rootFrom parentFrom parentCaso de usoAdequado para layouts consistentesAdequado para tamanhos relativosAdequado para designs responsivosEscalabilidadeSimSim Relativo

Quando não usar unidades REM

Você pode ficar tentado a usar unidades REM em todas as suas medições de CSS devido às suas muitas vantagens. No entanto, estes são alguns dos casos em que podem ser inadequados:

  • Ao lidar com impressões: Se você deseja imprimir algo, então você quer ter certeza de que está lidando com valores absolutos. Nesses casos, polegadas ou milímetros proporcionam controle preciso sobre as dimensões.
  • Quando você deseja um controle refinado: Se você deseja controlar o tamanho de um elemento, que está intimamente ligado ao pai, o REM não será uma boa opção. Nesses casos, unidades absolutas ou fixas como pixels serão a escolha perfeita.
  • Ao lidar com animações e transições: As unidades REM não são adequadas onde você deseja que o tamanho das animações e transições mude gradualmente. Ao usar unidades REM, uma certa mudança no tamanho da fonte do elemento raiz causará mudanças abruptas nas transições ou animações.
  • Ao lidar com navegadores legados: Alguns navegadores mais antigos não suportam unidades REM. Nesses casos, você pode usar porcentagens ou unidades baseadas em pixels.

Conclusão

Esperamos agora que você entenda como usar REM em CSS, calculá-los e onde usá-los. Os valores REM são valores relativos, o que significa que você pode ter tamanhos de fonte consistentes em seus aplicativos.

Por outro lado, pixels são valores absolutos que não mudam com base no tamanho da janela de visualização ou nos elementos circundantes.

No entanto, tais valores REM não são aplicáveis ​​em todos os casos, pois há alguns casos em que percentagens e pixels são mais adequados.

Saiba mais sobre estilo usando estes recursos CSS.

Esse artigo foi útil?

Obrigado pelo seu feedback!