Typography System

FlutKit uses a token-based typography system to ensure consistent text sizing across the entire application.
Instead of hardcoding font sizes, predefined constants such as kDisplayLarge, kBodyMedium, or kLabelSmall are used throughout UI components.

This approach improves:

• Visual consistency
• Maintainability
• Theme scalability
• Responsiveness across layouts

Typography Scale Overview

FlutKit typography is grouped into semantic categories, each serving a specific UI purpose:

1. Display

Used for hero text, landing pages, and very prominent headings.

const double kDisplayLarge  = 95.0;
const double kDisplayMedium = 59.0;
const double kDisplaySmall  = 47.0;

const double kDisplayLarge  = 95.0;
const double kDisplayMedium = 59.0;
const double kDisplaySmall  = 47.0;

Use cases

• Dashboard hero titles
• Marketing highlights
• Empty state headlines

2. Headline

Used for section headers and major content divisions.

const double kHeadlineLarge  = 39.0;
const double kHeadlineMedium = 33.0;
const double kHeadlineSmall  = 23.0;

const double kHeadlineLarge  = 39.0;
const double kHeadlineMedium = 33.0;
const double kHeadlineSmall  = 23.0;

Use cases

• Page titles
• Card headers
• Section separators

3. Title

Used for subsections and important labels inside components.

const double kTitleLarge  = 21.0;
const double kTitleMedium = 18.0;
const double kTitleSmall  = 15.0;

const double kTitleLarge  = 21.0;
const double kTitleMedium = 18.0;
const double kTitleSmall  = 15.0;

Use cases

• Dialog titles
• Card titles
• Form section headers

4. Body

Used for main readable content.

const double kBodyLarge  = 15.0;
const double kBodyMedium = 13.0;
const double kBodySmall  = 11.0;

const double kBodyLarge  = 15.0;
const double kBodyMedium = 13.0;
const double kBodySmall  = 11.0;

Use cases

• Paragraph text
• Table content
• Descriptions
• Long-form content

5. Label

Used for metadata, captions, and helper text.

const double kLabelLarge  = 13.0;
const double kLabelMedium = 11.0;
const double kLabelSmall  = 10.0;

const double kLabelLarge  = 13.0;
const double kLabelMedium = 11.0;
const double kLabelSmall  = 10.0;

Use cases

• Button labels
• Form hints
• Badges
• Status indicators

Usage Example

Below is a basic example showing how typography constants are applied:

Text(
  'kHeadlineMedium',
  style: TextStyle(
    fontSize: kHeadlineMedium,
  ),
),

Text(
  'kHeadlineMedium',
  style: TextStyle(
    fontSize: kHeadlineMedium,
  ),
),

This ensures the text follows the global typography scale rather than an arbitrary size.

Why Use Typography Constants?

Consistency

All text across the app follows the same scale, preventing visual imbalance.

Easy Theme Adjustments

If you want to adjust the overall typography, you only need to update the constants—no need to refactor individual widgets.

Design-System Friendly

This structure aligns with modern design systems (Material, Fluent, Ant Design, etc.).

Component Reusability

Reusable widgets automatically adapt to typography changes without modification.

Customization Notes

The values shown above are examples from Ademin.

Typography constants:

• Can be adjusted per theme
• May vary between products
• Can be responsive-aware if combined with breakpoints

Developers are encouraged to fine-tune these values based on:

• Brand guidelines
• Target devices
• Accessibility requirements

Editing Typography Values

All typography scale values used across FlutKit (such as kDisplayLarge, kBodyMedium, and kLabelSmall) are defined in:

lib/constants/dimens.dart

lib/constants/dimens.dart

Any change made in dimens.dart will automatically propagate to all widgets that use these constants, without requiring further refactoring.

Best Practices

• Always use typography constants instead of hardcoded font sizes
• Choose the semantic size that matches intent, not appearance
• Avoid mixing Display and Body styles in the same visual hierarchy
• Keep Body text readable (especially for dashboards)

Summary

FlutKit’s typography system provides a scalable, semantic, and maintainable approach to text styling.
By using predefined constants such as kHeadlineMedium or kBodySmall, developers can maintain visual consistency while retaining full flexibility to adapt typography at the theme level.

This system is foundational to building professional, cohesive Flutter dashboard interfaces.