Heading font
DM Serif Display
Hierarchy system
Typography
Wroffer typography should feel gentle, refined, and easy to trust. DM Serif Display gives the brand its emotional voice in hero moments. Manrope carries the working system everywhere else.
Next chapter
How Wroffer should sound across web, social posts, and habit coaching.
Continue to Brand VoiceFont pairing
Font pairing
This guide uses a high-contrast serif plus a modern sans-serif. DM Serif Display carries the soft editorial feeling in hero headlines. Manrope keeps section structure, supporting copy, and interface text calm, clean, and practical.
Body font
Manrope
Scale
Type scale
The hierarchy should give clear answers at a glance: what matters, why it matters, and what a visitor can do without feeling pressured.
Display48-72pxDM Serif Display Regular
H1 / Hero40-56pxDM Serif Display Regular
Section titles28-36pxManrope Bold
Body16-18pxManrope Regular
Labels / UI12-14pxManrope Medium / Semibold
Application rules
Application rules
Typography is doing much of the emotional brand work. It needs enough structure to feel intentional without making the whole system feel like a magazine rather than an active wellness brand.
Type guardrails
- Headlines should feel elegant and warm, not hard-edged or overly ornamental.
- Body copy should be calm, readable, and easy to scan on mobile.
- Use uppercase only for labels, small metadata, or campaign emphasis, not for long paragraphs.
- The website and product system should prioritize readability over motivational drama.
Usage split
Website hierarchy
Use DM Serif Display for hero lines and a few emotional anchor statements only. This keeps the brand warm without letting the interface drift too far into editorial territory.
Functional copy
Use Manrope for section titles, supporting explanations, CTA support text, captions, and instructional body copy.
Pairing discipline
Let the serif do the expressive work only at the top of the page. Keep navigation, cards, product-support structure, and longer reading in Manrope so the system stays clean and usable.
Designer guidance
Typography rules for future work
The mockups confirmed that the type system works best when display type stays restrained and the supporting structure stays clean. Future designers should treat these rules as the default operating model.
Type system is set
DM Serif Display and Manrope are the correct pairing for the brand. Do not introduce a third font unless there is a clear system-level reason.
Serif is for hero moments
Keep DM Serif Display in hero and editorial moments only. This preserves warmth and elegance without making the whole system feel like a magazine.
Manrope runs the system
Use Manrope for section structure, body copy, product-support content, labels, buttons, navigation, and UI patterns.
Restraint matters
The typography becomes convincing when paired with clean layout and soft product UI. Overusing serif display type weakens the apparel and product signal.