# Tipography (escala y composición)

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/tipography.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Contenidos · Tipografía

Construye jerarquías legibles mediante tamaños, pesos, interlineados y espaciados que comparten los tokens tipográficos de QuicklyCSS.

v2.0

Aa

## Escala de 11 a 100px
Incluye textos pequeños, cuerpo, títulos y displays dentro de una progresión común.

900

## Nueve pesos
Recorre el estándar tipográfico desde thin 100 hasta black 900.

↕

## Ritmo configurable
Controla interlineado, tracking y espacio entre palabras con escalas semánticas.

i

## Composición independiente
Combina una clase de tamaño como `.font-size-4` con peso, interlineado o tracking según las necesidades del contenido.

✦

## Responsive y fluida
La escala ofrece variantes por breakpoint con `.font-size-{breakpoint}-{nivel}` y seis tamaños fluidos basados en `clamp()`.

Código + resultado

## Ejemplos reales de tipografía

Selecciona una utilidad para comparar el marcado y su efecto tipográfico real.

HTML

Resultado aplicado  24px

Componente real

.font-size-4 aplica 24px y su line-height asociado de 1.4.

```html
<p class="font-size-4">Texto de veinticuatro píxeles</p>
```

.font-bold aplica el peso tipográfico 700.

```html
<p class="font-bold">Texto con peso bold</p>
```

.leading-loose aplica un line-height unitless de 2.

```html
<p class="leading-loose">El interlineado amplio mejora la separación cuando un texto ocupa varias líneas dentro de un bloque.</p>
```

.tracking-widest aplica letter-spacing: 0.1em y escala con el tamaño del texto.

```html
<p class="tracking-widest">Letras con tracking amplio</p>
```

.word-wider aplica word-spacing: 0.1em.

```html
<p class="word-wider">Palabras con separación ampliada</p>
```

.italic aplica font-style: italic sin modificar el peso o el tamaño.

```html
<p class="italic">Texto en estilo cursivo</p>
```

.font-size-fluid-1 utiliza clamp() para escalar aproximadamente entre 24 y 48px.

```html
<p class="font-size-fluid-1">Título fluido</p>
```

Vista general

## Escala tipográfica

Escala fija completa. Cada clase también establece el interlineado asociado a su tamaño.

Aa
`.font-size-01 · 11px`

Aa
`.font-size-1 · 16px`

Aa
`.font-size-2 · 18px`

Aa
`.font-size-3 · 20px`

Aa
`.font-size-4 · 24px`

Aa
`.font-size-5 · 30px`

Aa
`.font-size-6 · 36px`

Aa
`.font-size-7 · 48px`

Aa
`.font-size-8 · 60px`

Aa
`.font-size-9 · 72px`

Aa
`.font-size-10 · 80px`

Aa
`.font-size-11 · 88px`

Aa
`.font-size-12 · 96px`

Aa
`.font-size-13 · 100px`

Referencia

## Clases tipográficas

Los grupos siguientes corresponden a utilidades existentes y pueden combinarse sobre el mismo elemento.

| Clases | Escala | Propiedad | Uso recomendado |
| --- | --- | --- | --- |
| .font-size-01 | 11px · 1.4 | Font size + line height | Tamaño compacto mínimo para texto auxiliar e iconos. |
| .font-size-1 | 16px · 1.5 | Font size + line height | Cuerpo de texto principal. |
| .font-size-2 | 18px · 1.48 | Font size + line height | Entradillas y cuerpo destacado. |
| .font-size-3 | 20px · 1.45 | Font size + line height | Subtítulos y destacados breves. |
| .font-size-4 | 24px · 1.4 | Font size + line height | Títulos de sección compactos. |
| .font-size-5 | 30px · 1.35 | Font size + line height | Encabezados secundarios. |
| .font-size-6 | 36px · 1.3 | Font size + line height | Encabezados principales. |
| .font-size-7 | 48px · 1.25 | Font size + line height | Títulos destacados. |
| .font-size-8 | 60px · 1.2 | Font size + line height | Display de página. |
| .font-size-9 | 72px · 1.16 | Font size + line height | Hero de alta jerarquía. |
| .font-size-10 | 80px · 1.12 | Font size + line height | Display amplio. |
| .font-size-11 | 88px · 1.08 | Font size + line height | Titular promocional de gran formato. |
| .font-size-12 | 96px · 1.05 | Font size + line height | Display de impacto. |
| .font-size-13 | 100px · 1.02 | Font size + line height | Máximo nivel de la escala fija. |
| .font-size-fluid-1 | 24px → 48px | clamp() | Título fluido moderado. |
| .font-size-fluid-2 | 32px → 64px | clamp() | Encabezado fluido de sección. |
| .font-size-fluid-3 | 40px → 80px | clamp() | Titular principal adaptable. |
| .font-size-fluid-4 | 48px → 96px | clamp() | Hero amplio adaptable. |
| .font-size-fluid-5 | 56px → 112px | clamp() | Display promocional adaptable. |
| .font-size-fluid-6 | 64px → 128px | clamp() | Máximo display fluido. |
| .font-size-640-{nivel} | ≥640px | Font size responsive | Ajuste desde pantallas pequeñas horizontales. |
| .font-size-768-{nivel} | ≥768px | Font size responsive | Ajuste desde tablet. |
| .font-size-1024-{nivel} | ≥1024px | Font size responsive | Ajuste desde escritorio pequeño. |
| .font-size-1280-{nivel} | ≥1280px | Font size responsive | Ajuste desde escritorio estándar. |
| .font-size-1536-{nivel} | ≥1536px | Font size responsive | Ajuste para escritorio amplio. |
| .font-size-1920-{nivel} | ≥1920px | Font size responsive | Ajuste para pantallas Full HD. |
| .font-size-2560-{nivel} | ≥2560px | Font size responsive | Ajuste para pantallas QHD. |
| .font-size-3840-{nivel} | ≥3840px | Font size responsive | Ajuste para pantallas 4K. |
| .font-size-6016-{nivel} | ≥6016px | Font size responsive | Ajuste para formatos de muy alta resolución. |
| .font-thin | 100 | Font weight | Titulares decorativos muy ligeros. |
| .font-extralight | 200 | Font weight | Jerarquía ligera de gran tamaño. |
| .font-light | 300 | Font weight | Texto editorial ligero. |
| .font-regular | 400 | Font weight | Cuerpo y encabezados regulares. |
| .font-medium | 500 | Font weight | Énfasis moderado y controles. |
| .font-semibold | 600 | Font weight | Subtítulos y énfasis claro. |
| .font-bold | 700 | Font weight | Títulos y acciones destacadas. |
| .font-extrabold | 800 | Font weight | Titulares de alto impacto. |
| .font-black | 900 | Font weight | Máximo contraste tipográfico. |
| .leading-none | 1 | Line height | Displays de una línea. |
| .leading-tight | 1.25 | Line height | Títulos grandes de varias líneas. |
| .leading-snug | 1.375 | Line height | Subtítulos compactos. |
| .leading-normal | 1.5 | Line height | Texto de lectura general. |
| .leading-relaxed | 1.625 | Line height | Párrafos de lectura prolongada. |
| .leading-loose | 2 | Line height | Bloques con máxima separación vertical. |
| .tracking-tighter | -0.05em | Letter spacing | Titulares grandes muy compactos. |
| .tracking-tight | -0.025em | Letter spacing | Títulos sutilmente compactos. |
| .tracking-normal | 0 | Letter spacing | Espaciado original de la fuente. |
| .tracking-wide | 0.025em | Letter spacing | Etiquetas con apertura ligera. |
| .tracking-wider | 0.05em | Letter spacing | Eyebrows y texto en mayúsculas. |
| .tracking-widest | 0.1em | Letter spacing | Máxima separación entre caracteres. |
| .word-tighter | -0.05em | Word spacing | Compactar frases cortas. |
| .word-tight | -0.025em | Word spacing | Reducir sutilmente el ritmo horizontal. |
| .word-normal | 0 | Word spacing | Espaciado original entre palabras. |
| .word-wide | 0.05em | Word spacing | Aumentar ligeramente la separación. |
| .word-wider | 0.1em | Word spacing | Texto breve con ritmo abierto. |
| .word-widest | 0.2em | Word spacing | Máxima separación entre palabras. |
| .italic | Italic | Font style | Énfasis editorial o citas. |
| .not-italic | Normal | Font style | Restablecer el estilo regular. |
| .uppercase | Uppercase | Text transform | Etiquetas y encabezados breves. |
| .lowercase | Lowercase | Text transform | Normalizar visualmente texto en mayúsculas. |
| .capitalize | Capitalize | Text transform | Inicial en mayúscula para cada palabra. |
| .normal-case | None | Text transform | Restablecer la escritura original. |
| .underline | Underline | Text decoration | Enlaces o énfasis subrayado. |
| .line-through | Line-through | Text decoration | Contenido eliminado o precio anterior. |
| .no-underline | None | Text decoration | Eliminar una decoración heredada. |
| .text-left | Left | Text align | Lectura natural en idiomas de izquierda a derecha. |
| .text-center | Center | Text align | Títulos cortos, mensajes vacíos y llamadas visuales. |
| .text-right | Right | Text align | Valores numéricos o contenido asociado al borde derecho. |
| .text-justify | Justify | Text align | Bloques editoriales anchos cuando el espaciado resultante sea legible. |

Breakpoints reales  640, 768, 1024, 1280, 1536, 1920, 2560, 3840 y 6016 para la escala de tamaños.

Recomendaciones

## Buenas prácticas tipográficas

01
### Jerarquía limitada
Define pocos niveles por vista para que títulos, cuerpo y metadatos sean reconocibles.

02
### Interlineado legible
Usa leading más amplio en párrafos y valores compactos sólo en títulos grandes.

03
### Pesos disponibles
Comprueba que la fuente cargada incluya el peso solicitado para evitar síntesis visual.

04
### Fluidez con intención
Reserva los tamaños fluidos para encabezados que realmente deban responder al viewport.