Guia de escala de tipografia
Uma escala tipográfica é um conjunto de tamanhos de fonte que seguem uma proporção matemática consistente. Em vez de escolher tamanhos aleatoriamente, cada etapa é multiplicada pela mesma proporção – criando ritmo visual e hierarquia entre títulos, corpo de texto e legendas.
Escolha um tamanho base (16px é o padrão do navegador e um ponto de partida sólido) e, em seguida, escolha uma proporção. Proporções menores, como 1,125, criam escalas sutis e elegantes para sites editoriais; proporções maiores, como 1,618, criam um contraste dramático para as páginas de marketing.
Pro Tips
- A proporção áurea (1,618) é bonita para títulos de exibição, mas muito agressiva para sites com muito corpo. Para leitura longa, fique entre 1,125 e 1,333.
- Exporte a escala como propriedades personalizadas CSS e referencie-as em qualquer lugar: font-size: var(--font-lg). Alterar a escala posteriormente significa editar um arquivo.
Frequently Asked Questions
Q: O que é uma escala modular?
O que é uma escala modular? Uma escala modular é uma série de tamanhos derivados de um tamanho base multiplicado repetidamente por uma proporção fixa – a mesma matemática por trás das escalas musicais.
Q: Qual proporção devo escolher?
Qual proporção devo escolher? Comece com 1.333 (quarto perfeito) para uso geral na web. Use 1.2 para interfaces densas, 1.5 para sites de marketing ousados e 1.618 para designs editoriais dramáticos.
Q: Por que 16px é o tamanho base padrão?
Por que 16px é o tamanho base padrão? 16px é o tamanho de fonte raiz padrão em todos os navegadores. Basear sua escala nisso garante consistência quando os usuários alteram o zoom do navegador ou as configurações de acessibilidade.
Q: Devo usar rem em vez de px?
Devo usar rem em vez de px? Sim. Defina a escala em px, mas aplique com rem para acessibilidade: 1rem é igual ao tamanho da fonte raiz, portanto, os tamanhos baseados em rem são dimensionados de acordo com as preferências do usuário.
Q: De quantas etapas uma balança precisa?
De quantas etapas uma balança precisa? 6 a 8 etapas atendem à maioria das necessidades: legenda, pequeno, corpo, intervalo h4-h1 e tamanho de exibição. Mais etapas adicionam manutenção sem muitos benefícios.
Cores do Brasil
Do verde da bandeira ao azul dos azulejos, as cores brasileiras misturam natureza tropical, herança portuguesa e a energia do carnaval. Uma paleta viva que reflete a identidade visual do país.
Verde Bandeira #009C3BO verde da bandeira nacional, símbolo das matas
Amarelo Bandeira #FFDF00O ouro do losango da bandeira brasileira
Azul Bandeira #002776O azul do círculo e das estrelas
Azul Azulejo #1E5FA8Herança dos azulejos portugueses em igrejas e casarões
Rosa Choque #FF1493A energia vibrante do carnaval e das marcas jovens
Verde Amazônia #228B22A floresta tropical, pulmão do planeta
Amarelo Ouro #FFD700O ouro do barroco mineiro de Ouro Preto
Terracota Nordestina #CD5C5CA argila do sertão e do artesanato nordestino
Anil #4B0082Cor do vestido tradicional das baianas
Branco Areia #EDE4D3As praias de areia clara do litoral
Q: Qual é o verde da bandeira do Brasil?
Qual é o verde da bandeira do Brasil? O verde oficial da bandeira brasileira é aproximadamente #009C3B, junto com o amarelo #FFDF00 e o azul #002776.
Q: O que é o azul azulejo?
O que é o azul azulejo? É o azul característico dos azulejos portugueses (aproximadamente #1E5FA8), herança colonial presente na arquitetura de igrejas, casarões e cidades históricas brasileiras.