Lesson 4 / الدرس 4

Choosing a typeface / اختيار الخط

Most of the difference between typefaces is invisible at reading size. What matters is whether it has the weights you need, the characters your readers write, and — on a bilingual site — whether it has a partner in the other script.

معظم الفرق بين الخطوط غير مرئي في حجم القراءة. والمهم هو: أفيه الأوزان التي تحتاجها، والحروف التي يكتبها قراؤك، و — في موقع ثنائي اللغة — أله شريك في الكتابة الأخرى؟

Beginners spend hours choosing between two typefaces that will look identical to every reader at 16 pixels, and no time on the questions that decide whether the choice works at all. A typeface is a tool with a specification, and three items on that specification matter more than how it feels.

The three questions that decide it

Does it have the weights you need? A hierarchy needs at least a regular and a bold, and usually a third. A beautiful face with one weight cannot build a hierarchy at all.
Does it have your readers' characters? Arabic, accented Latin, currency symbols, the numerals you use. A face that drops back to a system font for half your text has made the decision for you.
Can you legally use it, and can you afford the bytes? A licence that forbids web use, or four weights at 90KB each on a phone connection, are both ways of choosing wrongly for reasons that have nothing to do with looks.

Two families is usually one too many

<div style="max-width:340px">
  <!-- three families: nothing belongs to anything -->
  <h3 style="font-family:Georgia; margin:0">Order confirmed</h3>
  <p style="font-family:Verdana; font-size:14px">Delivery on Thursday</p>
  <p style="font-family:'Courier New'; font-size:14px">Order #4471</p>
</div>

<hr>

<div style="max-width:340px; font-family:system-ui">
  <!-- one family, three registers: weight and size do the work -->
  <h3 style="margin:0; font-size:20px">Order confirmed</h3>
  <p style="font-size:15px; margin:6px 0 0">Delivery on Thursday</p>
  <p style="font-size:13px; color:#666; margin:6px 0 0">Order #4471</p>
</div>

The second is not plainer, it is quieter — and quiet is what lets the hierarchy speak. One family with three weights gives you more usable difference than three families with one weight each, and it downloads a third as much.

When you do use two, give them different jobs and make them obviously different — a display face for headings against a plain one for text, not two sans-serifs that a reader will experience as one slightly inconsistent face. If two faces are similar enough that mixing them looks accidental, it is.

Try it live / جرّب بنفسك

<h1>Choosing a typeface</h1>

<p><strong>Weights available:</strong> </p>
<p><strong>Covers Arabic:</strong> </p>
<p><strong>Licence and weight in KB:</strong> </p>

<h2>My choice</h2>
<div style="font-family:system-ui"></div>

<h2>Rejected, and why</h2>
<div></div>

Preview / المعاينة

Check yourself / اختبر نفسك

1. Why is one typeface with three weights usually better than three typefaces?

2. A chosen typeface has no Arabic glyphs. What does a reader see?

3. When is using two typefaces a good idea?

Your task / مهمتك

Choose a typeface for a bilingual page and defend it against the three questions. Show the same block of real content — an Arabic name, an English name, a price and a date — set in your choice and in one you rejected.

اختر خطًا لصفحة ثنائية اللغة ودافع عنه في ضوء الأسئلة الثلاثة. وأظهر كتلة المحتوى الحقيقي نفسها — اسم عربي، واسم إنجليزي، وسعر، وتاريخ — بخطك المختار وبخط رفضته.

The three questions answered for your choice, in writing الأسئلة الثلاثة مُجابة عن اختيارك، مكتوبةً
The same real content shown in both faces, including Arabic المحتوى الحقيقي نفسه معروضًا بالخطين، والعربية منه
A reason for the rejection that is not about taste سبب للرفض ليس عن الذوق