Foundations
@rahhal/themes (fontFamily tokens)

Typography

View as Markdown

Font families (sans · arabic · mono) with web stacks plus iOS/Android equivalents, type scale (rem + px), and weight ramp. Bilingual EN/AR samples live alongside each other so designers can review both at once. Click any chip to copy.

Examples

Font families

Three stacks: sans, arabic, and mono. Apply via Tailwind utilities (`font-sans` / `font-arabic` / `font-mono`).

fontFamily.sans

The quick brown fox jumps over the lazy dog. 1234567890

Web stackui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
iOSSF Pro (system) · use `-apple-system`
AndroidRoboto (Material 3 default)

EN — Primary UI body and headings (English / Latin scripts).

AR — الخط الرئيسي للنصوص اللاتينية في واجهات الاستخدام.

fontFamily.arabic

نصٌّ تجريبي لمعاينة خط رحّال العربي. الأحرف العربية ١٢٣٤٥٦٧٨٩٠.

Web stack"IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif
iOSSF Arabic (built-in on iOS 16+)
AndroidNoto Sans Arabic

EN — Used automatically inside [dir="rtl"] regions; pair with logical Tailwind utilities.

AR — يُستخدم تلقائيًا داخل المناطق ذات الاتجاه RTL.

fontFamily.mono

const claims = decodeJwt(token); // → { sub, email, exp }

Web stackui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
iOSSF Mono
AndroidRoboto Mono

EN — Code blocks, JSON snippets, anything monospaced.

AR — كتل التعليمات البرمجية ومقاطع JSON وأي نصّ بعرض ثابت.

Type scale

Tailwind's default size scale, paired side-by-side in English and Arabic so cap heights and baselines stay legible across the two scripts. rem for web, px for native and design tools.

text-xs0.75rem · 12px

The quick brown fox

نَصٌّ تجريبي بالعربية

text-sm0.875rem · 14px

The quick brown fox

نَصٌّ تجريبي بالعربية

text-base1rem · 16px

The quick brown fox

نَصٌّ تجريبي بالعربية

text-lg1.125rem · 18px

The quick brown fox

نَصٌّ تجريبي بالعربية

text-xl1.25rem · 20px

The quick brown fox

نَصٌّ تجريبي بالعربية

text-2xl1.5rem · 24px

The quick brown fox

نَصٌّ تجريبي بالعربية

text-3xl1.875rem · 30px

The quick brown fox

نَصٌّ تجريبي بالعربية

text-4xl2.25rem · 36px

The quick brown fox

نَصٌّ تجريبي بالعربية

Weight

Use the same weights across both scripts; the Arabic stack maps each weight to the correct cut from IBM Plex Sans Arabic.

Normal · 400

Welcome to Rahhal

أهلاً بك في رحّال

Medium · 500

Welcome to Rahhal

أهلاً بك في رحّال

Semibold · 600

Welcome to Rahhal

أهلاً بك في رحّال

Bold · 700

Welcome to Rahhal

أهلاً بك في رحّال