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.

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 web-font @import url(http://fonts.googleapis.com/earlyaccess/amiri.css); .amiri{font-family: 'Amiri', serif;} 1 2 @import url(http://fonts.googleapis.com/earlyaccess/amiri.css); .amiri { font-family : 'Amiri' , serif ; }

Droid Arabic Kufi

Droid Arabic Kufi web font @import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css); .droid-arabic-kufi{font-family: 'Droid Arabic Kufi', serif;} 1 2 @ import url ( http : //fonts.googleapis.com/earlyaccess/droidarabickufi.css); . droid - arabic - kufi { font - family : 'Droid Arabic Kufi' , serif ; }

Droid Arabic Naskh

Droid Arabic Naskh web font @import url(http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css); .droid-arabic-naskh{font-family: 'Droid Arabic Naskh', serif;} 1 2 @import url(http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css); .droid-arabic-naskh { font-family : 'Droid Arabic Naskh' , serif ; }

Lateef

Lateef web font @import url(http://fonts.googleapis.com/earlyaccess/lateef.css); .lateef{font-family: 'Lateef', serif;} 1 2 @import url(http://fonts.googleapis.com/earlyaccess/lateef.css); .lateef { font-family : 'Lateef' , serif ; }

Scheherazade

Scheherazade web font @import url(http://fonts.googleapis.com/earlyaccess/scheherazade.css); .scheherazade{font-family: 'Scheherazade', serif;} 1 2 @import url(http://fonts.googleapis.com/earlyaccess/scheherazade.css); .scheherazade { font-family : 'Scheherazade' , serif ; }

Thabit

Thabit web font @import url(http://fonts.googleapis.com/earlyaccess/thabit.css); .thabit{font-family: 'Thabit', serif;} 1 2 @import url(http://fonts.googleapis.com/earlyaccess/thabit.css); .thabit { font-family : 'Thabit' , serif ; }

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.

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.

body{ direction:rtl; //displays text direction as right to left } 1 2 3 body { direction : rtl ; //displays text direction as right to left }

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.