From Paper to Pixels: Challenges and Modern Solutions to Designing in Urdu

کیا آپ اردو اس طرح پڑھنا پسند کرتے ہیں؟

Ya aap Urdu iss tarha parhna pasand kartay hien?

Even while trying to compile and publish this blog, we struggle to align and present information in Urdu for the masses to consume. One sentence in the beautiful “Nastaliq” script is a challenge to incorporate in the vast digital ecosystem that we consume and interact with everyday.

70 million people speak Urdu as their first language with another 100 million people who speak it as their second language (source). The digital literacy for this population was less than 5% in 2019 according to the After Access Report. The picture that these statistics paint is plain and simple: 170 million people require the incorporation of Urdu in order for their digital literacy to improve.  In this blog, we will discuss the challenges and the need for Urdu typography in the journey from paper to pixels.

About Urdu Script

Let’s run a quick refresher course on our knowledge about Urdu script. The Urdu language consists of 40 distinct letters and an indefinite number of ligatures and diacriticals that are added as per need. Urdu has a distinct calligraphic style on paper called the “Nastaliq” script. Urdu calligraphy is an art form that has been practiced for centuries and the calligraphic nature is essential to Urdu culture. Ligatures and diacriticals are added above and below the letters to assist with pronunciation, enunciation, and correct interpretation of the Urdu vocabulary.

Combined, the nature of the Nastaliq script makes it difficult to be adopted for the digital ecosystem. The number of characters greatly exceeds the amount of characters displayed on a conventional QWERTY keyboard layout. Further, most typing fields are not designed to incorporate diacriticals above and below the letters and present challenges in spacing and alignment. Let’s discuss in detail what these challenges are from a designer’s perspective.

Challenges of creating digital fonts for Urdu

Urdu is written right to left, which is opposite to the conventional digital ecosystem (left to right text flow). This can make it difficult to design fonts that are easy to read and typeset.

Additionally, bounding boxes for fonts are very inconsistent depending on which font it is. Sometimes all the characters fit within the text bounding box. Other times, some characters hang out above and below the bounding box. This can make it difficult to align text and create consistent layouts.

To resolve these issues, baselines are critical when designing in Urdu. Most fonts do not have consistent baselines which makes it hard to adapt Urdu into digital landscapes. This has to be taken into consideration when designing digitally, since readability is affected.

Mixing Urdu and English fonts can also cause problems. For example, fonts need to be similar styles and sizes, and when switching between languages, those things become inconsistent. Numbers might fit design style in one language but not in another. Font sizes can’t be used interchangeably. They have to be adjusted when switching between languages.

Navigation and design language also needs to be consistent between both languages when designing a dual language application. This is so the mental model does not break when a user switches. The common pattern is to have navigation stay in the same place regardless of language.

Finally, center alignment may not work well in Urdu. Research has shown that reading Urdu when it is center aligned is difficult for some users. People don’t prefer this. Center alignment may work well in English but not in Urdu. When designing a dual language application, this has to be taken into account.

The Evolution of Urdu Typography

Despite these challenges, there are a number of high-quality digital fonts available for Urdu. These fonts have been designed to address the specific challenges of Urdu typography, and they can be used to create clear and readable text.

Modernist fonts, such as Google's Inter, are designed for digital use. They have more consistent baselines and unmodulated stroke widths, which makes them easier to read. Nastaliq scripts are more widespread in traditional media, so users are more comfortable reading them. In our work at Ideate, initial testing with intended users of Uredu- based digital products has shown that low-literatecy users do not have any difficulty reading modernist fonts.

The development of such fonts has brought the following advantages while designing in Urdu:

• Fonts designed for Urdu have consistent baselines and bounding boxes, which make it easier to align text and create consistent layouts.
• Similar styles and sizes for fonts are now available when switching between languages. This helps to create a consistent look and feel for digital products.
• Designers can now more confidently keep navigation and design language consistent between English and Urdu. This enables users to understand how to use applications and avoid confusion.

Conclusion

As a result of advancements in digital Urdu fonts, designers have been able to create a positive impact on digital literacy for the Urdu speaking community. According to a report by DataReportal, Pakistan’s internet penetration rate stood at 36.5 percent of the total population at the start of 2022. This was a major improvement compared to just four years ago. 

The improvement of digital design options in Urdu inspires hope for a lot of people as the nature of work changes rapidly across the world. Users are now more encouraged to interact with digital products and services and have also shown an increase in online jobs, as well as jobs that require the use of smartphones and digital products. 

With the collective efforts of the design community in Pakistan,

ہمیں امید ہے کہ چیزیں بہتر ہوتی رہیں گی (we hope things will continue to improve).