app_font_sizes library

Sistema de tipografía jerárquica y escalable para Flutter

Este módulo proporciona un sistema completo de tamaños de fuente basado en escalas geométricas y jerarquías tipográficas, permitiendo crear interfaces consistentes, legibles y profesionales.

🎯 Componentes Principales

1. AppFontSizes - Sistema de escala configurable

Clase principal que genera una jerarquía tipográfica completa basada en:

Un tamaño base (bodySmall)
Un factor de escala geométrico

2. AppFontSizesConstants - Valores constantes en tiempo de compilación

Valores const predefinidos para uso en constructores constantes.

3. AppFontSizesPresets - Configuraciones predefinidas

Combinaciones listas para usar de tamaños base + factores de escala.

4. AppFontSizesScaleFactors - Factores de escala disponibles

Ratios geométricos para crear diferentes grados de jerarquía visual.

5. AppFontSizesExtension - Tamaños responsivos por contexto

Extension en BuildContext para calcular tamaños adaptativos.

📐 Jerarquía Tipográfica

Nivel         Tamaño (14px base × 1.272)   Uso
─────────────────────────────────────────────────────────────
display       121.4px                      Hero, splash screens
h1            95.4px                       Títulos principales
h2            75.0px                       Subtítulos de página
h3            59.0px                       Secciones grandes
header        46.4px                       Encabezados de sección
subheader     36.5px                       Subsecciones
paragraphTitle 28.7px                      Títulos de párrafo
bodyLarge     22.6px                       Texto destacado
body          17.8px                       Texto estándar ⭐
bodySmall     14.0px                       Captions, metadata

🚀 Inicio Rápido

Uso Básico (Valores Constantes)

// Para constructores const y valores por defecto
Text(
  'Hello World',
  style: TextStyle(fontSize: AppFontSizesConstants.body), // 17.8px
)

Uso con Presets (Recomendado)

// Configuración predefinida con escala clara
final typography = AppFontSizesPresets.normalLargeScale;

Text('Title', style: TextStyle(fontSize: typography.h1));
Text('Body', style: TextStyle(fontSize: typography.body));

Uso Personalizado

// Control total sobre base y escala
final customTypography = AppFontSizes(
  bodySmall: 16,  // Base más grande para accesibilidad
  scaleFactor: AppFontSizesScaleFactors.large,  // Jerarquía clara
);

Text('Custom', style: TextStyle(fontSize: customTypography.h2));

Tamaños Responsivos

// Adaptación automática al tamaño de pantalla
Text(
  'Responsive text',
  style: TextStyle(
    fontSize: context.getResponsiveFontSize(
      smallest: 14,
      largest: 24,
    ),
  ),
)

🎨 Factores de Escala

Factor	Valor	Jerarquía	Uso Ideal
`small`	1.128	Sutil	Tablas, layouts densos
`normal`	1.174	Balanceada	Material Design
`large`	1.272	Clara	Apps modernas ⭐
`extraLarge`	1.618	Dramática	Marketing, landing pages

📱 Presets Recomendados por Contexto

Mobile Apps

// Estándar (recomendado)
AppFontSizesPresets.normalLargeScale  // 14px + clara jerarquía

// Compacto
AppFontSizesPresets.normal  // 14px + jerarquía sutil

// Accesibilidad
AppFontSizesPresets.largeLargeScale  // 16px + clara jerarquía

Tablet Apps

// Estándar
AppFontSizesPresets.largeLargeScale  // 16px + clara jerarquía

// Lectura
AppFontSizesPresets.extraLargeLargeScale  // 18px + clara jerarquía

Desktop Apps

// Tablas/datos
AppFontSizesPresets.small  // 12px + jerarquía sutil

// General
AppFontSizesPresets.normalNormalScale  // 14px + jerarquía balanceada

// Marketing
AppFontSizesPresets.normalExtraLargeScale  // 14px + jerarquía dramática

💡 Mejores Prácticas

✅ Hacer

Usar presets para consistencia
Elegir UN factor de escala por app
Usar AppFontSizesConstants en constructores const
Adaptar tamaño base según dispositivo
Combinar con fontWeight para énfasis

❌ Evitar

Mezclar múltiples escalas en la misma app
Crear valores arbitrarios fuera del sistema
Usar tamaños muy pequeños (< 12px) sin razón
Ignorar accesibilidad en apps públicas

♿ Accesibilidad

// Nivel 1: Texto ligeramente más grande
final a11yLevel1 = AppFontSizesPresets.largeLargeScale;

// Nivel 2: Texto significativamente más grande
final a11yLevel2 = AppFontSizesPresets.extraLargeLargeScale;

// Nivel 3: Máxima legibilidad
final a11yLevel3 = AppFontSizesPresets.hugeLargeScale;

// Adaptativo según preferencias del sistema
final userScaleFactor = MediaQuery.textScaleFactorOf(context);
final fontSize = AppFontSizesConstants.body * userScaleFactor;

🔗 Referencias

Ver También

AppFontSizes - Clase principal del sistema
AppFontSizesPresets - Configuraciones predefinidas
AppFontSizesConstants - Valores constantes
AppFontSizesScaleFactors - Factores de escala disponibles

constants/app_font_sizes library