Typography
Use Nunito Sans for headlines, Inter for reading, Almarai for Arabic and JetBrains Mono for technical detail.
Four typefaces with defined roles
Ideas become useful when they connect.
Turn one clear idea into a learning path. Give the next step room to become useful.
فكرة واضحة، وتعلّم أذكى.
24 / 32 / 48 — 01:20
In practice
Ideas become useful when they connect.
Turn one clear idea into a learning path. Give the next step room to become useful.
Display leads, body explains, a mono label locates the story. Keep the message larger than the signature.
01 / 03Ideas become useful when they connect.
Turn one clear idea into a learning path. Give the next step room to become useful.
Next: shape the lesson
Inter keeps reading calm. A comfortable measure and generous leading separate content from controls.
Ideas become useful when they connect.
Turn one clear idea into a learning path. Give the next step room to become useful.
Illustrative example; no data is submitted.Separate labels, instructions and actions through type hierarchy. Give Arabic text room to wrap naturally in Almarai.
Try the type system
Ideas become useful when they connect.
Turn one clear idea into a learning path. Give the next step room to become useful.
72px / 750 / 1.3 · Your text stays text. Arabic uses real 400, 700 or 800 weights and no tracking.
Rules and source
Give each face a role
Nunito Sans for display and headlines; Inter for body and interface; Almarai for Arabic display and body; JetBrains Mono for labels, code and tokens.
Hierarchy before decoration
Keep readable line lengths and generous leading. Digital body starts at 16px; labels at 14px. Use weight and size to separate levels without inventing more fonts.
Do
Use a strong headline with a quieter, readable supporting paragraph.
Don’t
Do not squeeze Arabic, rasterize text, or use technical fonts for long prose.
Open editable Figma sourceSource pages 11