Como utilizamos a regra de 8pt?

O que é?

A regra de 8pt é uma técnica que padroniza os espaçamentos e dimensões no design, criando layouts mais consistentes e organizados. Essa prática ajuda a alinhar elementos visuais e mantém uma hierarquia visual limpa e fácil de entender.

• Exemplo: Um botão pode ter 48px de altura e 16px de padding interno.

Lista dos valores possíveis

• 4px
• 8px
• 12px
• 16px
• 20px
• 24px
• 32px
• 48px
• 56px
• 64px
• 80px
• 96px
• 112px
• 128px
• 160px
• 256px
• 512px

Relação com o REM

O REM (Root Em) é uma unidade de medida relativa usada em CSS para definir tamanhos de fonte, espaçamentos, margens e outros elementos. Ele é baseado no tamanho da fonte raiz (root font-size) do documento HTML. Por padrão, muitos navegadores definem o tamanho da fonte raiz como 16px.

• Como o REM conecta-se à regra de 8pt?
  • Se o tamanho base for 16px, um REM equivale a 16px.
  • Usando a regra de 8pt, os múltiplos de 8 podem ser convertidos diretamente para REM. Por exemplo:
    • 8px = 0.5rem
    • 16px = 1rem
    • 24px = 1.5rem
    • 32px = 2rem