Chapter 4.0

Typography

One typeface, three weights, a short scale. English and Arabic share it.

  1. 4.1WILS Sans
  2. 4.2Type scale
  3. 4.3Latin plant names
  4. 4.4Arabic
  5. 4.5Numerals

4.1 · WILS Sans

One family. Nothing else.

WILS Sans is the only typeface. It covers Latin and Arabic, so English and Arabic text match in weight and colour.

There are three weights. Bold sets headlines, labels and the wordmark. Medium sets names, navigation and values. Regular sets running text.

Rule

No italic, ever. No second typeface. The browser never fakes a slant or a bold.

Weights
WeightUse
Regular 400Body, lede, small text
Medium 500Descriptor, names, navigation, values, captions
Bold 700Wordmark, headlines, labels, buttons

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & – − ° / ( )

Regular 400Albiziaلبخ 123

Body

Medium 500Albiziaلبخ 123

Names, values

Bold 700Albiziaلبخ 123

Headlines

WILS Sans in Regular, Medium and Bold. Digits stay Western in Arabic (see 4.5).

4.2 · Type scale

Eight steps. That is all.

Headlines are Bold with tight leading and negative tracking. Running text is Regular. Labels are small, Bold, uppercase and spaced open.

Below 1100 px the three largest steps and the lede step down. Keep prose to a line length of 720 px.

Display96 / 0.92 · 700
≤1100 px: 60
Albizia
لبخ
H164 / 0.95 · 700
≤1100 px: 40
Plant sheet
بطاقة النبات
H240 / 1 · 700
≤1100 px: 30
Dimensions
الأبعاد
H324 / 1.15 · 700
Drawings and photos
الرسومات والصور
Lede19 / 1.5 · 400
≤1100 px: 17
Every landscape plant, drawn to one standard.
كل نبات مرسوم وفق معيار واحد.
Body17 / 1.5 · 400
A fast-growing shade tree for hot, dry sites. It is planted along streets across the Gulf and North Africa.
شجرة سريعة النمو تناسب المواقع الحارة والجافة. تُزرع على جوانب الطرق في الخليج وشمال أفريقيا.
Small14 / 1.45 · 400
Drawing by WILS. Free to use with credit.
رسم من ويلز. مجاني مع ذكر المصدر.
Label11 / 1.3 · 700 · +0.14 em
caps · Arabic 13 · 500 · no caps
Height · Spread · Water
الارتفاع · الانتشار · الماء
Scale values
StepSize≤1100 pxLine heightArabic line heightWeightTracking
Display96600.921.25700-0.035 em
H164400.951.3700-0.03 em
H2403011.4700-0.02 em
H324241.151.5700-0.01 em
Lede19171.51.84000
Body17171.51.84000
Small14141.451.74000
Label11 (Arabic 13)111.31.6700 (Arabic 500)+0.14 em

Sizes in px. Each step has four tokens: size, line height, weight and tracking, plus an Arabic line height. They are in the tokens file in chapter 11.0.

4.3 · Latin plant names

Upright, in Bold.

Botanical convention uses italics for Latin names. WILS does not. It has one font and no italic, so the binomial is set upright in Bold.

The genus starts with a capital. The species is lower case. The common name follows in Medium.

Rule

Mark the name up as <i lang="la" dir="ltr"> and set font-style: normal. Never slant it.

Binomial

Albizia lebbeck

Lebbek tree · لبخ

Binomial in WILS Sans Bold, common name in Medium.

Albizia lebbeck
Do

Upright Bold. Genus capital, species lower case.

Albizia Lebbeck
Don’t

Capitalise the species.

ALBIZIA LEBBECK
Don’t

Set the name in capitals.

4.4 · Arabic

Same sizes, more room.

Arabic uses the same sizes as English. It gets open line height, so the marks above and below the line do not touch.

Never space the letters out. Never use capitals or uppercase styles. Labels are 13 px Medium instead of small caps.

Put lang="ar" on every Arabic string and dir="rtl" on Arabic pages. Wrap Latin names and units in <bdi> so they are never split.

Arabic rules
SizeSame as English
Line heightBody 1.8, headings 1.25 to 1.5
Tracking0
CapitalsNone
Label13 px, 500

الأبعاد

اللبخ

شجرة ظل للمواقع الحارة

شجرة اللبخ (Albizia lebbeck) تتحمل ملوحة تصل إلى 8 dS/m في التربة، وتصل إلى ارتفاع 15–20 م.

Arabic page text. The Latin name and the unit are isolated, and the range is set left to right so it does not read 20–15.

English-led line with Arabic inside

The Lebbek tree (لبخ) tolerates salt up to 8 dS/m.

Mixed text keeps each script in its own run.

4.5 · Numerals

0 to 9 in both languages.

Use Western digits in English and in Arabic. A value then reads the same in both, and the data has one numeral system. Eastern Arabic digits are never used.

In tables and dimensions use tabular figures, so digits line up in columns. Use a true minus sign and an en dash for ranges, with a non-breaking space before the unit.

Write it this way
WriteNot
15–20 m15 - 20m · 15 to 20 meters
−2 °C-2C · minus 2 degrees
1,2401.240 · ١٬٢٤٠
15–20 م١٥–٢٠ م
Rule

Set font-variant-numeric: tabular-nums in every table.

15–20 m

Range, in English

15–20 م

Range, in Arabic. Same digits.

DimensionValue
Height15–20 m
Spread12–18 m
Salt tolerance8 dS/m
Lowest temperature−2 °C
Trunk girth111 cm

Tabular figures keep the digits in a column on the same grid. Units are SI.