Framework Documentation

Typography

Type Scale Semantics

Typography define la escala, la jerarquía y el comportamiento semántico del sistema tipográfico del framework.

Overview

Qué resuelve typography

El archivo typography.css organiza la base tipográfica del sistema: familia principal, escala de tamaños, line-height y clases semánticas como .title, .subtitle y .meta.

Su función no es decorar texto ni resolver colores o alignment puntuales. Su responsabilidad es estructurar la jerarquía tipográfica general del framework.

Source File

Estructura del archivo

/* ================================
   TYPOGRAPHY
   Sistema tipográfico estructural
   ================================ */

:root {
  --font-base: "Poppins", system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;

  --line-tight: 1.2;
  --line-normal: 1.5;
  --line-loose: 1.8;
}

body {
  font-family: var(--font-base);
  font-size: var(--text-md);
  line-height: var(--line-normal);
}

.text-xs  { font-size: var(--text-xs); }
.text-sm  { font-size: var(--text-sm); }
.text-md  { font-size: var(--text-md); }
.text-lg  { font-size: var(--text-lg); }
.text-xl  { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }

.leading-tight  { line-height: var(--line-tight); }
.leading-normal { line-height: var(--line-normal); }
.leading-loose  { line-height: var(--line-loose); }

.title {
  font-weight: 700;
  line-height: var(--line-tight);
  font-size: var(--text-xl);
}

.subtitle {
  font-weight: 500;
  line-height: var(--line-normal);
  font-size: var(--text-md);
}

.meta {
  font-size: var(--text-sm);
  font-weight: 500;
  opacity: 0.7;
}

Scale

Escala tipográfica

Text XS

0.75rem · Texto extra pequeño

Text SM

0.875rem · Texto pequeño

Text MD

1rem · Texto base

Text LG

1.25rem · Texto amplio

Text XL

1.5rem · Escala de título base

Text 2XL

2rem · Escala de título mayor

Text 3XL

2.5rem · Escala de hero

Line Height

Ritmo vertical del texto

Leading Tight

Esta variante se usa para titulares y elementos que necesitan una lectura más compacta.

Leading Normal

Esta es la base general para textos de lectura estándar dentro del sistema.

Leading Loose

Esta variante se reserva para bloques más abiertos o composiciones con aire adicional.

Semantics

Clases semánticas principales

Title

Título del sistema

.title define la jerarquía principal del framework para encabezados y bloques destacados.

Subtitle

Subtítulo o texto de apoyo semántico.

.subtitle funciona como segundo nivel tipográfico dentro del sistema.

Meta

Label / Metadata

.meta se usa para etiquetas, metadatos, encabezados pequeños y contexto visual.

Guidelines

Qué sí y qué no va en typography

Qué sí debe contener

  • Familia tipográfica base.
  • Escala de tamaños.
  • Line-height.
  • Jerarquía semántica base.
  • Escalado tipográfico general.

Qué no debe contener

  • Colores de texto específicos del proyecto.
  • Helpers como uppercase o text-align.
  • Spacing estructural.
  • Containers o grid.
  • Componentes visuales del sitio.

Connections

Relación con otros módulos

Helpers

Text

Extiende la tipografía con color, peso, alineación y transformaciones.

Foundations

Base

Provee html, body y el punto de arranque del sistema tipográfico.

Rules

Guidelines

Define cómo mantener consistente la jerarquía del sistema.

Siguiente paso

Continúa con text para revisar las utilidades de color, transformaciones, alineación y peso tipográfico.

Volver a breakpoints Ir a text