AppFontSizesDevicePresets class

Safe and recommended typographic sizes by device type.

This class provides device-specific presets based on industry best practices and usability research. All recommendations follow guidelines from Material Design, Apple HIG, and web accessibility standards (WCAG).

📊 Safe Typography Guidelines

Minimum Readable Sizes:

  • Mobile body text: 16px minimum (avoid zoom requirements)
  • Tablet body text: 16-18px
  • Desktop body text: 16-18px
  • Captions/metadata: 12px minimum (with good contrast)
  • Buttons/CTA: 14px minimum (for touch targets)

Key Principles:

  1. Mobile-first: Start with 16px for body text
  2. Clear hierarchy: Titles should be significantly larger (2-3x body)
  3. Line height: Use 1.4-1.6× font size for readability
  4. Relative units: Prefer responsive scaling
  5. Contrast: Ensure WCAG AA compliance (4.5:1 for normal text)

📱 Recommended Size Ranges by Device

┌──────────────┬────────┬─────────┬──────────┬─────────────────────┐
│ Type         │ Mobile │ Tablet  │ Desktop  │ Use Case            │
├──────────────┼────────┼─────────┼──────────┼─────────────────────┤
│ Body         │ 16-20  │ 16-22   │ 16-24    │ Paragraphs, lists   │
│ H1           │ 28-40  │ 30-42   │ 32-48    │ Main titles         │
│ H2/H3        │ 20-26  │ 22-28   │ 24-32    │ Subtitles           │
│ Buttons/CTA  │ 14-18  │ 15-20   │ 14-18    │ Touch targets       │
│ Caption      │ 12-14  │ 12-16   │ 14-16    │ Metadata, helpers   │
└──────────────┴────────┴─────────┴──────────┴─────────────────────┘

🎯 Usage Examples

// Mobile app
final mobile = AppFontSizesDevicePresets.mobile;
Text('Body', style: TextStyle(fontSize: mobile.body));
Text('Title', style: TextStyle(fontSize: mobile.h1));

// Tablet app
final tablet = AppFontSizesDevicePresets.tablet;
Text('Body', style: TextStyle(fontSize: tablet.body));

// Desktop/web app
final desktop = AppFontSizesDevicePresets.desktop;
Text('Body', style: TextStyle(fontSize: desktop.body));

// Responsive approach
final screenWidth = MediaQuery.of(context).size.width;
final preset = screenWidth < 600
    ? AppFontSizesDevicePresets.mobile
    : screenWidth < 1024
        ? AppFontSizesDevicePresets.tablet
        : AppFontSizesDevicePresets.desktop;

📖 References

See also:

Constructors

AppFontSizesDevicePresets()

Properties

hashCode → int
The hash code for this object.
no setterinherited
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited

Methods

noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toString() → String
A string representation of this object.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited

Static Properties

desktop → AppFontSizes
Desktop complete preset - Standard desktop typography.
final
desktopCompact → AppFontSizes
Desktop compact - For data-dense UIs.
final
desktopMarketing → AppFontSizes
Desktop marketing - High-impact web presence.
final
desktopReading → AppFontSizes
Desktop reading - Enhanced for content.
final
mobile → AppFontSizes
Mobile complete preset - Balanced mobile typography.
final
mobileComfortable → AppFontSizes
Mobile comfortable - Enhanced readability.
final
mobileCompact → AppFontSizes
Mobile compact - For dense mobile layouts.
final
tablet → AppFontSizes
Tablet complete preset - Optimized for tablets.
final
tabletReading → AppFontSizes
Tablet reading - Enhanced for content consumption.
final