Bitsy treats typography as an application-level choice. The system keeps one source model, then exposes Product, Editorial, and Marketing as distinct reading postures that can move independently from appearance.
The three options should read as one coherent set with clearly different intended use.
Dense, interface-friendly, and restrained for operational product surfaces.
Choose this for dashboards, dense tools, settings, and app shells that need faster scanning than reading.
Measure: 58ch
Copy line-height: 1.5
Display line-height: 1.15
Content rhythm factor: 0.66
Reading-first, balanced, and comfortable for docs, blogs, and information-rich views.
Choose this for documentation, knowledge bases, long-form product content, and calm default application reading.
Measure: 64ch
Copy line-height: 1.62
Display line-height: 1.12
Content rhythm factor: 0.78
Narrative, display-forward, and higher-contrast for landing pages and campaign storytelling.
Choose this for landing pages, launches, hero-heavy sections, and narrative surfaces that need stronger display pull.
Measure: 56ch
Copy line-height: 1.56
Display line-height: 1.04
Content rhythm factor: 0.72
<html data-bitsy-typography-profile="product">
...
</html>The default root calibration remains product. Set data-bitsy-typography-profile to product, editorial, or marketing on the whole document or a subtree when you need a different posture.
--bitsy-rhythm = --bitsy-body-size * --bitsy-line-copy
--bitsy-rhythm-space = --bitsy-rhythm * --bitsy-rhythm-space-factor
--bitsy-rhythm-inset = --bitsy-rhythm-space * --bitsy-rhythm-inset-factorProfiles steer reading posture through measure, line-height, and a small rhythm contract that long-form surfaces can use directly.
This specimen keeps content and appearance fixed while switching only typography.
Bitsy uses one shared fluid generator, then derives named typography profiles that change hierarchy, line rhythm, and reading posture without coupling those choices to color or brand treatment.
Appearance can stay constant while Product, Editorial, and Marketing each produce a more appropriate reading cadence for the same information architecture.
The hierarchy and spacing should read differently before color or card treatment does. That is the point of treating typography as its own system axis.
Conversion uplift on the latest onboarding refresh.
Bitsy uses one shared fluid generator, then derives named typography profiles that change hierarchy, line rhythm, and reading posture without coupling those choices to color or brand treatment.
Appearance can stay constant while Product, Editorial, and Marketing each produce a more appropriate reading cadence for the same information architecture.
The hierarchy and spacing should read differently before color or card treatment does. That is the point of treating typography as its own system axis.
Conversion uplift on the latest onboarding refresh.
Bitsy uses one shared fluid generator, then derives named typography profiles that change hierarchy, line rhythm, and reading posture without coupling those choices to color or brand treatment.
Appearance can stay constant while Product, Editorial, and Marketing each produce a more appropriate reading cadence for the same information architecture.
The hierarchy and spacing should read differently before color or card treatment does. That is the point of treating typography as its own system axis.
Conversion uplift on the latest onboarding refresh.
Pick product when density and scan speed matter most. Pick editorial when reading comfort and calm information flow should lead. Pick marketing when display pull and narrative contrast need to work harder.
If none fit exactly, override the underlying tokens directly while keeping the named profile as your nearest starting point.