Guía de tipografía UI - Fuentes de interfaz

Fundamentos de Tipografía UI

Por Qué Importa la Tipografía UI

La tipografía en el diseño de UI impacta directamente la experiencia del usuario, la legibilidad y la percepción general de tu aplicación. Una buena tipografía guía a los usuarios a través de tu interfaz y mejora la usabilidad.

Legibilidad Primero

Las fuentes UI deben priorizar la legibilidad sobre el estilo. Los usuarios necesitan escanear y entender información rápidamente sin esfuerzo.

Distinción clara de caracteres
Espaciado de línea apropiado
Buenos ratios de contraste
Tamaños de fuente adecuados

Consistencia

Mantén una tipografía consistente en toda tu interfaz para crear una experiencia de usuario cohesiva.

Familias de fuentes consistentes
Escala de tamaños uniforme
Espaciado estandarizado
Jerarquía predecible

Selección de Fuentes para UI

Fuentes Sans-serif para UI

Las fuentes sans-serif son generalmente preferidas para el diseño de UI debido a su apariencia limpia y excelente legibilidad en pantallas.

Fuentes UI Populares:

Inter
Roboto
Open Sans
SF Pro Display

Características:

Limpias y modernas
Excelente legibilidad en pantalla
Buenas en tamaños pequeños
Amplio soporte de idiomas

Pesos de Fuente en UI

Usa diferentes pesos de fuente para crear jerarquía y enfatizar información importante.

Light (300)

Texto secundario, subtítulos

Regular (400)

Texto del cuerpo, contenido principal

Bold (700)

Títulos, énfasis

Escala Tipográfica

Escala Tipográfica Responsiva

Escala Base (16px)

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

Escala Responsiva

• Móvil: 0.875x
• Tablet: 1x
• Desktop: 1.125x
• Large: 1.25x

Implementación con CSS

/* Escala tipográfica responsiva */
:root {
  --font-size-base: 16px;
  --font-size-h1: clamp(2rem, 5vw, 2.5rem);
  --font-size-h2: clamp(1.5rem, 4vw, 2rem);
  --font-size-h3: clamp(1.25rem, 3vw, 1.75rem);
  --font-size-body: clamp(0.875rem, 2.5vw, 1rem);
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
body { font-size: var(--font-size-body); }

Jerarquía y Espaciado

Sistema de Espaciado

Espaciado Vertical

• Interlineado: 1.4-1.6 para texto del cuerpo
• Márgenes: 1.5rem entre secciones
• Padding: 0.75rem para elementos
• Espaciado de párrafos: 1rem

Espaciado Horizontal

• Márgenes laterales: 1rem-2rem
• Padding interno: 0.5rem-1rem
• Espaciado entre elementos: 0.5rem
• Márgenes de contenedor: 1rem

Principios de Jerarquía

• Usa tamaños de fuente para establecer jerarquía
• Aplica pesos de fuente para énfasis
• Mantén consistencia en el espaciado
• Usa color para diferenciar niveles
• Considera la legibilidad en todos los tamaños

Diseño Responsivo

Media Queries para Tipografía

/* Tipografía responsiva */
@media (max-width: 768px) {
  :root {
    --font-size-base: 14px;
    --font-size-h1: 1.75rem;
    --font-size-h2: 1.5rem;
    --font-size-h3: 1.25rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --font-size-base: 18px;
    --font-size-h1: 3rem;
    --font-size-h2: 2.25rem;
    --font-size-h3: 1.875rem;
  }
}

Optimización para Dispositivos

Móvil

• Tamaños mínimos de 16px
• Interlineado de 1.5
• Márgenes reducidos
• Fuentes optimizadas para pantalla

Desktop

• Tamaños más grandes
• Interlineado de 1.4
• Márgenes amplios
• Fuentes de alta calidad

Accesibilidad y Legibilidad

Estándares de Accesibilidad

• Contraste mínimo de 4.5:1 para texto normal
• Contraste mínimo de 3:1 para texto grande
• Tamaño mínimo de fuente de 16px
• Interlineado mínimo de 1.4
• Soporte para zoom del navegador

Optimización de Legibilidad

• Ancho de línea de 45-75 caracteres
• Espaciado de letras apropiado
• Formas de letras claras
• Evitar fuentes decorativas
• Pruebas en diferentes dispositivos

Herramientas y Recursos

Herramientas de Diseño

Software de Diseño

• Figma - Diseño colaborativo
• Sketch - Diseño de interfaces
• Adobe XD - Prototipado
• InVision - Colaboración

Herramientas de Tipografía

• Type Scale - Generador de escalas
• Modular Scale - Escalas tipográficas
• Font Pair - Combinaciones
• Font Squirrel - Fuentes web

Bibliotecas de Fuentes UI

Fuentes Gratuitas

• Google Fonts
• Font Squirrel
• Open Font Library
• League of Moveable Type

Fuentes Premium

• Adobe Fonts
• Monotype
• FontShop
• MyFonts

Mejores Prácticas

Lista de Verificación

• Verifica la legibilidad en diferentes dispositivos
• Prueba con usuarios reales
• Asegúrate de cumplir estándares de accesibilidad
• Mantén consistencia en toda la interfaz
• Optimiza para diferentes tamaños de pantalla