typestar

Una escala tipográfica en CSS

Elige una razón, genera los pasos y deja de escoger tamaños de fuente a ojo.

:root {
  --ratio: 1.25;
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: calc(var(--step-0) * var(--ratio));
  --step-2: calc(var(--step-1) * var(--ratio));
  --step-3: calc(var(--step-2) * var(--ratio));
}

body { font-size: var(--step-0); line-height: 1.6; }
h3 { font-size: var(--step-1); line-height: 1.4; }
h2 { font-size: var(--step-2); line-height: 1.3; }

h1 {
  font-size: var(--step-3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

Cómo funciona

  1. Cada paso es el de abajo multiplicado por la razón.
  2. clamp() vuelve fluido un paso entre un piso y un techo.
  3. La altura de línea debe bajar cuando el tamaño sube: los títulos quedan compactos.

Palabras clave y builtins usados aquí

El intento, en números

Líneas
18
Caracteres a escribir
467
Tokens
142
Ritmo de tres estrellas
85 tpm

Al ritmo de tres estrellas de 85 tokens por minuto, este intento toma unos 100 segundos.

Escribe este fragmento

Paso 3 de 3 en Fundamentos; paso 3 de 9 en Organizar el CSS.

← Anterior Siguiente →