Harmony Type

Mathematical Typography for Digital Interfaces

A screen-optimized typography system based on modular scale theory, golden ratio proportions, and optical adjustments for perfect text hierarchy across all devices.

Experience Live Typography Calculations

Adjust the parameters below to see HarmonyType's mathematical algorithms in real-time

Scale Ratio
1.125 - Digital Minor
Formula: fontSize = baseFontSize × (ratio ^ scaleStep)
Base Font Size
16px
bodyMedium scale (step 0) - baseline for all calculations
Line Height Ratio
1.5
With golden ratio adjustments: fontSize > 24px ? +5% : +2%
Letter Spacing Ratio
0.008em
With size adjustments: fontSize > 32px ? -0.01 : 0
Standard Typography

Section Heading

This is standard typography with fixed size relationships and no mathematical harmony.

Caption text with basic styling
Issues:
• Fixed 24px → 16px → 14px (no mathematical relationship)
• Static line height 1.4 for all sizes
• No letter spacing optimization
HarmonyType System

Section Heading

This text uses HarmonyType's mathematical scaling with modular scale progression and optical adjustments.

Caption with perfect proportional relationships
Mathematical Precision:
Loading calculations...

Screen-Optimized Typography Ratios

Unlike print typography, digital interfaces require conservative ratios to prevent overwhelming mobile layouts. HarmonyType uses carefully calibrated ratios optimized for screen-based reading.

Digital Minor
Recommended
1.125

Perfect for: Most mobile apps, responsive web apps, general digital interfaces
Devices: Mobile: Excellent, Tablet: Excellent, Desktop: Good

Digital Balanced
Balanced
1.150

Perfect for: Tablet interfaces, content-focused websites
Devices: Mobile: Good, Tablet: Excellent, Desktop: Excellent

Digital Major
Use Carefully
1.250

Perfect for: Desktop-only apps, marketing sites
Devices: Mobile: Caution, Tablet: Good, Desktop: Excellent

Golden Ratio
Avoid for Screens
1.618

Issue: Creates massive size jumps that overwhelm mobile layouts
Result: displayLarge becomes 110px at 16px base - unusable on mobile

Core Mathematical Algorithms

Modular Scale Calculation

Each typography scale is calculated using the fundamental modular scale formula, creating mathematically harmonious size relationships like musical intervals.

Core Formula (TypeCalculator.calculateFontSize)
fontSize = baseFontSize × (ratio ^ scaleStep)

Example:
titleLarge = 16px × (1.125 ^ 4) = 20.25px
headlineLarge = 16px × (1.125 ^ 7) = 25.63px
caption (-2): 12.8px
bodyMedium (0): 16px
titleLarge (4): 20.25px
headlineLarge (7): 25.63px
displayLarge (10): 32.38px
Standard Line Height (1.3)
Base Calculation (1.5)
+ Golden Ratio Adjustment (1.59)
Perfect line height = 18px × 1.5 + (18px × 0.05) = 28.6px

Golden Ratio Line Height

Line heights are optimized using golden ratio principles. Larger text gets proportionally more line spacing for enhanced readability and visual harmony.

Line Height Algorithm (TypeCalculator.calculateLineHeight)
baseLineHeight = fontSize × lineHeightRatio
goldenAdjustment = fontSize > 24 ? 0.05 : 0.02
lineHeight = baseLineHeight + (fontSize × goldenAdjustment)

Perceptual Letter Spacing

Based on the Weber-Fechner law of human perception. As text gets larger, it needs proportionally tighter letter spacing to maintain optimal readability.

Letter Spacing Algorithm (TypeCalculator.calculateLetterSpacing)
baseSpacing = fontSize × letterSpacingRatio
sizeAdjustment = fontSize > 32 ? -0.01 : 0.0
letterSpacing = baseSpacing + (fontSize × sizeAdjustment)
Small text (0.008em)
Medium text (0.000em)
Large text (-0.01em)
Larger text automatically gets tighter spacing

Responsive Breakpoint System

Each breakpoint has its own typography configuration optimized for device category, viewing distance, and interaction patterns.

Phone
Medium
360px - 413px
Base Size: 15px
Scale Ratio: 1.125 (digitalMinor)
Line Height: 1.45
Letter Spacing: 0.008
Viewing Distance: ~35cm
Tablet
Medium
768px - 1023px
Base Size: 17px
Scale Ratio: 1.150 (digitalBalanced)
Line Height: 1.6
Letter Spacing: 0.001
Viewing Distance: ~50cm
Desktop
Standard
1440px+
Base Size: 19px
Scale Ratio: 1.200 (digitalModerate)
Line Height: 1.75
Letter Spacing: -0.005
Viewing Distance: ~65cm

Complete Typography Scale

All 14 semantic scale levels with contextual adjustments for different text purposes

Standard
Heading Context
Body Context
UI Context

Real-World UI Showcase

See HarmonyType's mathematical typography in action across different interface components, demonstrating perfect text hierarchy and contextual optimization.

Mobile App Components

Balance
•••• 4829
$24,847.52
Available
$22,430.18
+2.4%
+$573.20
Typography: digitalMinor (1.125) • Contextual UI spacing
Sarah Chen
2 hours ago
Just discovered HarmonyType for my Flutter apps! The mathematical scaling is incredible – my text hierarchy finally looks professional across all devices. 🎨✨
Typography: Body context optimization • Enhanced letter spacing for readability
🎵
Cosmic Harmony
Solar Winds
2:34 3:47
Typography: Display context • Tight letter spacing for visual cohesion

Dashboard & Analytics

Revenue Analytics
Last 30 days performance
+12.5%
$847K
Total Revenue
2.4K
New Customers
94.2%
Satisfaction
Typography: Mixed contexts • Large numerics with display scaling • Captions for metadata
Recent Activity
New user registration
[email protected] joined your app
2 minutes ago
Payment received
$2,847.00 from Premium subscription
5 minutes ago
System maintenance
Scheduled for tonight at 2:00 AM
1 hour ago
Typography: Caption context • Enhanced spacing for small text legibility

E-commerce & Product Cards

📱
iPhone 15 Pro
256GB, Titanium Blue
-15%
$849
$999
★★★★★
4.8 (324 reviews)
Typography: Heading context for product name • Display scaling for price
🎧
AirPods Pro
with Wireless Charging Case
NEW
$249
★★★★☆
4.6 (89 reviews)
Typography: UI context for buttons • Body context for descriptions
⚡
Lightning Fast
Experience instant typography calculations with HarmonyType's optimized algorithms and intelligent caching system.
< 1ms
Calculation time
Typography: Display context for impact • Heading context for titles

Interactive UI Elements

Create Account
Join thousands of developers using HarmonyType
Already have an account? Sign in
Typography: UI context for form elements • Heading context for title
Navigation Elements
Tab Navigation
Button Variations
Menu Items
🏠
Dashboard
📊
Analytics
⚙️
Settings
Typography: UI context for precise alignment • Medium weight for clear hierarchy
Mathematics Meets Design
Every component above demonstrates HarmonyType's mathematical precision in real-world interfaces. From banking cards to dashboard analytics, typography scales perfectly across contexts and devices.
14
Semantic Scale Levels
5
Typography Contexts
8
Device Breakpoints
∞
Perfect Combinations

HarmonyType Process Workflow

Understanding how HarmonyType transforms your text requirements into perfectly optimized typography

1

Breakpoint Detection

MediaQuery.of(context)
↓
Screen: 768px × 1024px
↓
Shortest Side: 768px
↓
Result: tabletMedium

Screen Size Detection

HarmonyType begins by analyzing the current screen dimensions using Flutter's MediaQuery. The BreakpointDetector uses the shortest side to determine device category, ensuring consistent behavior regardless of orientation.

Core Algorithm
HarmonyBreakpointDetector.detect(context)
→ Uses shortest side for orientation independence
→ Applies platform-specific adjustments
→ Returns semantic breakpoint (phoneSmall → desktop)
  • Phone: 0-599px (touch-optimized, close viewing)
  • Tablet: 600-1199px (hybrid interaction, medium distance)
  • Desktop: 1200px+ (precise interaction, distance viewing)

Configuration Selection

Based on the detected breakpoint, HarmonyType selects the appropriate typography configuration. Each configuration is optimized for the specific device category's viewing patterns and interaction methods.

Phone Config
Base: 15px
Ratio: 1.125
Line Height: 1.45
Letter Spacing: 0.008
Tablet Config
Base: 17px
Ratio: 1.150
Line Height: 1.6
Letter Spacing: 0.001
2

Config Selection

tabletMedium
↓
theme.getConfigFor()
↓
TypographyConfig {
  baseFontSize: 17px
  ratio: 1.150
  lineHeight: 1.6
}
3

Mathematical Engine

Font Size:
17px × (1.150 ^ 4) = 22.4px

Line Height:
base = 22.4 × 1.6 = 35.8px
golden = 22.4 × 0.02 = 0.45px
final = 36.25px

Letter Spacing:
22.4 × 0.001 = 0.022px

Typography Calculations

The TypographyCalculator applies mathematical formulas to generate perfectly proportioned text styles. Each calculation builds on proven typographic principles and perceptual psychology research.

Modular Scale Formula
fontSize = baseFontSize × (ratio ^ scaleStep)
Golden Ratio Line Height
lineHeight = base + (fontSize × goldenAdjustment)
Perceptual Letter Spacing
letterSpacing = base + sizeAdjustment

Contextual Optimization

HarmonyType applies context-specific adjustments based on how the text will be used. Different contexts (heading, body, UI, display) require different typographic treatments for optimal performance.

Heading Context
Letter Spacing: ×0.8
Line Height: ×0.95
Purpose: Visual cohesion
Body Context
Letter Spacing: ×1.1
Line Height: ×1.0
Purpose: Reading comfort
4

Context Adjustment

context: HarmonyContext.heading
↓
letterSpacing *= 0.8
lineHeight *= 0.95
↓
Optimized for hierarchy
5

Advanced Features

Fluid Typography:
size = base + (progress × scale)

Optical Adjustment:
size *= (1 + log(distance/40) × 0.1)

Accessibility:
size *= 1.2, spacing += 0.01

Advanced Typography Features

HarmonyType offers advanced features for specialized use cases. These optional enhancements provide fluid scaling, viewing distance optimization, and accessibility improvements when needed.

Fluid Typography
Smooth interpolation between breakpoints for polished responsive experiences
Optical Adjustments
Viewing distance compensation for TV displays, presentations, and kiosks
Accessibility Features
Enhanced sizing, spacing, and contrast for users with visual impairments

Flutter TextStyle Generation

Finally, HarmonyType generates a complete Flutter TextStyle with all calculated properties. The result is mathematically perfect typography that scales beautifully across all devices and contexts.

Generated TextStyle
TextStyle(
  fontFamily: 'Inter',
  fontSize: 22.4,
  fontWeight: FontWeight.w600,
  height: 1.62, // 36.25px line height
  letterSpacing: 0.018, // 0.8em with context
  color: Color(0xFF1C1C1E),
)
6

Final Rendering

Perfect Typography
✓ Mathematically harmonious
✓ Device-optimized
✓ Context-aware
✓ Accessibility-ready

Performance & Optimization

Intelligent Caching
HarmonyType caches breakpoint detection, configuration lookup, and TextStyle generation to ensure smooth performance even with frequent rebuilds.
Lazy Calculation
Typography calculations are performed on-demand and cached, avoiding unnecessary computation for styles that aren't actively used.
Memory Management
Automatic cache size limits and cleanup prevent memory leaks while maintaining optimal performance across app lifecycle.

How HarmonyType Transforms Your Text

Watch as ordinary text becomes perfectly balanced typography through mathematical precision

1

Standard Input

Your heading text here

Your body content flows naturally with standard browser defaults and basic CSS styling applied.

Caption or metadata text
• Font Size: Fixed 22px, 15px, 13px • Line Height: 1.3 (static) • Letter Spacing: 0 (none) • Hierarchy: Basic size jumps
Analyze
2

Mathematical Analysis

Modular Scale
1.125 ratio
Golden Ratio
Line height φ
Optical Size
Distance: 50cm
Context
Body detected
Calculating optimal proportions...
Transform
3

HarmonyType Result

Your heading text here

Your body content flows naturally with mathematically perfect proportions, optimal line heights, and contextual letter spacing.

Caption or metadata text
• Font Size: 25px, 17px, 13.5px (scaled) • Line Height: 1.5-1.6 (golden ratio) • Letter Spacing: Contextually optimized • Hierarchy: Mathematical harmony

Side-by-Side Comparison

Before: Standard Typography

The Future of Design

Technology has revolutionized the way we approach design, enabling creators to push boundaries and explore new possibilities. With advanced tools and methodologies, we can create experiences that are both beautiful and functional.

Published 3 hours ago
❌ Inconsistent spacing
❌ Poor hierarchy
❌ Reading strain

After: HarmonyType

The Future of Design

Technology has revolutionized the way we approach design, enabling creators to push boundaries and explore new possibilities. With advanced tools and methodologies, we can create experiences that are both beautiful and functional.

Published 3 hours ago
✅ Mathematical precision
✅ Clear hierarchy
✅ Comfortable reading

Typography Anatomy

Understanding the fundamental building blocks that create perfect typography

Baseline - The invisible line where letters sit
Cap Height - Top of capital letters like H, B, M
X-Height - Height of lowercase letters like x, a, o
Ascender - Parts extending above x-height like h, b, k
Descender - Parts extending below baseline like g, p, y
Letter Spacing - Space between individual characters

Quick Integration Examples

See how easy it is to implement HarmonyType in your favorite frameworks

Flutter
React Native
CSS/Web
Swift UI

               @import 'package:flutter/material.dart';
               import 'package:harmonytype/harmonytype.dart';

                // TODO : Add your Dart code here