Typography Hierarchy

Entendiendo la Jerarquía Tipográfica

¿Qué es la Jerarquía Tipográfica?

La jerarquía tipográfica es la organización de elementos de texto por importancia, usando señales visuales como tamaño, peso, color y espaciado para guiar a los lectores a través del contenido en un orden lógico.

Establece la importancia y flujo del contenido
Mejora la legibilidad y comprensión
Crea interés visual y equilibrio
Guía la atención del usuario y navegación

Jerarquía de Tamaño de Fuente

Principios de Escala de Tamaño

Crea una escala de tamaño consistente y armoniosa para tu sistema tipográfico.

Usa ratios matemáticos (1.25, 1.5, 2)
Mantén diferencias claras de tamaño
Considera la legibilidad en cada tamaño
Prueba en diferentes dispositivos

Escalas de Tamaño Comunes

Escalas tipográficas populares usadas en sistemas de diseño.

Cuarta Perfecta: ratio 1.333
Quinta Perfecta: ratio 1.5
Ratio Dorado: 1.618
Escala Modular: ratios personalizados

Jerarquía de Peso de Fuente

Estrategia de Selección de Peso

Elige pesos de fuente que creen distinción visual clara mientras mantienen la legibilidad.

Pesos Recomendados:

• Light (300) - Texto secundario
• Regular (400) - Texto del cuerpo
• Medium (500) - Énfasis sutil
• SemiBold (600) - Títulos menores
• Bold (700) - Títulos principales

Consideraciones:

• Mantén contraste suficiente
• Evita demasiadas variaciones
• Considera la legibilidad
• Prueba en diferentes fondos

Implementación con CSS

/* Sistema de pesos de fuente */
:root {
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

h1 { font-weight: var(--font-weight-bold); }
h2 { font-weight: var(--font-weight-semibold); }
h3 { font-weight: var(--font-weight-medium); }
body { font-weight: var(--font-weight-regular); }
.caption { font-weight: var(--font-weight-light); }

Principios de Espaciado

Espaciado Vertical (Interlineado)

Ratios Recomendados

• Títulos: 1.1 - 1.3
• Texto del cuerpo: 1.4 - 1.6
• Texto pequeño: 1.5 - 1.7
• Texto largo: 1.6 - 1.8

Factores de Consideración

• Tamaño de fuente
• Ancho de línea
• Tipo de contenido
• Dispositivo de lectura

Espaciado Horizontal y Márgenes

Márgenes de Elementos

• Entre títulos: 1.5rem
• Entre párrafos: 1rem
• Entre secciones: 2rem
• Márgenes laterales: 1rem-2rem

Espaciado Interno

• Padding de contenedores: 1rem
• Espaciado de botones: 0.75rem
• Márgenes de listas: 0.5rem
• Espaciado de formularios: 1rem

Sistema de Escala Tipográfica

Escala Base Recomendada

Tamaños de Fuente

• H1: 2.5rem (40px)
• H2: 2rem (32px)
• H3: 1.75rem (28px)
• H4: 1.5rem (24px)
• Body: 1rem (16px)
• Small: 0.875rem (14px)

Interlineado

• H1: 1.2
• H2: 1.3
• H3: 1.4
• H4: 1.4
• Body: 1.6
• Small: 1.7

Implementación con Variables CSS

/* Sistema de escala tipográfica */
:root {
  /* Tamaños base */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px */
  
  /* Interlineado */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
}

Jerarquía Visual y Color

Uso del Color en Jerarquía

• Usa color para enfatizar elementos importantes
• Mantén contraste suficiente para legibilidad
• Considera la accesibilidad del color
• Usa variaciones sutiles para jerarquía
• Mantén consistencia en toda la interfaz

Técnicas de Énfasis

• Cambio de color para enlaces
• Uso de colores de marca para títulos
• Variaciones de opacidad para texto secundario
• Contraste de color para llamadas a la acción
• Consistencia en el sistema de colores

Aplicaciones Prácticas

Sitios Web y Aplicaciones

Navegación

• Menú principal: Bold, 1.125rem
• Submenús: Medium, 1rem
• Breadcrumbs: Regular, 0.875rem
• Enlaces: Medium, color distintivo

Contenido

• Títulos de página: Bold, 2.5rem
• Subtítulos: SemiBold, 1.75rem
• Texto del cuerpo: Regular, 1rem
• Metadatos: Light, 0.875rem

Materiales Impresos

Documentos

• Títulos: Serif, Bold, 18pt
• Subtítulos: Serif, Medium, 14pt
• Texto del cuerpo: Serif, Regular, 12pt
• Notas: Serif, Light, 10pt

Presentaciones

• Títulos: Sans-serif, Bold, 36pt
• Subtítulos: Sans-serif, Medium, 24pt
• Texto del cuerpo: Sans-serif, Regular, 18pt
• Notas: Sans-serif, Light, 14pt

Herramientas y Recursos

Herramientas de Diseño

Generadores de Escala

• Type Scale - Generador visual
• Modular Scale - Escalas matemáticas
• Gridlover - Herramienta interactiva
• Typography.com - Recursos profesionales

Software de Diseño

• Figma - Diseño colaborativo
• Sketch - Diseño de interfaces
• Adobe InDesign - Tipografía avanzada
• Canva - Herramientas de diseño

Recursos de Aprendizaje

Libros Recomendados

• "The Elements of Typographic Style"
• "Thinking with Type"
• "Typography: A Very Short Introduction"
• "Web Typography"

Recursos en Línea

• Typography.com
• AIGA Design Resources
• Smashing Magazine
• CSS-Tricks Typography

Mejores Prácticas

Principios Clave

• Mantén consistencia en todo el sistema
• Usa escalas matemáticas para armonía
• Prioriza la legibilidad sobre el estilo
• Considera el contexto de uso
• Prueba en diferentes dispositivos
• Documenta tu sistema tipográfico