@Font-Face Attribute & Future of User Experience

fontface_voap_after

Persian websites in Farsi often face the problem of using a cartoon-like font, called TAHOMA, that is technically an English font that has an Arabic font set in the family.  The fact that the font is not Persian means that it is potentially difficult to read on some computers and also that it can be culturally insensitive.  Office of Digital and Design Innovation’s Manager of Design Steve Fuchs and Voice of America (VOA) Persian’s Bruce Bahmani explained the evolution of the project.

voap_before_and_after-1Before and after changing the VOA Persian font from TAHOMA to NASSIM

NASSIM is a Persian font face designed by Titus Nemeth, who created the typography for both BBC and al-Jazeera. “This is the first Persian font with special coding to optimize web legibility,” noted Fuchs, “it is therefore unique, and to my knowledge, the only Persian typeface in the world that is optimized in this way. It is only available from Rosetta type, which has an exclusive licensing agreement with Titus. This new font will bring the VOA Persian Service into typographic parity with the BBC and al-Jazeera.”  This font development is similar to the birth of Arial or Helvetica in English. “The results were stunning,” added Bahmani.

Fuchs further explained, “what makes this possible is the CSS @font-face attribute that has been around for a couple of years, but it is currently being heralded as an HTML5 thing.”  The @font-face attribute allows web designers to lease a font and then embed it into their websites using HTML5/CSS coding.  “Previously, we were limited to whatever people had (installed) on their web browsers… that often just gave us squares.  Now it looks like a printed page,” Fuchs explained.  “There are two costs associated with the face.   First all of the various versions of type file need to be generated so the file works across browsers; the second cost is a ‘rental’ of the face for a year—at a rate based on our web traffic.”

nassim-bigNASSIM Font Face

“No Persian web-safe fonts existed (previously), so the fonts that looked great in print did not perform correctly on the web,” Bahmani elaborated, “text spacing, character shape, kerning, and proportion of the letters to each other were not correct.  This means that, technically, text would often appear like this: ‘t HeQ  uiCk  brow nfox jumpedov er the.’”  According to Bahmani, “it was extremely important to find a font that did not appear cartoon-like or juvenile-like in order to give serious articles the credible appearance that they deserved.”

Also, because of the problems associated with the fonts, Persian readers unfortunately became accustomed to double scanning each line and trained their eye to compensate for the text errors.

Bahmani tested NASSIM against the TAHOMA font and concluded that “the results demonstrated a 5x increase in reading speed.”  However, some readers still double scanned the text, even when reading the NASSIM font face.  “Perhaps once they re-train their reading behavior to stop the double scan, their reading speed will increase.  Regardless, this is a huge advancement in the accessibility for Persian readers on the web,” said Bahmani.

The new Persian VOA site (as shown in the graphic above) “was extremely well received and many users commented on how much better the site looks and how much more readable the text appears; there are no spacing, no kerning, and no proportion flaws,” added Bahmani.  Fuchs acknowledged that no matter how old a browser is, the user will still have an adequate experience.  Although the @font-face attribute will likely be a standard on all web browsers in the future.

As the Persian VOA website audience grows, Bahmani hopes that the website will serve as a showcase for the new, clear Persian font.  Perhaps with greater awareness of the advancement of such fonts, other developers will increasingly use NASSIM-like fonts “on larger sites like Wikipedia, Google, Facebook, or Twitter,” expresses Bahmani.  These sites currently offer Persian and Arabic language content, but they do not yet offer web-safe and universally easy-to-read fonts faces.

“As you know, more dialog leads to good things,” Mr. Bahmani optimistically added.

(Thank you to Bruce Bahmani and Steve Fuchs for their contributions to this post.)

(The foregoing commentary does not constitute endorsement by the US Government, the Broadcasting Board of Governors, VOA, MBN, OCB, RFA, or RFE/RL of the information products or services discussed.)

The following two tabs change content below.
April Deibert

April Deibert

April Deibert is the Multimedia Blogger/Producer for the Office of Digital & Design Innovation. Follow her on Twitter: @BBGinnovate and @AprilDeibert.

Leave a Reply

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

* Copy This Password *

* Type Or Paste Password Here *