Typography
Overview
The Dhub Design System establishes a unified typographic framework to ensure visual and functional consistency across both web and mobile products. The system defines six main categories: Title, Heading, Label, Body, Tiny, and Micro. All text styles are based on the primary font family used by Dhub and are optimized for scalability and accessibility.
Principles
-
Consistency – Maintain a clear typographic hierarchy across all platforms.
-
Scalability – Adapt seamlessly to varying screen sizes and device types.
-
Accessibility – Prioritize readability, clear spacing, and proper hierarchy.
-
Semantic Mapping – Use typography styles according to their functional purpose, not only visual appearance.
Font Family
-
Primary Typeface: (Specify Dhub’s main font – e.g., SF Pro or another chosen font)
-
Available Weights: Regular, Medium, Bold
Structure & Hierarchy
Typography is organized into semantic levels corresponding to functional roles:
-
Title – Large hero and page titles
-
Heading – Section and subsection headers (H1–H4)
-
Label – Interface labels, button text (Label-1 – Label-5)
-
Body – Paragraph and content text (Body-1 – Body-4)
-
Tiny / Tiny Extended – Small supporting text and captions
-
Micro – Metadata and smallest informational text
Token Structure
Typography tokens follow this naming convention:
byr.typography.[category].[level].[property]
Examples:
-
dhub.typography.title.title-1.font-size
-
dhub.typography.body.body-2.line-height
Title Styles
| Style | Font Size | Line Height | Weight | Letter Spacing |
|---|---|---|---|---|
| Title-1 | 64px | 70px | Medium / Bold | -0.8px |
| Title-2 | 40px | 48px | Medium / Bold | -0.64px |
| Title-3 | 32px | 36px | Medium / Bold | -0.6px |
Heading Styles
| Style | Font Size | Line Height | Weight | Letter Spacing |
|---|---|---|---|---|
| H1 | 28px | 32px | Medium / Bold | -0.56px |
| H2 | 26px | 30px | Medium / Bold | -0.26px |
| H3 | 24px | 28px | Medium / Bold | -0.24px |
| H4 | 20px | 24px | Medium / Bold | -0.2px |
Label Styles
| Level | Font Size | Line Height | Weights | Letter Spacing |
|---|---|---|---|---|
| Label-1 | 17px | 20px | Regular / Medium / Bold | -0.18px |
| Label-2 | 15px | 18px | Regular / Medium / Bold | -0.16px |
| Label-3 | 13px | 16px | Regular / Medium / Bold | -0.14px |
| Label-4 | 12px | 14px | Regular / Medium / Bold | -0.12px |
| Label-5 | 11px | 14px | Regular / Medium / Bold | -0.1px |
Body Styles
| Level | Font Size | Line Height | Weights | Letter Spacing |
|---|---|---|---|---|
| Body-1 | 17px | 28px | Regular / Medium | 0px |
| Body-2 | 15px | 22px | Regular / Medium | 0px |
| Body-3 | 13px | 20px | Regular / Medium | 0px |
| Body-4 | 12px | 16px | Regular / Medium | 0px |
Tiny & Micro Styles
| Style | Font Size | Line Height | Weights | Letter Spacing |
|---|---|---|---|---|
| Tiny | 10px | 12px | Medium / Bold | 0px |
| Tiny Extended | 10px | 12px | Medium / Bold | 1px |
| Micro | 9px | 10px | Medium / Bold | 0px |
Usage Guidelines
-
Titles – For hero banners and main page titles
-
Headings – For sections and subsections
-
Labels – For form labels and button text
-
Body – For content text and paragraphs
-
Tiny / Micro – For metadata, captions, and helper text\
Here’s the text size and usage guidelines for the Car Rental Card component:
Text Sizes
| Element | Font size | Font weight | Style |
|---|---|---|---|
| Promo label | 14px | SemiBold | All caps or bold highlight (e.g., “Limited Time Offers”) |
| Car name | 16px | Medium or Bold | Primary title (e.g., “BMW M8 Coupe”) |
| Sub-label | 14px | Regular | Secondary text (e.g., “or similar”) |
| Price | 16px | SemiBold | Emphasis on pricing (e.g., “135 ₼ /day”) |
| Meta info | 12px–14px | Regular | (e.g., time, location, transport type) |
Usage Guidelines
Do ✅
-
Use consistent font sizes across all car cards.
-
Maintain clear hierarchy between the car name and “or similar” subtext.
-
Emphasize price using bold or semi-bold styling.
-
Use truncation or wrapping for long car names (max 2 lines).
-
Use left-aligned or center-aligned text based on card layout (grid vs carousel).
Don’t ❌
-
Don’t mix font weights or styles inconsistently across cards.
-
Don’t display pricing without currency or duration.
-
Don’t stack more than two lines of text in compact card variants.
-
Avoid scaling down text sizes below 12px for accessibility.