Escala tipográfica interativa
Visualize uma escala de tipografia modular com tamanho de base ajustável, proporção, fonte e altura da linha. Exportação CSS Tamanhos para texto corporal e seis níveis de cabeçalho.
Tipografia CSS
:root {
--type-font: "Inter", sans-serif;
--type-line-height: 1.5;
--type-small: 12.8px;
--type-body: 16px;
--type-h6: 20px;
--type-h5: 25px;
--type-h4: 31.25px;
--type-h3: 39.06px;
--type-h2: 48.83px;
--type-h1: 61.04px;
}
body { font-family: var(--type-font); font-size: var(--type-body); line-height: var(--type-line-height); }
h1 { font-size: var(--type-h1); line-height: 1.15; }
h2 { font-size: var(--type-h2); line-height: 1.15; }
h3 { font-size: var(--type-h3); line-height: 1.15; }
h4 { font-size: var(--type-h4); line-height: 1.15; }
h5 { font-size: var(--type-h5); line-height: 1.15; }
h6 { font-size: var(--type-h6); line-height: 1.15; }O texto exportado permanece em inglês; seus dados são mantidos como foram digitados.
Sem registro. Nenhum crédito de IA. Esta ferramenta monta sua saída no seu navegador.
De uma ideia para algo útil.
- 01
Escolha uma fonte, tamanho base e proporção modular.
- 02
Inspecione o tamanho do cabeçalho e espaçamento de parágrafos.
- 03
Baixe CSS Variáveis para a escala atual.
Um pouco de contexto.
Uma escala modular multiplica um tamanho de fonte base por uma proporção repetida. Este parque de diversões calcula uma hierarquia de seis níveis mais corpo e texto pequeno. Tamanhos são valores explícitos de pixels para um ponto de partida, rever comportamento responsivo e zoom antes de usá-los na produção.
Boas perguntas.
Será que o CSS Carregar a fonte selecionada?
Não. Nomeia a fonte e fornece famílias secundárias. Carregar ou se auto-apresentar a fonte escolhida em sua aplicação.
Esses tamanhos são responsivos?
A exportação contém tamanhos fixos. Adapte-os aos seus pontos de interrupção ou sistema de tipo fluido após testar o conteúdo real.