Formação Oracle DBA Completa


HTML, CSS e Bootstrap – O uso de de “rem”, “en” e pixels “px”.

HTML, CSS e Bootstrap – O uso de de “rem”, “en” e pixels “px”.

23 de junho de 2019 0 Por Ramos de Souza Janones
Powered by Rock Convert

Dica de quando e onde usar os termos “rem”, “en” e pixels “px” em HTML, CSS e Bootstrap 5. Entenda da teoria a prática e aplique as melhores práticas.

Este artigo tem como objetivo esclarecer esta dúvida de desenvolvedores Web, especialmente Front-end.

rem toma por base o html, se o documento for um HTML

De acordo com o W3C:

rem unit: Equal to the computed value of font-size on the root element.

Significando:

unidade rem: Igual o valor computado do tamanho da fonte do elemento raiz.

E, de acordo com a MDN:

VAI GOSTAR: Guia Jurídico Definitivo para Startups

VEJA TAMBÉM: Sucesso na Carreira com o LinkedIn

RECOMENDAMOS: Curso de Desenvolvimento de Games Completo

LEIA: Como Aprender Java e ir além do mercado de trabalho tradicional


rem: This unit represents the font-size of the root element (e.g. the font-size of the element).

Ou seja,

rem: Esta unidade representa o tamanho da fonte do elemento raiz (por exemplo, o tamanho da fonte do elemento )

Para entender o motivo do HTML ser mencionado no “por exemplo”, temos que lembrar que o CSS pode ser usado com outros tipos de documento.

No caso específico de um documento HTML, a raíz é justamente o <html>, que por sua vez contém o <head> e o <body>, e todos os demais ítens. Sendo assím, a “raiz do documento” é sinônimo para o <html> em documentos HTML, portanto o rem toma por base o tamanho da fonte do <html>.

em toma por base o valor herdado pela fonte do elemento

Ainda no link da MDN acima, temos:

em: This unit represents the calculated font-size of the element. If used on the font-size property itself, it represents the inherited font-size of the element.

Ou seja,

em: Esta unidade representa o tamanho calculado da fonte do elemento. Se usado no próprio tamanho da fonte, é tomado por base seu tamanho herdado.

Simplificando, o que acontece com o em basicamente é o seguinte:

Se você especifica um tamanho de fonte como sendo 2em, ela vai ter o dobro do tamanho que teria normalmente, se não especificasse nada. Um exemplo de uso do em é esse (mas não se limite a isto, as possibilidades são muito mais que essas):

.reais span {font-size:.6em}
.tamanho1 {font-size:13px}
.tamanho2 {font-size:20px}
.tamanho3 {font-size:30px}
<div class="tamanho1 reais"><span>R$</span>29<span>,90</span></div>
<div class="tamanho2 reais"><span>R$</span>29<span>,90</span></div>
<div class="tamanho3 reais"><span>R$</span>29<span>,90</span></div>

Note que neste caso, usamos um em só para definir a fonte menor do R$ e dos centavos. O em será sempre de .6 da fonte principal, sem que precisemos nos preocupar com o tamanho da linha.

Por outro lado, se você especifica a medida de um elemento com em, esta medida será relativa à fonte do próprio elemento. Veja o em aplicado no tamanho de um ícone, por exemplo:

.icon {
  background:url(http://lorempixel.com/200/200) no-repeat 0 0;
  background-size:1em 1em;
  padding-left:1.5em;
  line-height:1em;
  margin-bottom:5px;
}

.tamanho1 {font-size:13px}
.tamanho2 {font-size:20px}
.tamanho3 {font-size:30px}
<div class="tamanho1 icon">Ícone ajustado</div>
<div class="tamanho2 icon">Ícone ajustado</div>
<div class="tamanho3 icon">Ícone ajustado</div>

Note que neste caso com uma definição, o ícone se ajusta para o tamanho da linha, acompanhando a fonte. Por usarmos em em suas medidas, quem determina o tamanho do ícone é a fonte.

Não é recomendável o uso em em para fontes

Na verdade, não “é recomendado utilizar a unidade “em” ao invés de “px” para fontes”. O fundamental é entender como funciona cada medida, para saber em que casos se aplica.

Tem casos em que o em é mais interessante, tem casos em que o px é mais interessante, e o mesmo para cada uma das medidas. Até o momento, aparentemente nenhuma delas é conflitante no sentido de deixar a outra obsoleta.

Se pensar em uma página com layou estático, uma vez definidas as medidas, elas só vão variar se houver alguma variação no cliente que for “renderizar” a página, mas sempre aparecerão da mesma forma no mesmo navegador, em princípio.

Se pensar numa página com layout dinâmico, que se adapta à largura da tela (superficialmente apelidado de “layout responsivo”, termo que por sinal, não tem um significado objetivo), e/ou onde o tamanho das fontes pode ser especificado diferentemente dependendo das quebras especificadas com @media ou JS, o uso de cada uma delas pode ter um efeito mais radical.

Neste caso, se você quer os espaços e medidas sempre “fixos” em relação às imagens e aos device-pixels, provavelmente vai usar px. Se quiser que os espaços acompanhem a ampliação ou redução da fonte em cada medida, vai usar em ou rem, e talvez % em certos contextos.

Estas não são regras, são exemplificações. Para saber a adequada para seu caso, precisa entender as diferenças:

O “em”:

em reflete a medida da fonte corrente em pixels. É melhor do que px? Não, na verdade é um complemento.

O que vale mesmo é saber qual usar no caso concreto. Estas unidades de medidas existem para serem usadas conforme são necessarias.

Um exemplo de uso:

.exemplo {
   font-size: 20px;
   border-radius: .5em;
   padding-bottom: 2em;
}

Neste caso, a curva da borda terá 10px, e o padding-bottom 40px.

Vantagem? Neste caso, basta mudar o tamanho da fonte, que o resto dos elementos vai acompanhar proporcionalmente.

Um outro exemplo:

.exemplo {
   font-size: 20px;
   line-height: 1.5em;
}

Assim, teremos espaçamento 1,5 entre linhas.

Nas versões mais velhas do IE só conseguíamos ampliar as fontes se elas fossem especificadas em ems ou com <font size=.

Veja um pouco mais sobre o em em tipografia na Wikipedia

O “rem”:

em tinha um problema intrínseco: quando você definia um tamanho de fonte em ems, a referência de tamanho era a do elemento superior, o que causava uma certa confusão, dependendo de como os elementos eram apresentados em relação aos outros.

Powered by Rock Convert

Para resolver o problema, à partir do CSS3 foi implementado o rem, muito similar ao em, mas que toma sempre por base o elemento raíz da página. Assim, a referência vai ser sempre a fonte do html, e não do elemento superior.

O “px”:

Pixel é a abreviação de Picture Element, e se refere aos pontinhos que compõe as imagens na tela, e é a origem da unidade px.

As imagens, pela própria natureza, têm suas medidas de largura e altura em px, e a área útil da tela e da página do browser também são medidas nativamente em px. Esta é a medida usual para especificar @media queries.

Usualmente os px do CSS correspondem aos pixels físicos do dispositivo, e esta ainda é a regra na maior parte dos casos.

No entanto, isso não é mais uma certeza absoluta: com as telas de alta definição, e o fato das decisões de mercado serem tomadas por Comitês, e não gente que realmente usa os padrões, em alguns casos o px pode não corresponder necessariamente ao pixel do dispositivo físico, como nos displays de alta densidade. Veja a questão a seguir:

A porcentagem (%):

A porcentagem, assim como o em, também é relativa, mas em unidades absolutas, proporcional ao elemento em si, e não à fonte diretamente.

Exemplos:

.exemplo {
   font-size: 20px;
   line-height: 150%;
}

Assim, teremos espaçamento 1,5 entre linhas, como no exemplo anterior, mas usando %. Notar que apesar de estarmos usando um elemento cujo tamanho aparentemente depende da fonte, a porcentagem é relativa ao tamanho natural do bloco, e não das letras em si (mas de qualquer forma, corresponde a UMA linha do bloco, no caso de blocos de texto).

H1 {
   width: 50%;
}

Um cabeçalho com metade do que seria a largura total.

Qual usar?

Depende da situação. Não tem um “melhor”, nem “certo e errado”. Depende da intenção desejada. Se você está usando @media para fazer layouts para vários dispositivos, e gosta de ter controle preciso sobre o resultado, não há problema nenhum em definir tudo em pixels, o que é uma técnica boa para que o resultado seja exatamente o que você espera.

Tem alguns elementos que vão ser usados em parágrafos com diferentes fontes, proporcionalmente? Use o em, pois você terá a certeza que o elemento vai ser proporcional ao texto.

Bootstrap 5 + VW e o projeto RFS

Atualmente no Bootstrap 4.3 já é possível usar uma fonte mais responsiva, pois ela utiliza uma fórmula que usa a largura da tela pera definir o tamanho da fonte do site. Na verdade ela deixa a fonte responsiva até 1200px que é o maior breacking point e a partir dai ela fixa o tamanho da fonte para ela não crescer mais.

Link do projeto RFS (responsive font size) https://github.com/twbs/rfs

@media (max-width: 1200px) {
  .title {
    font-size: calc(1.525rem + 3.3vw); /* repare na medida em vw */
  }
}

Our biggest new addition to Bootstrap in v4.3 is responsive font sizes, a new project in the Bootstrap GitHub org to automate calculate an appropriate font-size based on the dimensions of a visitor’s device or browser viewport.

Traduzindo: “Nossa maior nova adição ao Bootstrap na v4.3 são os tamanhos de fonte responsivos, um novo projeto na Bootstrap GitHub org para automatizar o cálculo de um tamanho de fonte apropriada com base nas dimensões do dispositivo de um visitante ou do viewport do navegador.”

Você pode conferir no gráfico para entender melhor.

Documentação oficial: https://getbootstrap.com/docs/4.1/content/typography/#responsive-typography

VOCÊ ESTÁ NA SEÇÃO:  Web

 

Powered by Rock Convert
Siga os bons!

Ramos de Souza Janones

Janones, é um empreendedor brasileiro apaixonado por empreendedorismo e tecnologia. Ao longo dos anos trabalhando com o desenvolvimento de softwares desktop desde a linguagem Clipper, passando pelo Delphi e atualmente com Java.

Optou pela formação de Publicidade e Marketing por sua segunda empresa de tecnologia ter participado do "boom" da internet nos anos 90 e na procura de melhorar seus conhecimentos em negócios.

Em razão da principal formação e profundos conhecimentos em programação e banco de dados, é capaz de realizar o desenvolvimento de aplicativos web, desktop e mobile com maior criatividade e inovação que profissionais de desenvolvimento com uma formação única e mais especifica, dedicada somente ao desenvolvimento de softwares.

Com toda sua experiência com empresas de software, sua formação e paixão por negócios escreveu o livro "Marketing para Empresas e Profissionais de Software", publicado pela editora carioca Ciência Moderna em 2012. Além de outros livros sobre programação.

Últimos posts por Ramos de Souza Janones (exibir todos)

Sumário
HTML e Bootstrap - O uso de de "rem", "en" e pixels "px".
Nome do artigo
HTML e Bootstrap - O uso de de "rem", "en" e pixels "px".
Descrição
Dica de quando e onde usar os termos "rem", "en" e pixels "px" em HTML, CSS e Bootstrap 5. Entenda da teoria a prática e aplique as melhores práticas.
Autor
Nome
Ramos da Informática
Logo

Frontend Do Zero Ao Profissional