Skip to content
Thanawi

Typography

One typeface, Cairo, for Latin, Arabic, numerals and code, with a shared type scale for both scripts.

Cairo, and only Cairo

Cairo was drawn for Arabic and Latin together. Both scripts share a baseline, x-height and stroke contrast, so mixed-language text looks like one voice. Use it everywhere in the product, including numerals and code. There is no secondary family and no monospace font.

About this site

The documentation chrome you’re reading is set in Inter at a single weight. Everything inside a preview is the design system itself, in Cairo. Use the EN / AR toggle on a preview to see both scripts.

font-family: var(--th-font-family-sans); /* "Cairo Variable", "Cairo", system-ui, sans-serif */

Type scale

--th-font-size-4xl

Transfer SAR 12,500 to Al Rajhi Capital

--th-font-size-3xl

Transfer SAR 12,500 to Al Rajhi Capital

--th-font-size-2xl

Transfer SAR 12,500 to Al Rajhi Capital

--th-font-size-xl

Transfer SAR 12,500 to Al Rajhi Capital

--th-font-size-lg

Transfer SAR 12,500 to Al Rajhi Capital

--th-font-size-base

Transfer SAR 12,500 to Al Rajhi Capital

--th-font-size-sm

Transfer SAR 12,500 to Al Rajhi Capital

--th-font-size-xs

Transfer SAR 12,500 to Al Rajhi Capital

--th-font-size-2xs

Transfer SAR 12,500 to Al Rajhi Capital

Weights

Portfolio balance

--th-font-weight-regular

Portfolio balance

--th-font-weight-medium

Portfolio balance

--th-font-weight-semibold

Portfolio balance

--th-font-weight-bold

Line height

Arabic letterforms have tall ascenders and deep descenders. Use relaxed for paragraphs and tight only for large headings.

Your quarterly statement is ready. Review the cap table changes before the board meeting on Thursday.

--th-line-height-tight

Your quarterly statement is ready. Review the cap table changes before the board meeting on Thursday.

--th-line-height-normal

Your quarterly statement is ready. Review the cap table changes before the board meeting on Thursday.

--th-line-height-relaxed

Numbers and amounts

Amounts are set with tabular figures, so digits keep the same width and columns line up. The token CSS already applies tabular-nums to tables. Anywhere else, add the tabular-nums utility.

DescriptionAmount
Series A — first closeSAR 4,250,000.00
Employee option poolSAR 811,110.50
Legal & advisorySAR 19,999.99
  • Keep the currency code next to the number and isolate the pair (see RTL & bidi).
  • Use the same digit system across a product. Thanawi uses Western digits (0–9) in both languages.
  • Align figures in tables with text-end, so they line up on the inline-end side in both directions.

Don’ts

  • No italics in Arabic. Arabic has no italic tradition, and slanted glyphs hurt legibility. Use weight for emphasis.
  • No letter-spacing on Arabic. Tracking breaks the joins between letters. Keep letter-spacing: normal in both scripts.
  • No all-caps for long labels. It doesn’t exist in Arabic, and in English it slows reading.