DesignKit

Configuración

Tamaño base

16px

Ratio

Custom:

Unidad de salida

Fuente (preview)

Texto de preview

Exportar

:root {
  --text-xs: 0.64rem;
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.56rem;
  --text-2xl: 1.95rem;
  --text-3xl: 2.44rem;
  --text-4xl: 3.05rem;
  --text-5xl: 3.82rem;
  --font-base: 16px;
  --font-family: Inter, sans-serif;
}

.text-xs {
  font-size: 0.64rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.text-sm {
  font-size: 0.8rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.text-lg {
  font-size: 1.25rem;
  line-height: 1.4;
  letter-spacing: 0em;
}

.text-xl {
  font-size: 1.56rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.text-2xl {
  font-size: 1.95rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.text-3xl {
  font-size: 2.44rem;
  line-height: 1.2;
  letter-spacing: -0.04em;
}

.text-4xl {
  font-size: 3.05rem;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.text-5xl {
  font-size: 3.82rem;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

Escala Tipográfica

ratio ×1.25 · base 16px

5xlThe quick brown fox jumps over the lazy dog3.82rem

4xlThe quick brown fox jumps over the lazy dog3.05rem

3xlThe quick brown fox jumps over the lazy dog2.44rem

2xlThe quick brown fox jumps over the lazy dog1.95rem

xlThe quick brown fox jumps over the lazy dog1.56rem

lgThe quick brown fox jumps over the lazy dog1.25rem

baseThe quick brown fox jumps over the lazy dog1rem

smThe quick brown fox jumps over the lazy dog0.8rem

xsThe quick brown fox jumps over the lazy dog0.64rem

Step	px	rem	Line-h	Tracking
5xl	61.04	3.82rem	1.1	-0.04em
4xl	48.83	3.05rem	1.1	-0.04em
3xl	39.06	2.44rem	1.2	-0.04em
2xl	31.25	1.95rem	1.3	-0.02em
xl	25	1.56rem	1.3	-0.02em
lg	20	1.25rem	1.4	0em
basebase	16	1rem	1.5	0.01em
sm	12.8	0.8rem	1.6	0.01em
xs	10.24	0.64rem	1.6	0.04em