On Arabic fonts

Arabic fonts has been a problem that kept being mentioned through out the course of the first Arab Techies Gathering, December 2008. You hear it all the time, no one is ever satisfied with the font used on this website or that. And if you are a web designer, I'm sure that's one thing that you hear from your clients all the time, to start thinking about changing your career.

Part of my tasks as community coordinator is to initiate activities and help members realise their individual projects, especially if they solve common problems.

We had a common problem (Arabic fonts) and we had an enthusiastic Arab Techies member working on it by himself. I saw an opportunity for Arab Techies to intervene and help solve that problem, so again I decided to set up a meeting to discuss this problem with various stake holders.

I went to meet with Artist and Typographer Mohieddine ElLabbad to tell him about our initiative and invite him to the Arabic fonts meeting we are planning to hold. He was enthusiastic to participate and he invited us to hold that meeting in his studio, which we did. He also invited his assistant, Ossama Bahr to attend since he is a fonts maker, with lots of experience on the subject.

We held that meeting in mid may, a week before our Code Sprint.

List of attendants:
  • Manal Hassan: Arab Techies community coordinator
  • Alaa Abd ElFattah: Arab Techies co-founder
  • Khaled Hosny: Open Source fonts maker, studying calligraphy and its history, and Arab Techies member
  • Moheieddine ElLabbad: Egyptian artist and typographer
  • Ossama Bahr: Fonts maker
  • Abdel Karim Mardini: Manager of Open Source company (OpenCraft) and member of the African network for localisation (ANLoc) working on creating Open Source fonts that supports African languages.
  • Zeinab Samir: Web designer and developer, and Arab Techies member
  • Ali Shaath: CEO of TEAM, who spent some time in evaluating existing Arabic Open Source fonts

We had a long meeting, discussed several issues and kept jumping and returning to a few points, I'll try to summarize it here:

The problem is bigger than what we thought, and the quality of Arabic fonts and typefaces has deteriorated in general, compared to those used in the printed media of the twenties and the thirties. Arab Techies will focus on what can be done to improve the state of fonts used on the web.

The problem

Limitations of the existing Arabic fonts:

  • Websites use non standard fonts:
    • Therefore the web designer can not guarantee that the website will look the same on different resolutions, multiple operating systems or devices.
    • Standards guarantee browser support to 5 font families which are Latin oriented (serif, sans serif, monoscript, cursive and fantasy)
    • For support on most advanced devices, it's advised to limit yourself to a set of 11 fonts
    • The 5 font families and the 11 fonts are not relevant to Arabic
  • Full Unicode support is not guaranteed
  • Arabic fonts dont scale gracefully (a font can look good on a specific size, but is unreadable on other sizes)
  • The ratio between English to Arabic glyphs in multilingual websites

What needs to be done

  • Document a minimum set of fonts to be used for designing websites (collaborative work, please add your input)
  • Documenting best practices (collaborative work, please add your input)
  • We need to come up with our terminology list for that issue, in order to discuss it and document it properly. (Khaled Hosny?)
    • What does hinting and kerning mean in Arabic (translation)
    • How are they relevant in designing Arabic fonts (examples)
  • Research and discussion on what does serif, sans-serif, mono, bold, italic mean in the Arabic text, when would they be used, to be able to choose/design the right Arabic font accordingly
  • Designing a new Arabic font(s) with the following criteria:
    • For it to be available for all platforms it has to be open source
    • Needs to be high quality to be comfortable for reading
    • Reasonable on screen and in print
    • Looks good on different sizes
    • It could be perfect in one thing but it has to remain readable in all media and all sizes
  • Push to standardize the font(s) and make available for every platform
    • Prepare and make available instructions for installations
    • Push that these fonts be bundled with different software


On Fonts, in general

  • Fonts are designed according to the need, for example the font used for Metro station signs is very readable even when the metro is moving
  • The difference between titles and normal text is not well defined, titles should use different fonts and different sizes

On Arabic fonts and typefaces

  • kofi is linear
  • Naskh, Req3a, Tholoth, Diwani are styles not fonts

On Calligraphy

  • No understanding to the difference between calligraphy and typography
  • Calligraphy is designing a word for an advert for example not designing all the letters (ex: CocaCola)

Designing a new font

Ideas before designing a new font

  • Learn from typefaces used in typewriters
  • Learn from typefaces used in old print houses
  • Learn from printed media especially of the twenties and the thirties
  • The font used in Cairo Metro service is suitable to be used as a sans-serif font
  • Try and imitate some of the fonts that we are used to

Steps for designing a new font

  • Need a team of designers and calligraphers, the calligraphers as consultants
  • Steps:
    • Designing: coming up with a uniform design for all the glyphs
    • Digitizing: drawing the glyphs on computer
    • OpenType programming: transferring it to OpenType which involves kerning (takes less than 2 weeks for simple fonts)
  • Hinting, is the lengthy part (we were not sure what it requires)
  • Testing the font (by beta testers)
  • Designing the glyphs is done by one person not by a team
  • It takes 2 hours to design a glyph, for Arabic we have:
    • Arabic alphabet is 28 letters and 4 glyphs per letter
    • Ligatures like "لا - لله - لم - في - لي - مح"
    • Numbers
    • Punctuation symbols
    • Total for design is less than 300 hours

Small tip: Look at @font-face

This is a serious issue for several non-Latin character sets. While you have defined the typographical challenges well, at least the adoption issue might be slightly easier as the latest versions of Firefox and Safari support embedding fonts using the new @font-face CSS rule. You can see it in action and read more about it here.

Indeed a great cause, keep up the good work. Your practice and methods are truly inspiring.

» |
Manal Hassan's picture

Thanx a lot for the tip

This is the kind of stuff that needs to go for into our documentation.

Thanx again

» |

For non @font-face complient browsers JS can come to the rescue


This blogpost documents the use of the open source Cufon library to embed fonts in non @font-face supportive browsers. Cufon achieves that using Javascript and Canvas tag / SVG - all open standards. Cufon is a pretty new open source project but it is already considered the best option out there (other options include Sifr - using Flash & Facelift - generating png images on the fly).

I haven't tried Cufon with Arabic, but it might be a very worthy project to contribute to, to make sure designers can use it for Arabic fonts too.

» |

Real Web Type in Real Web Context

Here's another important reference for the research. The issue is to make sure the screen font actually looks good in the browser. This Web Font Specimen approach might be something worth translating to Arabic and using to test across browsers for a viable typographic solution. Obviously the calligraphic origins of the Arab letter makes it even less anti-aliasing friendly than Latin letters. This is not an easy task.

» |
أحمد غربية's picture

Why wasn't I invited?

Can you elaborate on why naskh, reqaa, etc. are styles and not fonts? By style, do you mean type face?

Manal, I would have loved to attend that meeting :(
Why wasn't I invited?

» |
Manal Hassan's picture

Oh I'm so sorry ya Ahmad

ma3lesh ya Ahmad, didnt think you would be interested to attend that meeting.

If you are really interested to work on the topic, can you help us in the documentation? can you work closely with Khaled to shape the next step?

It turned out to be quite a complex problem and we are back to Khaled working on it by himself.

We need to think and discuss what Arab Techies can contribute to solving this problem. What action needs to be done to take us a step forward.

As for Naskh, Reqaa, etc. are styles not fonts, I think that's because you can have multiple fonts which are Naskh or Reqaa or whatever. I think you can treat them kind of font families like serif and sans-serif? Not sure I'm using the right terminology.. I hope you get what I mean.

» |
Hamoud Aissam's picture

منال تحدثت منذ فترة مع مصمم

منال تحدثت منذ فترة مع مصمم الخطوط حسن حول خط عربي يتم تصميمه لكي يستخدم بشكل رسمي على أنظمة التشغيل وليكون بديلاً عن الخطوط العربية التي يستعملها المصممون حاليصا في تصاميم المواقع.

أظن أنه من المهم الاطلاع على رد المصمم حسن على هذا السؤال:

بالمناسبة بالنسبة لتصميم الخطوط.. التصميم الأولي يستطيع أي مصمم متمكن من القيام به مع وجوب توجيهات من قبل خبير في التايبوغرافيا.. هذه تجربتي الشخصية في تصميم خط بنفسي من الألف إلى الياء.. بقي للخط الشق الثاني من العمل وهو على برنامج مثل الفونت لاب وتحويله للعمل على النظام.. أو كما ذكرت هنا في خطوات تصميم الخط.. أنظري النتيجة:

الخط استغرق مني تقريبًا شهر من العمل ولكن بتقطع

http://www.flickr.com/photos/[email protected]/3364158862/
http://www.flickr.com/photos/[email protected]/3363339401/

» |
Manal Hassan's picture

بس هو رأيه أن مفيش مشكلة و أن

بس هو رأيه أن مفيش مشكلة و أن تاهوما كويس!!!

» |
Hamoud Aissam's picture

نسيت التوضيح.. ليس القصد هنا

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

Reasonable on screen and in print

المسألة في رأيي متعلقة بالعرض على الشاشة اكثر منها بالطباعة.. وشايف إنها أصعب مرحلة في يناء الخط اللي عاوزينو

» |
Manal Hassan's picture

ممكن يا عصام تشرحلنا بالظبط

ممكن يا عصام تشرحلنا بالظبط ايه هو المقصود بـ "العرض البكسلي للويب" و "نيتها التكعيبية البكسلية"؟؟

» |

Font Hinting

اظن ان عصام يقصد عملية مؤائمة المحارف مع بيكسل الشاة اثناء التصغير والتكبير للخط
هذه العملية تسمى font hinting وهي من ادق مراحل تصميم الخطوط ويتجاهلها للاسف معظم مصممي الخطوط العربية، ما عدا بعض المحترفين.

» |
أحمد غربية's picture

Of course

Khaled has been telling me about his work on fonts, and I'm naturally interested. I'm also encouraging him to document his findings about the interesting history of Arabic typography.

I see that we do need to understand and clarify terms and document that. I'll see what I can do.

» |
Manal Hassan's picture

I really think you can help

I really think you can help in the terminology issue, and I think it will take the discussion to another level. It was not very easy to write this post, I kept asking Khaled about which terms to use in which cases (thanx Khaled :)

And yes I think Khaled should document his findings about the interesting history of Arabic typography, but also about the process of having a good font, what he thinks is needed, what he has done so far and what he plans to do. May be with identifying these other ppl can help. PLEASE ya Kaled :)

» |

special characters

I appreciate your efforts in coming up with a nice Arabic font. I for one have faced this problem several times when working on various projects. The best font I came across which is free to use is Scheherazade:

When designing your font please consider supporting special characters that are used in Qur'anic script. These are defined in the Unicode chart: Honorifics and Koranic annotation signs, 34 characters in total.


» |
Khaled Hosny's picture

Well, actually the very

Well, actually the very reason for me working on this project is to develop a font suitable for typesetting Quran :)

» |