Qual unidade usar, PX, EM, REM? E como usar?

[Cleysonlb]

Tenho visto muitas discussões legais de vários níveis aqui no forum, então resolvi levantar mais este ponto! Qual unidade usar, PX, EM, REM? E como usar?

[neysimoes]

Só tenho usado rem, mas eu uso mixin do stylus.

ks-no-conflict = false

ks-rem-base = 16px

ks-rem( values )
    base = ks-rem-base is a "unit" ? ks-rem-base : 16
    result = null
    for value in values
        if type( value ) == "unit" && ( unit( value ) == "px" || unit( value ) == "" )
                value = unit( round( value / base, 3 ), "rem" )
                if value == "0rem" { value = 0 }
        result = result != null ? result value : value
    result

rem = ks-rem unless ks-no-conflict 

Exemplo:

font-size rem(18px)

[felipefialho]

Para tipografia, agora mais do que nunca estou utilizando REM, com fallback para PX para navegadores antigos.

Porém normalmente continuo usando PX para setar margins e outras configurações (prefiro unidade absoluta para ter mais controle).

O mixin é o seguinte (stylus).

//
// 1. Set PX to REM () 
// HTML font-size: 62.5% or 10px;
// -----------------------------------

pxtorem($prop, $value)
  {$prop} unit($value, px)
  {$prop} unit(($value * 0.1), rem)

Para utilizar a tipografia responsiva do Rucksack (que você também pode criar manualmente utilizando o calc()), faço o seguinte esquema.

html  
  font-size 62.5%
  font-size responsive 7px 10px

Ou seja, forneço um fallback de 62.5% e utilizo o range de 7px a 10px.

Por que esse range?

Porque utilizando máximo de 10px mantém o REM com a mesma proporção do PX e o minimo de 7px é o tamanho minimo em que a fonte vai ficar em dispositivos menores.

---

Atualização abril/2018

Atualmente uso REM para tipografia / margins / paddings, e não dou mais fallbacks para navegadores antigos.

[karlprieb]

Tipografia e margins/paddings: REM :)
Containers, imagens ou conteúdo de tamanho fixo: PX

[matheuslc]

Eu utilizo REM para tipografia e px para margins e paddings.

No caso do REM, utilizo assim:

html {
font-size: 10px;
}

body {
font-size: 1.6rem;
}

O motivo de utilizar px para padding e margins é porque como se trata de uma estrutura fixa, eu prefiro ter o controle absoluto deles.

[bernardodiasc]

Tem uma parada muito legal que da pra fazer combinando as 3 unidades de tipografia que eh um lance de harmonização na responsividade. Li sobre isso aqui https://css-tricks.com/rems-ems/ e fiz muitos experimentos, eh realmente legal, se usar sagazmente da pra fazer muitas mudança responsiva apenas alterando o tamanho da fonte raiz, no body com PX e a raiz de cada módulo com REM. Só lamento aqui não ter pego projeto onde o designer manja de front pra poder usar isso, pois sempre me pediam o disgramado "pixel perfect", que eh uma ilusão hoje em dia, mas mesmo assim pedem.

Nos projetos pixel perfect acabo optando por PX mesmo na maioria das coisas. REM principalmente pra tipografia, pra tentar sempre relativizar com o que ta sendo usado na raiz em cada breakpoint.

[felipefialho]

@bernardodiasc Para sistemas ou projetos com componentes muito bem definidos, essa abordagem é muito foda!

Mas tem que ser usada com cautela ou vai tudo por água abaixo :p

[ghost]

@bernardodiasc que artigo maneiro, eu
vou estudar implementar algo assim no próximo projeto!

Atualmente estou usando rem para fontes e px para margin, padding, divs...

também já testei vh, vw, vmin... porém nada concreto em projetos, alguém
mais tem usado?

[bernardodiasc]

@lfeh exatamente, se for soh pra tipografia eh ate tranquilo, mas pode complicar mesmo se usar unidades relativas em outras propriedades de layout. Pra funcionar legal o projeto tem que ser feito com o método como regra, pois o efeito laça muitas partes do html. O projeto teria que ser organizado em modulos/componentes e todos os devs afiados no lance.

Tem algo legal que da pra fazer, por exemplo, em um componente que eh excessão voce pode incluir un font-size absoluto (com variações responsivas) na raiz do proprio componente, os textos interiores usando em então não seriam afetados pelas regras globais. Nesse caso vc tem um componente que escala independente do resto.

A pegadinha mais chata é o próprio em, o html tem que ser bem montado para que todos os elementos com font-size da unidade em em sejam filhos diretos da raiz do componente, ou pelo menos que os elementos intermediários não possuam definição de font-size, pois em dentro de em vai zuando, geralmente ninguem quer isso, acho inclusive que a origem do rem foi meio pra sanar esse problema (só acho mesmo). Eh, basicamente tem que ficar atento no que ta fazendo, se nao zoa, framework css nem pensar por exemplo.

[felipefialho]

Justamente @bernardodiasc, a ideia do REM foi para usar a base no root e não mais no pai. Assim a gente pode ter fontes relativas sem perder a sanidade :)

[ribeiroevandro]

Eu tenho usado REM e no stylus tenho essa função abaixo que me ajuda nisso, eu gero a fonte em PX e REM e deixo o navegador escolher qual usar... Se não tiver suporte ao REM ele pega o PX e boa... Da pra passar até o line-height como parâmetro também... E para usar basta chamar set-font-size(16px) por exemplo.

set-font-size(value, lineHeight = '') {
    font-size: value; /* add PX (or original value) as backup */

    if (value is inherit) {
    /* do nothing, "inherit" has no unit */
    } else {
        font-size: remify(value);

        if (lineHeight is '') {
            /* do nothing, "inherit" has no unit */
        } else {
            line-height: remify(lineHeight);
        }
    }
}
remify(value) { /* separate mixin, so it can be used elsewhere */
    u = unit(value);

    if (u is 'px') {
        return unit(value/16, 'rem');
    } else {
        return unit(value, u);
    }
}

[bernardodiasc]

Um dos melhores artigos que li sobre em e rem http://zellwk.com/blog/rem-vs-em/, recomendo a leitura.

TLDR: cada unidade tem sua utilidade e da pra usar todas em conjunto.

[dougaraujos]

Eu utilizei em alguns projetos a harmonização citada pelo @bernardodiasc. Porém, precisa ser muito cauteloso para não cair na necessidade de criar várias regras de responsividade.
Hoje uso REM para quase todas as propriedades, com excessão de tamanhos fixos.

Uma dos impasses que vivencio nos projetos que usam frameworks (Foundation p.ex) é que classes utilizadas pra grid ("columns") setam padding com unidades relativas (EM). Quando você altera o font-size do elemento que contém a classe "columns" o mesmo fica desalinhado. Tenho para mim que esse é um problema de arquitetura do framework, ou existe algum benefício nessa técnica?

[tarciozemel]

Procuro usar rem para tudo, com exceção do que precisa ser escalado conforme os ancestrais, tal como indica o artigo "Comprehensive Guide: When to Use Em vs. Rem":

[...] the primary purpose of em units should be to allow for scalability within the context of a specific design element.

No Foundation tem a função Sass rem-calc() que ajuda muito e pode ser facilmente portada para outros projetos/frameworks/pré-processadores.

PS: @dougaraujos os próprios Foundation e Bootstrap estão passando os grids para Flexbox, então não se preocupe com isso -- no caso do Foundation, mesmo quando se usa o grid "comum", as medidas de gutters são em rem.

[dougaraujos]

@tarciozemel
Então, todos as versões que usei, os gutters estavam em em.
Agora, esse upgrade é excelente! Entretanto, levantei a questão porque no mundo real há necessidade de manter códigos ainda legados em arquiteturas que exigem refatorações não viáveis para algumas situações. Sem contar a postura dos negócios no que se diz respeito a retrocompatibilidade 👎

[tarciozemel]

@dougaraujos

Não entendi... (i) Todos aqui desenvolvem para "o mundo real" e a conversa é sobre isso mesmo e; (ii) se se trata de "manter códigos ainda legados em arquiteturas que exigem refatorações não viáveis para algumas situações", nem adianta pensar no rem, de qualquer maneira.

Agora, extrapolando a parte técnica um pouco, cabe a cada um saber mostrar ao cliente as vantagens de investir em tecnologias de ponta.

[felipefialho]

@dougaraujos

Não acho isso um problema, um fallback para px é extremamente simples e segue perfeitamente a lógica do progressive enhancement (ou graceful degradation).

Não afetaria o negócio do cliente de qualquer forma.

[dougaraujos]

@tarciozemel @lfeh

Acho que me expressei muito mal. A primeira pergunta que eu fiz foi simplesmente em relação aos frameworks que usam gutters com unidades relativas, se vocês viam alguma vantagem nisso.

O outro comentário foi apenas em relação ao argumento de que os frameworks estão migrando para novas técnicas. Porém não há viabilidade em fazê-la sempre em todos os cases.

A implementação de outras soluções é extremamente simples mesmo, não há dificuldades. Perguntei para obter um direcionamento: se a solução do framework é vantajosa, tem algo errado na minha implementação, se não, há necessidade de usar outras soluções (as quais vocês já citaram)

De qualquer forma, obrigado pelo respaldo.

[felipefialho]

Colocando um pouco de tempero:

• Use rem for Global Sizing; Use em for Local Sizing