.png)
Rem
O padrão de medidas utilizado no Webflow são as unidades em px (pixels). Se digitamos “10” em qualquer input no modo Designer e pressionamos “Enter”, o valor será setado como “10px”.
Já o Client-First utiliza as medidas de rem, que podemos escolher no dropdown de medidas quando clicado.
O que é rem?
Rem significa "root em".
- Rem é uma unidade de medida relativa baseada no elemento de font-size raíz.
- O elemento raíz é o html.
- Rem é relativo ao tamanho de fonte do html.
- A maioria dos tamanhos aplicados no Client-First utilizam rem.
Herdando o tamanho de fonte do browser (navegador)
No Client-First, herdamos o html font-size de nosso browser.
Browsers usam inicialmente o tamanho de 16px padrão para seu html font-size.
Logo, a conversão de 1rem = 16px é a padrão dos browsers.
Baseado nos tamanhos aprovados no Client-First, podemos fazer conversões rápidas de px para rem. Por exemplo, os tamanhos de rem aprovados no Client-First são 0.5, 1, 1.5, 2, 2.5, 3, em diante.
A unidade de medida rem e o Client-First são uma dupla poderosa que nos possibilitam seguir as melhores práticas de acessibilidade com o tamanho de fonte do browser.
A matemática
Cada 16px equivalem a 1rem quando o tamanho de font-size do browser está configurado como “Padrão” ou “default” em suas configurações.
Quando construímos nosso projeto de Webflow, sempre utilizamos 16px como nossa base para calcular 1 rem.
Toda conversão de medida rem é um múltiplo de 16.
Para converter valores px para rem, divida por 16.
64px / 16px = 4rem
Para converter valores rem para px, multiplique por 16.
2rem x 16px = 32px
Por questões de conveniência, sugerimos utilizar valores numéricos mais facilmente legíveis e arredondados, como 1, 2, 2.5, 3, 4, 5.
Queremos evitar o uso constante de valores numéricos decimais longos, como por exemplo 8.4375rem. Estes valores são mais difíceis de serem lembrados, e podem acabar atrasando nosso fluxo de trabalho ou gerando confusões.
Cálculos dentro do modo Designer no Webflow
Dentro da maioria dos inputs do modo Designer no Webflow, podemos calcular rem de forma nativa.
Dentro de um destes inputs, experimente digitar "100/16rem" e na sequência pressionar "Enter", e você verá que o valor foi calculado automaticamente, como em uma calculadora.
Podemos dividir qualquer número em pixels por 16 para pegar o seu tamanho em rem, dentro do modo Designer.
Benefícios de acessibilidade
Configurações do tamanho da fonte no browser
Browsers utilizam 16px como seu tamanho de fonte html — e permitem que o usuário ajuste este tamanho de acordo com sua preferência pessoal. Por exemplo, uma pessoa que utiliza óculos pode ajustar o tamanho fonte para ficar maior em seu browser para facilitar a leitura quando navegando em sites na internet (ou vice-versa).
O tamanho da fonte no browser é um tópico de acessibilidade importante. Quando usuários ajustam o tamanho da fonte em seus browsers, o conteúdo de um site deve se ajustar junto com as mudanças feitas. O sitema do Client-First, ao utilizar rem em suas medidas, adapta o tamanho dos elementos de um site, assim como seus espaçamentos e distâncias de acordo com as preferências de tamanho da fonte do usuário.
Quando trabalhamos em outras unidades de medida como px e vw, ignoramos as preferências de tamanho de fonte do browser do usuário.
Zoom do browser
Rem também respeita os controles e níveis de zoom ajustados por um usuário em seu browser. Quando o usuário aumenta ou diminui o zoom do seu browser em uma página, nosso layout e conteúdo em rem vai se ajustar junto com os níveis de zoom.
Quando utilizamos unidades como vw ou vh no Webflow, o zoom simplesmente não funciona.
O vw depende da largura horizontal da janela do browser (ou altura, no caso de vh). Uma pequena mudança no tamanho da janela, neste caso, afetará a medida destas unidades.
O Client-First segue as melhores práticas de acessibilidade. A decisão de trabalhar com rem é diretamente relacionada com os benefícios de acessibilidade e experiência do usuário.
Aprenda mais sobre acessibilidade utilizando rem no nosso artigo em que comparamos as metodologias Wizardry e Client-First (atualmente somente disponível em inglês). Esta é uma visão geral técnica dos benefícios de rem como uma unidade de medida compatível com acessibilidade.
O Client-First sugere que trabalhemos com estes valores.
Há 3 exceções quando usando os valores acima.
1. Tipografia
Utilizando 14px como tamanho da fonte é comum e recomendado em casos em que a fonte de 16px é muito grande. Um tamanho de fonte de 12px geralmente pode ser considerado muito pequeno para o texto do corpo de uma página.
14px = 0.875rem
2. Espaçamento de 2px
Utilize 2px para espaçamentos minúsculos. Se um valor de espaçamento menor que 4px é requerido, utilize 2px.
2px = 0.125rem
3. 1px é 1px
Quando utilizar 1px, por exemplo em uma propriedade border (borda) no CSS, utilize 1px como valor.
Não recomendamos converter valores de 1px para rem.
Dispositivos Retina, como os Macs, possuem regras de ampliação diferentes do que dispositivos que não possuem Retina. Utilizar 1px criará uma linha de exatamente 1px em qualquer dispositivo que não possua interferência de redimensionamento retina.
1px = 1px
A ferramenta de conversão de px para rem na extensão da Finsweet
A Extensão da Finsweet oferece uma ferramenta para converter projetos criados em px para rem.
Ela converterá qualquer valor de um projeto de px para seu valor referente em rem.
No painel do Client-First dentro da extensão da Finsweet, a função "PX to REM Migrator" (Migração de PX para REM) possibilitará a migração das unidades.