Foundations
Typography
The MacroMath type scale — Poppins, from display to labels.
App · Flutter · macromath_mobile
All of MacroMath — app, docs and website — uses Poppins. In the app the styles
live in AppTypography (via google_fonts); on the web and in the docs the same
font is loaded from Google Fonts. One typographic voice across the whole product.
Preview
displayLarge2,000 kcalheadlineMediumDay's summarybodyLargeBody text — the readable base for content.labelSmallNAV LABELScale
| Style | Size | Weight | Use |
|---|---|---|---|
displayLarge | 48 | 700 | Big numbers (day's calories). |
displayMedium | 36 | 600 | Screen highlights. |
displaySmall | 28 | 600 | Screen titles. |
headlineLarge | 24 | 600 | Section titles. |
headlineMedium | 20 | 600 | Subtitles. |
headlineSmall | 18 | 500 | Card headers. |
bodyLarge | 16 | 400 | Main body text. |
bodyMedium | 14 | 400 | Secondary body. |
labelSmall | 10–12 | 500 | Nav labels, chips. |
Available weights
The app loads Poppins from 400 to 900. Rule of thumb:
- 400 — body text.
- 500 / 600 — labels, buttons, active states.
- 700 / 800 — titles and wordmark.
- 900 — reserved for brand highlights.
Use in the app
import 'package:macromath_mobile/core/constants/app_typography.dart';
Text('2,000 kcal', style: AppTypography.displayLarge);
Text("Day's summary", style: AppTypography.headlineMedium);Use on web / docs
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap"
/>:root {
--font-brand: 'Poppins', -apple-system, 'Segoe UI', sans-serif;
}See the styles live in the Widgetbook → Foundations › Typography.