2

The Design of Readex Pro

 1 year ago
source link: https://material.io/blog/readex-pro-legibility-arabic-type-design
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

The Design of Readex Pro

Exploring the boundaries of legibility in Arabic type

Susanna Zaraysky, Content Strategist, Fonts
Rebecca Hsiao, Interaction Designer, Fonts
GBChWaUI0XZoKc0B40Y2te4I1ig5jOfg_dliy6JLEMNduG1v3IG_Y0_0I5ggFT1AXTbFNOXuONOfc5v1VN7khfmwZ7C1OxzIvpdDkWCeU-3ePuRYnX4=w1400-v0

النسخة العربية

Readex Pro is available on Google Fonts.

Could a new typeface make it easier for the more than 400 million Arabic speakers around the world to read?

Type designers Dr. Nadine Chahine and Thomas Jockin joined forces to find out. They created Readex Pro in Arabic using the methodology behind Lexend, made for Latin. The name Readex was chosen as a shortened form of “reading expanded.”

When Dr. Bonnie Shaver-Troup started the Lexend project, her goal was to help people to read more easily and fluently by reducing visual noise. The Lexend fonts have distinct letterforms, and offer the option to widen tracking (the spacing between letters) together with widening the shapes of individual letterforms themselves. This novel functionality is based on a theory known as the “Shaver-Troup Formulation,” which was described in detail in a 2003 USA patent application.

Possible impact

Chahine and Jockin knew that an Arabic typeface designed for enhanced legibility and readability might have a major impact on literacy in the Arab world, home to some of the lowest adult literacy rates, especially for female populations.

John Daniel, former UNESCO Assistant Director General for Education, warned that “only 62.2% of the Arab region's population aged 15 and over were able to read and write in 2000-2004, well below the world average of 84%, and the developing countries' average of 76.4%”. According to Arab Weekly, the literacy rate among women and girls of all ages in Arab countries is estimated at 74%, the lowest in the world.

“Distinguishable letterforms could make Lexend’s Arabic expansion to Readex Pro ideal for Arabic speakers learning to read. There is potential to support those with visual impairments, dyslexia, reading challenges, and people early in their journey to become readers regardless of their age. When we take away barriers to reading, the whole world benefits,” said Dr. Shaver-Troup.

There are at least 2.2 billion people with vision impairments worldwide, according to the World Health Organization (WHO). Dyslexia, neurocognitive conditions that makes reading more difficult for some people, may impact 20% of the global population.

Inspiration to expand Lexend to Arabic

Before starting the Readex Pro project, Jockin worked with Shaver-Troup to make a new Lexend font, leveraging the power of variable fonts technology. He learned that there was a link between the clarity of how letters looked to readers, and literacy itself.

“If typography has any intrinsic purpose, it is to be read. If I could do something to help more people to read, how could I not be compelled to take action?” said Jockin.

While learning about Shaver-Troup’s research into improved reading through font style and character spacing, Jockin recognized that the findings were similar to Dr. Nadine Chahine’s dissertation on legibility in Arabic.

Chahine, a native Arabic speaker from Beirut, Lebanon, has an academic and professional background in type and literacy. She conducted Arabic legibility research for her PhD at the University of Leiden (Netherlands) and conducted legibility research in the Chinese and Latin writing systems with the MIT AgeLab (United States).

“My interest in legibility research comes from my dedication to support reading in Arabic, as it is a vehicle for economic and societal change in the Middle East. I have designed other font families that are focused on improving readability, such as Amariya and Afandem. My main drive is to encourage people to read more, given how young the Arabic speaking population is, and all the economic and social challenges our region faces.”

Chahine and Jockin asked Google Fonts to commission them to translate the ideas and methodology behind Lexend into Arabic, and begin the Readex Pro project.

"I am passionate about libre fonts projects that advance the field of typeface design. Open access is essential for human progress. With Thomas’ prior experience in the Lexend project, started by Dr. Shaver-Troup, along with Nadine’s academic pedigree in applying reading science to the Arabic writing system, I thought this libre font project had high merit for financial support," said Dave Crossland, type director for the Google Fonts team.

Challenges in translating concepts formulated for Latin into Arabic

To start the project, Chahine and Jockin considered how to re-apply the ideas in “Shaver-Troup Formulation” from Latin to Arabic. The formulation focuses on the differences and relationships of the width of a glyph to the spaces between glyphs. The combination of widening the spaces both within and between letters is called “Hyper Expansion”.

“The treatment of spacing between Arabic letters requires much more manual attention, compared to Lexend’s Latin design. Arabic operates with connected letters (similar to ligatures in Latin), instead of individual and isolated letters. A formula alone would not create beautiful Arabic shapes. The hand, along with the eye, were necessary,” explained Jockin.

There weren’t any existing Arabic typefaces made with hyper-expansion, where letters get wider and farther apart from one another. The designers had no references for how to translate the letterform shapes from their regular width and normal spacing, to something hyper-expanded. It has never been done before.

Custom Naskh style with geometric shapes

To match the style of the Arabic typeface to Lexend’s Latin geometricsans serif design, the type designers looked at various Arabic typographic genres or classes in order to choose a suitable direction. Most Arabic typefaces are either in the Naskh or Kufi genres, or a hybrid of both. Kufi typefaces have a geometric style that is more suitable for display typography, such as large titles. Naskh is the de facto text style, with shapes that look handwritten with a pen. While Kufi would have been the obvious choice to harmonize with Lexend because it is a geometric style, the design would have been limited to mostly headlines, and not for general reading.

Chahine and Jockin followed the Naskh style used in newspapers and magazines. To add a geometric quality to the typeface, they made the strokes uniform in width – with a motion that feels rigid, rather than flowing.

These examples with the letter س (seen) for the “s” sound, ج (jeem) for the “j/g” sound, and ب (beh) for the “b” sound, show how Readex Pro mixes the styles of Naskh seen in magazines with the calligraphic shapes seen in more geometric Naskh designs.

Amiri: A calligraphic Naskh typeface for books and other running text.

Three Arabic letters

Amiri has several calligraphic features: (1) Fluid structures (2) Thin stroke based on pen movement (3) Thick stroke based on pen movement (4) Softly curved horizontal baseline

Sakkal Majalla: A Naskh typeface often used in magazines.

Three Arabic letters

Sakkal Majalla has a magazine style (1) Strokes are less fluid (2) Some structures are similar to calligraphic Naskh (3) Flat horizontal stroke instead of gentle curves

Readex Pro: Magazine style, with geometric influence

Arabic letter in blue text on white background

The line (1) points to subtle pen influences, and references the angle of the pen and the way it moves to create the shape.

Arabic letter in blue text on white background

(1) Instead of a shallow, waved line, like in calligraphic Naskh, the top is curved and open, adding a geometric quality to the letter. (2) The curves are static using the typical Naskh structure, but treated in a controlled, geometric way.

Arabic letter in blue text on white background

(1) The almost constant thickness of the strokes is similar to the Latin counterpart of Readex Pro, derived from Lexend. (2) The baseline is flat and horizontal, following the Naskh magazine style, and brings the rhythm closer to the Latin. The diacritic (accent mark) is a rhombus, like in Naskh.

Depth and baseline

In addition to creating a custom Naskh with a contemporary blend of genre influences, the designers also had to implement adjustments to the Latin, such as the standard practice of increasing the vertical metrics of the font to accommodate how characters such as “ع” (ain, an unvoiced sound) go deep below the baseline.

Text labels showing the baselines and descenders for two letters

Comparison of the Latin lowercase “g” in Lexend compared to the "ع" in Readex Pro. (1) Baseline (2) Latin descender (3) Arabic descender

Spacing options

Readex Pro is a variable font with a Hyper Expansion axis, that ranges from 0 to 100. As the axis value increases, the letters become wider and looser. The most narrow option is 0, and the widest setting is 100. Readers can choose which value is the easiest to read for themselves individually.

The following are examples of various spacing options.

​​In the Arabic writing system, letters at the beginning and middle of a word have to connect to each other, like Latin ligatures do. The Readex Pro designers had to create enough space between Arabic letters to allow for these connections.

Red boxes and circles and text labels showing differences between Arabic and Latin letters

(1) Narrow spacing: 0 (2) Widest spacing: 100 (3) Extended connection: short connection [right] and wide connection [left] (4) Extended spacing: narrow spacing [left, axis value 0] and wide spacing [right, axis value 100]

Comparison of extended connection in Arabic [left] and extended spacing in Latin [right] using Readex Pro Arabic and Readex Pro Latin in the Regular 400 weight. In the Arabic word مرحبا [“marhaba”, meaning “hello”], the initial letter ﻣـ [mim] connects on the left side.

Seven lines of text ranging from the shortest line at the top and the longest line at the bottom.

English Translation of Arabic text: "At that time, the spoken word was mightier than the sword." | Spacing options: (1) 0 (2) 40 (3) 56 (4) 64 (5) 72 (6) 80 (7) 100

As a variable font, the Hyper Expansion axis allows for customized spacing options in between letters and words.

To find the amount of hyperexpansion that works for you, on the Google Fonts specimen page for Readex Pro navigate to the Type Tester and use the slider to control the Hyper Expansion axis value.

Animation of selected text changing as the user moves the hyper expansion slider.

GIF of the Type Tester

During the initial release of Lexend, Crossland worked with Jockin and Dr. Shaver-Troup to support software that does not yet support variable fonts (such as Google Docs and Slides). This was done by making seven hyper-expansion options available as separate font families, each with only a range of weights and a fixed amount of hyper-expansion. They are named in alphabetical order: Lexend Deca, Exa, Giga, Mega, Peta, Tera, and Zetta. Readex Pro is not currently available in this way, but only as a variable font.

Creating Readex Pro in Latin

The duo wanted to match the typographic color (how light or heavy text appears) between Arabic and Latin. After designing Readex Pro, they found the weights of the Lexend fonts did not match the weights of their Arabic design. They decided to make a derivative of Lexend so Readex Pro fonts include a Latin glyph set.

“We harmonized the Readex Latin weights to the Arabic design. Latin typefaces have a much thicker bold weight compared to Arabic ones, so Readex Pro’s Latin Bold is lighter compared to Lexend’s Bold,” explained Jockin.

In the image below, the words "thank you" in English and "شكرا" (“shukran”, Arabic for “thank you”) appear to have the same visual density, especially in the boldest weights.

Four white boxes with black text on blue background

Bold and Light versions of the words “Thanks” in English and "شكرا" in Arabic (1) Boldest weight, default Hyper Expansion [axis value 0] (2) Boldest weight, maximum Hyper Expansion [axis value 100] (3) Lightest weight, default Hyper Expansion [axis value 0] (4) Lightest weight, maximum Hyper Expansion [axis value 100]

Designing Readex Arabic had a positive and unintended consequence for Jockin: It motivated him to learn Arabic. Growing up in Long Island, New York in an Egyptian family, he had heard Arabic at family gatherings. However, he hadn’t learned to speak it fluently.

“During the COVID lockdown, I hired an Arabic tutor to gain a more mature understanding of the language and to learn to read the Koran and Islamic scholars in Arabic. I found Readex’s wider settings very helpful in my own reading and speaking exercises. The text I struggled to read in the narrower default setting was much easier for me to read when I changed the setting to be wider.”

Readex Pro is available on Google Fonts in Arabic and Latin, in weights from 160 to 700 and Hyper Expansion from 0 to 100.

Use Readex Pro on Google Docs and other Workspace products:

  1. Open the font menu and select "More Fonts"
  2. Type "Readex Pro” in the search bar
  3. Click on the family to add it to your fonts menu
Animation of text in a Google Doc. Cursor selects “More” Fonts menu, user types in “Readex Pro” in the search bar, selects font.

How to add Readex Pro in Docs

Dr. Nadine Chahine is an award-winning Lebanese type designer. She is the CEO at I Love Typography and the principal at Arabic Type. Dr. Chahine has a PhD from Leiden University (Netherlands), an MA in Typeface Design from the University of Reading (UK), and a MA in International Relations from Cambridge University (UK). Chahine's work was featured in the 5th edition of Megg's History of Graphic Design. In 2012 she was selected by Fast Company for its 100 Most Creative People in Business. In 2017, Creative Review selected her to be one of their Creative Leaders 50. In 2021, she served on the board of Type Directors Club in New York.

Thomas Jockin is a typeface designer and the founder of Readable Technologies, a company specialized in providing typography and support for the neurodiverse.  Thomas is also founder of the volunteer meet-up organization TypeThursday, who run monthly events for people who love type in many cities around the world. He is also an associate professor at Pratt Institute, and formerly adjunct lecturer at City University of New York’s Queens College, at City College, and at State University of New York’s Fashion Institute of Technology.

Learn more about the Arabic script and literacy in the Arab world:

Learn more about Lexend:

Disclaimer: The opinions and claims contained in this article are presented for informational purposes only, and do not constitute agreement or endorsement on the part of Google or any of its affiliates. Specifically, there has been no research or testing of Readex Pro by Google to determine whether the font actually makes it easier for people to read Arabic, and therefore such claim has not yet been validated by Google. The Google Fonts website offers a variety of fonts for users to choose from to fit their needs.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK