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.

Horizontal vs. Vertical button groups

Button groups are an important part of user interface design, but choosing their orientation can often be difficult. I’d advocate that horizontal groupings are better in most cases — consider this:

Imagine that each element on the page is assigned a “Danger Zone” — and area where within one unit of margin of error,  an undesirable action will occur. In mobile interfaces, this unit is the width of a finger, or the accuracy of a touch on the device.

Horizontal vs Vertical button groups
The orange area represents the “Danger Zone”

The danger zone in button groups extends along the edge of the button that is touching another item. As represented above in orange, the danger zone for a vertical button group extends across the width of each button — covering nearly 50% of the surface. This reduces the touch-safe portion of the button to a slim area, greatly diminishing the effect of “friendliness” in the minds of the users. Clicks to these buttons must be precise, and the consequence is not just the inconvenience of a missed button, but the danger of a click on the wrong one.

Consider the horizontal button group: the danger zone only extends over a small percent of each button. Users can click or touch imprecisely and without stress. Additionally, horizontal button groups easily convey a “forward” and “backward” action, which lends itself well to buttons like Save or Cancel.

One major offender is jQuery Mobile — arguably the defacto  standard framework for mobile development. By default, button groups in jQuery Mobile are vertically oriented. Although it is simple to switch the grouping to horizontal, some are under the false impression that the default option is the best choice.

jQuery Button Groups
How easy is that to “Fat Finger”?

Facebook Black Theme (IDE Theme)

Using the Google Chrome plugin Stylish, users can add custom CSS to be applied to any domain. I’ve created a dark CSS theme for Facebook, called FaceBook IDE

Within Stylish (found in the Chome menu bar):

  • Write a new style
  • Paste the theme into the box
  • Add the domain “facebook.com” into the “applies to” field
Facebook Black screenshot
The theme should automatically apply to your Facebook news feed. This theme is still in development, and has areas on other Facebook pages, which are not yet styled.

 Updates:

11/21/2012

  • darkened modal popup for photos
  • pinkified like links