Branding — Typography

The type ramp follows Apple’s Human Interface scale, with sizes deliberately larger than Material’s defaults. The primary device is a tablet held at arm’s length on a job site, often in direct sunlight, so legibility under load wins.

Font families

No web font is downloaded. The ramp falls back through fonts that ship with the operating system or the Flutter engine, so estimates stay editable and exportable with no network.

Resolution order:

.SF Pro Text      → iOS / macOS / iPadOS
.SF UI Text       → older Apple systems
SF Pro Text       → Apple systems
Roboto            → everywhere else (bundled with CanvasKit, so web resolves)
Helvetica Neue    → older Apple systems
Arial             → final Windows fallback

Brand marketing surfaces use Segoe UI Bold / Regular on Windows for compositing. Apple SF Pro Text remains the canonical target.

Type ramp

Token	Size	Weight	Tracking	Line height	Use
largeTitle	34	700	-0.6	1.18	Hero headlines, marketing titles
title1	28	700	-0.45	1.2	Page headers
title2	22	600	-0.35	1.25	Section headers
title3	20	600	-0.3	1.28	Card titles, dialog headers
headline	17	600	-0.4	1.3	Emphasised body, button labels
body	17	400	-0.4	1.35	Default body text
callout	16	400	-0.3	1.35	Secondary body
subheadline	15	400	-0.2	1.35	Captions under fields
footnote	13	400	-0.1	1.35	Helper copy, footnotes
caption1	12	400	0	1.3	Tabular metadata
caption2	11	400	0.07	1.3	Tab labels
measurement	15	600	0	1.2	Tabular figures — footage, quantities, prices

Tracking rules

Apple tracks large type tighter and small type looser. Reproducing that is most of what makes a screen read as Apple-like rather than generic.

• 34px and above → tight tracking (negative, around -0.6)
• 22–28px → moderate negative tracking
• 17–20px → slight negative tracking for body
• 15px and below → slight positive or zero tracking

Tabular figures

Measurement labels sit in columns and change while the estimator drags a line. Proportional digits make those columns jitter; lining figures do not.

TextStyle(
  fontSize: 15,
  fontWeight: FontWeight.w600,
  letterSpacing: 0,
  fontFeatures: [FontFeature.tabularFigures(), FontFeature.slashedZero()],
)

tabularFigures() makes 0–9 the same width. slashedZero() distinguishes 0 from O in monospaced columns.

Marketing surfaces

• Headlines — largeTitle weight 700, SF Pro Display Bold
• Body — body weight 400, SF Pro Text
• Eyebrow / tag — caption2 with letter-spacing 0.07, uppercase

Material and Cupertino mapping

The theme provides both a Material TextTheme and a CupertinoTextThemeData derived from the same ramp, so widgets can use either and stay consistent.

Material	Cupertino	Sketch FG token
displayLarge	navLargeTitleTextStyle	largeTitle
displayMedium	—	title1
headlineLarge	—	title1
titleMedium	actionTextStyle	headline
bodyLarge	textStyle	body
labelLarge	—	headline
labelSmall	tabLabelTextStyle	caption1