RAPIDA UI

Typography

RAPIDA uses Inter for headings and UI chrome, Noto Sans for body text. Both are selected for high legibility under stress and broad language/script support.

Font Specimens

Inter — Headings & UI

The quick brown fox jumps over the lazy dog

Semi-bold 600 Bold 700 Medium 500

Noto Sans — Body & Forms

The quick brown fox jumps over the lazy dog

الثعلب البني السريع يقفز فوق الكلب الكسول

Regular 400 Medium 500

Type Scale

Mobile-first sizes. Tablet and desktop scales are progressively larger.

text-display — 30px / 36px

Display Heading

text-h1 — 24px / 32px

Heading 1

text-h2 — 20px / 28px

Heading 2

text-h3 — 18px / 26px

Heading 3

text-h4 — 16px / 24px

Heading 4

text-body-lg — 18px / 28px

Body Large — introductions and emphasis

text-body — 16px / 24px

Body — default paragraph and form text

text-body-sm — 14px / 20px

Body Small — help text, captions, metadata

text-caption — 12px / 16px

Caption — timestamps, counters, labels

text-label — 13px / 16px

Label — form labels, section titles

text-btn — 16px / 20px

Button Text

text-btn-sm — 14px / 18px

Small Button Text

Responsive Scales

Token Mobile (<768px) Tablet (768px+) Desktop (1024px+)
text-display30px36px40px
text-h124px28px32px
text-h220px22px24px
text-h318px18px20px
text-body16px16px16px

Weight Usage Rules

Weight Value Usage
Bold700Display, H1 headings only
Semi-bold600H2, H3, buttons, emphasis
Medium500H4, labels, form field labels
Regular400Body text, input values, help text

Line Height & Letter Spacing

  • Headings: line-height 1.2-1.33, letter-spacing tracking-tight (-0.025em)
  • Body text: line-height 1.5 (24px at 16px), default letter-spacing
  • Body-lg: line-height 1.56 (28px at 18px) for comfortable reading
  • Captions: line-height 1.33 (16px at 12px)
  • Labels: uppercase tracking uses tracking-widest (0.1em)
  • Buttons: line-height 1.25 for vertical centering

RTL & Multilingual Notes

  • Noto Sans was chosen for its broad Unicode coverage: Arabic, Bengali, Cyrillic, Devanagari, and more.
  • Use dir="rtl" on the <html> element for Arabic, Urdu, etc.
  • Use logical CSS properties (ps-, pe-, ms-, me-) instead of pl-/pr- where text direction changes layout.
  • Test all form labels and buttons in RTL before shipping.
  • Icons beside text should flip position in RTL — use rtl:flex-row-reverse.