Arabic web design and web fonts

Share on Facebook0Share on Reddit17Tweet about this on TwitterShare on Google+0


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. –

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.



Droid Arabic Kufi


Droid Arabic Naskh









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.



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.

Share on Facebook0Share on Reddit17Tweet about this on TwitterShare on Google+0

9 responses to “Arabic web design and web fonts”

  1. Seph says:

    Excellent article.

  2. Shawn Barker says:

    Great article! Thanks, Mike!

  3. 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! 🙂

  4. Ameen says:

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

  5. Samir Sabri says:

    What about Hindi numbers? do we have to convert English numbers using javascript like this one?

  6. General Klopp says:

    Thank you!!!!!

  7. Alaa Badran says:

    What about Font Face:
    they have more than 140 fonts, Free and licensed

  8. Gökmen says:

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

Leave a Reply

Your email address will not be published. Required fields are marked *