Contenidos · Tipografía
Tipography (escala y composición)
Construye jerarquías legibles mediante tamaños, pesos, interlineados y espaciados que comparten los tokens tipográficos de QuicklyCSS.
v2.0
Escala de 11 a 100px
Incluye textos pequeños, cuerpo, títulos y displays dentro de una progresión común.
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.
Código + resultado
Ejemplos reales de tipografía
Selecciona una utilidad para comparar el marcado y su efecto tipográfico real.
Componente real
<p class="font-size-4">Texto de veinticuatro píxeles</p>
<p class="font-bold">Texto con peso bold</p>
<p class="leading-loose">El interlineado amplio mejora la separación cuando un texto ocupa varias líneas dentro de un bloque.</p>
<p class="tracking-widest">Letras con tracking amplio</p>
<p class="word-wider">Palabras con separación ampliada</p>
<p class="italic">Texto en estilo cursivo</p>
<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.
.font-size-01 · 11px
.font-size-1 · 16px
.font-size-2 · 18px
.font-size-3 · 20px
.font-size-4 · 24px
.font-size-5 · 30px
.font-size-6 · 36px
.font-size-7 · 48px
.font-size-8 · 60px
.font-size-9 · 72px
.font-size-10 · 80px
.font-size-11 · 88px
.font-size-12 · 96px
.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 reales640, 768, 1024, 1280, 1536, 1920, 2560, 3840 y 6016 para la escala de tamaños.
Recomendaciones
Buenas prácticas tipográficas
Jerarquía limitada
Define pocos niveles por vista para que títulos, cuerpo y metadatos sean reconocibles.
Interlineado legible
Usa leading más amplio en párrafos y valores compactos sólo en títulos grandes.
Pesos disponibles
Comprueba que la fuente cargada incluya el peso solicitado para evitar síntesis visual.
Fluidez con intención
Reserva los tamaños fluidos para encabezados que realmente deban responder al viewport.