teoria de diseño web en medida de textos

Conceptos Clave de Teoría Gráfica para Web (en rem)

1. Jerarquía Tipográfica

   • Tamaños estándar:

     • Título principal (h1): 2rem - 3rem (32px - 48px).

     • Subtítulos (h2): 1.5rem - 2rem (24px - 32px).

     • Texto cuerpo (p): 1rem - 1.125rem (16px - 18px).

     • Texto secundario (leyendas, notas): 0.875rem - 0.9375rem (14px - 15px).

   • Escalas modulares: Usa proporciones como 1:1.333 (ej: h1=3rem, h2=2.25rem, h3=1.6875rem).

2. Listas de Navegación (ul/li en menús)

   • Desktop: 1rem - 1.125rem (16px - 18px).

   • Mobile: 0.875rem - 1rem (14px - 16px).

   • Características:

     • Peso: 500 (Medium).

     • Espaciado: padding: 0.5rem - 0.75rem (8px - 12px).

3. Listas de Contenido (ul/li en artículos o secciones)

   • Desktop: 0.9375rem - 1rem (15px - 16px).

   • Mobile: 0.875rem - 0.9375rem (14px - 15px).

   • Características:

     • Interlineado: line-height: 1.5 - 1.6.

     • Viñetas: Tamaño de 0.75rem - 0.875rem (12px - 14px).

4. Sección Hero

   • Título hero: 2.5rem - 4.5rem (40px - 72px en desktop).

   • Subtítulo o CTA: 1.25rem - 1.5rem (20px - 24px).

5. Responsive Design

   • Unidades relativas: Siempre rem o em (ej: h1 móvil: 1.5rem - 2rem).

   • Breakpoints: Ajusta la escala tipográfica en media queries (ej: @media (max-width: 768px) { h1 { font-size: 2rem } }).

6. Accesibilidad

   • Contraste: Texto vs fondo mínimo 4.5:1 (calculado en rem/base 16px).

   • Touch targets: Mínimo 2.75rem x 2.75rem (44px x 44px) para botones o ítems interactivos.

---

Ejemplos de Código CSS con rem

css

Copy

/* Navegación */
.nav-menu li {
  font-size: 1.0625rem; /* 17px */
  font-weight: 500;
  padding: 0.625rem; /* 10px */
}

/* Listas de Contenido */
.content-list li {
  font-size: 1rem; /* 16px */
  line-height: 1.6;
  margin-bottom: 0.5rem; /* 8px */
}

/* Hero Section */
.hero-title {
  font-size: 3rem; /* 48px */
}

/* Texto Cuerpo */
p {
  font-size: 1.125rem; /* 18px */
}

---

¿Por qué usar rem en lugar de px?

• Escalabilidad: Los usuarios pueden ajustar el tamaño base del navegador, y rem se adapta automáticamente.

• Consistencia: Facilita mantener proporciones en todos los breakpoints.

• Accesibilidad: Mejora la experiencia para personas con discapacidad visual.