Typography

Two typefaces, one voice. Gilroy sets Latin text and Lama Sans sets Arabic, both from the SuperCoach brand guide. They share a geometric, open shape, so English and Arabic sit comfortably on the same screen.

Families

You don't pick the Arabic family by hand. Set lang="ar" on the page or on the element, and the base styles switch to Lama Sans.

Scale

Every size, with English and Arabic side by side at its default line height. Sizes are shown at a 16px root.

Weights

• Regular (400) for body text.
• Medium (500) for controls: buttons, tabs, menu items.
• SemiBold (600) for headings and emphasis. It is the brand's display weight and the most used weight in coach-admin today.
• Light (300) for large display text only, as in the brand guide. Never below xl.
• Bold (700) rarely; prefer SemiBold. coach-admin's 800 and 900 weights fold into 700.

Line height and tracking

Arabic text never takes negative tracking or uppercase: letters are joined, and spacing them apart breaks the words.

Mixing Gilroy and Lama Sans in one line

Coaching content mixes languages all the time: an Arabic sentence with a program name in English, a client's name in Arabic inside an English table. Mark each run with its language, so it gets the right font and the right direction.

<p lang="ar">
  أكملت سارة برنامج <bdi lang="en">Strength Block A</bdi> هذا الأسبوع
</p>

• Wrap the other-language run in <bdi> (or a <span dir="auto">) with its lang. bdi keeps punctuation and numbers on the correct side.
• Keep both runs at the same size. Lama Sans looks smaller than Gilroy at the same size, which is expected; don't scale one up.
• Don't use italic for Arabic. Arabic has no italic tradition; use weight for emphasis instead.

Numerals

Product UI uses Western digits (0–9) in both languages (a default until QUESTIONS Q22 is answered), so weights, reps and prices read the same in English and Arabic and line up in tables. Use tabular-nums wherever numbers are compared in columns.

Related: Content, RTL, Typography tokens.