AppFontSizesScaleFactors class

Predefined scale factors for typographic hierarchies.

Scale factors determine the size ratio between consecutive levels in the typography hierarchy. A larger scale factor creates more visual distinction between heading levels.

Available Scales:

Scale Factor Description Best For
small 1.128 Minor Second Dense layouts, data tables
normal 1.174 Major Second Balanced UIs, forms
large 1.272 Minor Third Clear hierarchy, marketing
extraLarge 1.618 Golden Ratio Maximum contrast, landing pages

Visual Comparison:

Scale Factor Impact (base = 14px):

small (1.128):
  display: 28px
  h1: 25px
  h2: 22px
  body: 14px

normal (1.174):
  display: 33px
  h1: 28px
  h2: 24px
  body: 14px

large (1.272):
  display: 48px
  h1: 38px
  h2: 30px
  body: 14px

extraLarge (1.618):
  display: 97px
  h1: 60px
  h2: 37px
  body: 14px

Choosing a Scale Factor:

Use small (1.128) when:

  • Building data-heavy interfaces
  • Space is limited (mobile, compact views)
  • Displaying tables or grids
  • Need subtle hierarchy

Use normal (1.174) when:

  • Building general-purpose UIs
  • Need balanced, harmonious design
  • Following Material Design guidelines
  • Creating forms and settings screens

Use large (1.272) - DEFAULT when:

  • Need clear visual hierarchy
  • Building content-focused apps
  • Following modern design trends
  • Want good readability

Use extraLarge (1.618) when:

  • Creating marketing/landing pages
  • Need dramatic size differences
  • Building hero sections
  • Want maximum visual impact

Example:

// Subtle hierarchy for data tables
final compactSizes = AppFontSizes(
  bodySmall: 12,
  scaleFactor: AppFontSizesScaleFactors.small,
);

// Dramatic hierarchy for landing page
final heroSizes = AppFontSizes(
  bodySmall: 16,
  scaleFactor: AppFontSizesScaleFactors.extraLarge,
);

Recommendations:

  • Start with large (default) for most applications
  • Use normal for Material Design compliance
  • Use small only when space is critically limited
  • Use extraLarge sparingly, mainly for marketing content
  • Maintain consistency - don't mix scale factors within the same app

See also:

Constructors

AppFontSizesScaleFactors()

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

Constants

extraLarge → const double
Golden Ratio scale (1.618) - Dramatic, impactful hierarchy.
large → const double
Minor Third scale (1.272) - Clear, readable hierarchy. DEFAULT
normal → const double
Major Second scale (1.174) - Balanced, harmonious hierarchy.
small → const double
Minor Second scale (1.128) - Compact, subtle hierarchy.