Arabic web design and web fonts

Going a little way towards displaying Arabic is a native way creates a delightful user experience. Arabic Web-fonts, layout, and language CSS help create that experience.

header

An Arabic speaking translator and web content-producer recently told me

The state of web support for Arabic and other right-to-left language speakers has historically been so poor, that making efforts to properly display their language can create an exceptionally delightful experience for the users.

In the course of development for a multi-language website, I’ve had the wonderful opportunity to explore some of the ways to create “delightful experiences” for these users, mostly focusing on font-selection and typography, and page layout.

Font choice and Typography

System Fonts

The fonts used on the web for Arabic are unfortunately still limited to the default Ariel, Verdana, Tahoma and most of the time the font used is Tahoma because it is the most legible on the web. – http://www.smashingmagazine.com/2010/09/19/showcase-of-web-design-in-the-arab-world/

Web Fonts

Although there are many beautiful Arabic fonts (from calligraphic to modern), the selection of web-font choice is limited. While latin web-fonts are widely available from Google Fonts, Typekit, and other similar services — Arabic fonts are only currently (April 2014) available in Google’s “Early Access” program. This program  showcases fonts that Google will consider mainstreaming with their other Web Fonts, if they are popular and get enough usage. Therefore, fonts in this program have no guarantee of long-term availability.

Many fonts are available from the Early Access program, the following is a curated list with previews of Arabic Fonts. Because of possible limited availability, I’ve provided the previews in image format. Visit my CodePen for full code previews.

Amiri

amiri

Droid Arabic Kufi

droid-kufi

Droid Arabic Naskh

droid-naskh

Lateef

lateef

Scheherazade

shaherazad

Thabit

thabit

Layout

Arabic is a RTL (right-to-left) language. Not only is the text read and displayed from right-to-left, but pages are layed-out right-to-left as well. Ideally, an Arabic translation of an English page would not only flip the text, but “mirror” as much of the page as possible.

mirror-site

CSS

There are a few CSS rules to keep in-mind when developing Arabic (and other RTL) language web-pages.

direction:ltr|rtl (docs) changes the text flow of block level elements and text. It will not, however affect the layout of the page.

float:right|left Remember to float left things right, and right things left

:before :after Some things (like icons) in pseudo-elements can be repositioned by changing :before’s to :afters. These will often require custom CSS as many pseudo-elements are positioned relatively to their parent.

Author: Michael Jasper

Michael is a Web Developer located in Northern Utah. When not programming, he enjoys spending time with his family, exploring the great-outdoors, and hit-and-miss cooking experiments.

  • Seph

    Excellent article.

  • Pingback: BibSonomy :: publication :: Arabic web design and web fonts()

  • Great article! Thanks, Mike!

  • Somehow the comment I left two weeks ago was detected as spam, I don’t if by disqus or the author, maybe because I linked to other articles?

    I’ll repost it without the links, and hope it goes through, as I think I touched on two important misconceptions in this article that readers should know about.

    Here goes:

    Hello, nice article, thanks !

    I’m currently designing an English/Arabic website, and thought I’d point out two minor corrections though:

    – in general, unless you want to have RTL text in the middle of LTR text (and even then, the tag is more pertinent), W3C recommends you should not use the css “direction” property but instead the “dir” attribute on the tag: remember, no mixing presentation & content ;

    – :before and :after pseudo should not be altered/reversed, as they are automatically positioned like they should by the browser when using the dir attribute (but use inline-block display on them otherwise webkit won’t play along, thanks StackOverflow).

    For those using SASS, search for Tyson Matanich’s article

    For those still working with static CSS files, there are tools for that, google them (ie. “rtl2ltr”)

    Hope this precisions help the next person coming to your article! 🙂

  • Ameen

    For those using Bootstrap, there is an awesome project on github which makes BS works with RTL languages perfectly. Just search for ‘bootstrap rtl’.

  • Samir Sabri

    What about Hindi numbers? do we have to convert English numbers using javascript like this one? https://gist.github.com/hopewise/c1ab49258a2a9bf52c47

  • General Klopp

    Thank you!!!!!

  • Alaa Badran

    What about Font Face:
    https://www.fontface.me
    they have more than 140 fonts, Free and licensed

  • I am developing an arabic site for the first time and your article really helped me. Thanks 🙂

  • Harshid

     

    يطيب لأسرة الحكومة الإلكترونية أن تتقدم بخالص التهاني وبأطيب التبريكات إلى الأخت فاطمة سعيد المزروعي – مسؤول شعبة الموارد البشرية  من إدارة الدعم المؤسسي، بمناسبة  قدوم مولودها الجديد.

  • Hassan Aljeshi

    I know it has been 3 years since your wrote this article, but I just want to say that I enjoyed reading it 🙂