Design for Arabic · صمّم بالعربي

♪ ♪ Hi, I am Mohamed Samir, a designer on the Apple Design team. Today, I'm going to walk you through some of the best practices when it comes to designing an Arabic app. This session is also available in English, so feel free to check it out. And before we get started, I wanted to touch on why it's important to consider designing or optimizing your app or game to be used by Arab audience. There are around 660 million people that use the Arabic script today, which makes it the third most written language in the world after Latin and Chinese. People from more than 22 countries, many cities, and regions would potentially see and use what you've built. And If you want to reach even a fraction of that audience, you would want to consider optimizing not only for the language, but also for the directionality of the UI. And this is because Arabic is a language that is written from right to left. To understand this, let's look at this example, that says "The Arabian desert" in Arabic, And as you see, it's written from the right to the left of the screen. But this is not only it. If this phrase exists in a layout, the entire layout flows from top to bottom, right to left, to match the reading behavior and direction of the language. This means that things like titles, paragraphs, columns, and even imagery should flow from right to left. And this directionality behavior extends beyond the layout to also the UI.

As in this example from the Pages app, where the Navigation bar order and direction is from right to left. And the icons also flow in the same direction. And if you start navigating through the app, you would find menus, controls, graphical elements, and even tables have been designed to match the natural flow and behavior of the language. Now, you might think that this could be a lot of work to optimize your app or game to work with Arabic, but the good news is, a lot of this has been taken care of by Apple if you use our native frameworks, like Swift UI, so you can focus on the content and few other UI details that could be specific to your app or game. And in today's session I will share with you some of these aspects that you should be looking at while doing this optimization. Starting by the UI directionality and example components that you would want to consider. Then we move to the Arabic script main features and the typography support that Apple provides you for Arabic, and how iconography is a detail that enhances the overall Arabic experience. And at last, the numeral systems supported by Apple for Arabic usage. Let's start by the UI directionality. This is an example from the App Store. It is a flow that starts by the story card in the Today tab, the story page, and it ends with the product page of an app. The best way to think about layout directionality is to turn it into wireframes. For Arabic, you would want to switch the placement of the UI components of these screens. Some of the elements would switch from right to left, while others from left to right. Titles, buttons, and the Navigation bar should change order and position. Paragraphs should be always aligned to the right. Carousals and swipeable elements should also flow from right to left. After changing the placement of the UI components, localizing the content, and keeping the images as they are, now you have a layout that flows from right to left. Changing the layout directionality is only the beginning of your journey to create an excellent right-to-left behavior, You would want to keep in mind that the entire flow of the app is now structured differently. And the user thinks about the navigation between these pages in a reverse order. So mentally, they start by the today tab on the right, then they navigate through the story card, and they end with the product page on the left side– as if they are navigating through an Arabic book from right to left. And as I mentioned earlier, all of this happens automatically if you use our native frameworks. Now I would like to share with you some other examples for areas and components that could be impacted by changing the directionality of the UI.

Let's look at this example from the Weather app. On the left side you see the English Layout, while the Arabic layout in on the right side.

The first thing that you would notice here is content like images, videos, and backgrounds remain the same. In this example, the sun always rises from the east regardless the location or the language, and you would want to avoid flipping the content so it doesn't impact the overall experience.

The second component here is the carousal of "the weather across the day". Both, the interaction and the animation of this component are inverted to match the UI direction. The third component that I would like to share with you in the Weather app is the temperature scale. For Arabic, the lowest temperature is on the right, while the highest is on the left. So as the scale gradient and indicator, which we inverted to match this behavior. And as previously said, the mental model of switching between pages is also reversed. The primary page is on the far right, and you navigate to secondary pages on the left. And therefore the pagination dots should flow also from right to left. And our second example here is from the Calendar app, in which the progress and the flow of dates, months, and years is from right to left when used in Arabic, which matches the progress of physical calendars in the Arab world. And it is always important to make sure that your app is culturally relevant. In this example here from the Calendar app, you may have noticed that there are red lines beneath some dates. These are actually used to indicate the beginning of each month of the Islamic Lunar Calendar, which we have available for people in the Arab and Islamic world. The last example about directionality is from the battery status in settings where toggles, segmented controllers, design, and interaction are mirrored in the Arabic layout. And also Charts is another place where directionality could be impacted in the UI– especially charts that include a time component, like days, weeks, months, or years. In the battery usage graph, days of the week goes from left to right in the English UI, while in Arabic it is preferred to have the days progress from right to left to match the calendar behavior that we referred to in the previous example. Which means that the early time would be on the right, and the late time is on the left. And other charts and graphs in general are dependent on the country, so you would want to double-check before deciding on which direction to use for charts. That was UI directionality. Now let's talk about typography. But before we dive into the typefaces and the typestyle adjustments that you would want to consider while designing your app, let me take you through a brief introduction about the Arabic script and its main features. These are four letters that spell the word "Arabic" in Arabic, but in writing they actually don't mean anything on their own until they get connected.

To understand this even more, let me share with you how I would write this word in a full Arabic sentence using the iOS keyboard.

And as you see, being connected doesn't mean that all the letters in a given word would be linked. So this word is made of two parts. Each part has two characters. And this is one of the main features of the Arabic script– the connected nature of it. And this also means that the possible glyphs for each letter and each pair can be many. If we take the first letter here in this example, the letter "Ain," its form changes based on its position in the word, whether it's isolated, at the beginning of the word, in the middle, or at the end. And it's worth noting that this usually makes Arabic fonts libraries way bigger than Latin.

Another feature of the Arabic script that in most cases, words are more concise than Latin due to the connected nature that tends to give a more condensed feel to words and phrases. But it's also slightly taller, especially with the use of dots, vocalization, and diacritic marks. Vocalization marks are used to emphasize certain letters or distinguish between words that sound different but would otherwise be identical in writing. And if your app would include an intense use of vocalization marks, make sure to have more vertical spacing in the UI to avoid clipping.

Now we understand the main differences between Arabic and Latin. Let's talk about the typefaces that Apple provides you if you use our system API.

Apple provides an exclusive Arabic typeface that is designed carefully with legibility and functionality in mind. It is also designed to be consistent with the Latin SF family style to make if feel natural in bilingual contexts. And similar to Latin, SF Arabic also provides you with all possible weights that you may need in your app. from Ultralight to Black. You can see the usage of different weights in many places in our native apps. The Clock app is a good example for that; using Bold in the title, Regular for the different cities, and Light for the clock numerals. You can explore more apps in our ecosystem to see how different weights can be used.

Like the Health app where bold, medium, and regular are used in titles and body copy. And the Weather app where multiple weights are used in numerals and body copy.

SF Arabic also has been made with scalability in mind. Which means that its form changes slightly depending on the point size. And this is what we call optical size. You can see the structural differences here between the largest and the smallest point sizes. Large is usually used for titles and headings. And is designed to match the contemporary grotesque feel of the rest of SF Family. On the other hand, smaller point sizes, which are used in paragraphs and body copy, are designed to prioritize legibility and functionality over style. This happens by adding angularity to the terminals, width and contrast to the overall font structure. It's worth noting that the system takes care of this. It is automatically choosing the right form depending on the point size. Here is an example from the App Store Editorial sheet, where we use display in the title, and text is used in paragraphs. And in both you could see how Arabic and English typefaces work seamlessly in this bilingual context.

SF Arabic Scalable typeface is used across our ecosystem, but it's also available for you to use in your app or game. And this year we're introducing SF Arabic Rounded to the SF family, including all its various weights, from Ultralight to Black.

Here is an example from the Reminders app where we use SF Arabic Rounded in the titles and the body text. And as you see, Rounded could give your app a more practical, active, or softer look, depending on the context.

The usage of the Rounded typeface, the several weights, and the scalability of SF Arabic can all be seen in all of our native apps, and we can't wait for you to use them to create the best possible experiences for the Arab users. If you would like to learn more about all the new fonts that have been announced this year, including SF Arabic Rounded, make sure to watch this year's session "Meet the expanded San Francisco font family". Now let's talk about some typestyle considerations when using Arabic typefaces. Arabic is a non-case sensitive script. Digital Arabic fonts are usually designed to match the lower case Latin. But when uppercase is used, it gives Latin more volume and it makes Arabic feels smaller in comparison to Latin. To compensate for this this optical size difference in the UI, you may want to increase the Arabic font size by 10%. This subtle difference would also help with legibility especially when upper case is used in smaller point sizes. The other thing to consider is letter spacing. Given the fact that Arabic is connected, some Arabic typefaces are not fully optimized to deal properly with spacing. This can result in showing misplaced links, breaking letters apart, or showing unnecessary spacing. If the Arabic typeface you're using isn't fully optimized for letter spacing, make sure to use 0 tracking. or simply, use our system font, which adds the correct letters linkage. This linkage in Arabic is called "Kashida" and the system adds Kashidas with different lengths to have more organic natural spacing in Arabic. The last thing to look out for is transparency. Sometimes you can see visible joints between letters. This often happens if there is transparency in a font or a system that is not fully optimized for Arabic. Thankfully, if you use our system font, you don't have to worry about this. Opacity is applied to the entire word or phrase to overcome any potential distortion. In the typography section, I talked about the main features of the Arabic script, the Arabic typefaces that we use in our ecosystem, and some considerations for certain type treatments in Arabic. Now let's talk about iconography. Iconography is one of the UI elements that could be easily missed, but they are usually the entry point to a user flow or a trigger to a certain action, which makes having the correct iconography crucial to having a seamless experience. For Arabic, we are committed to choosing the most relevant symbols for our customers. Let's take the App Store tab bar icons as an example. Some symbols have been tweaked, while others remained the same in the Arabic UI. And to understand why we made this choice, let's look at some of them.

The Today tab symbol, for example, symbolizes text direction, and it is more relevant for Arabic users to have the lines aligned to the right to match the natural reading direction of the language. While the magnifying glass's direction implies the angle of the right hand usage, which is the behavior of the majority of users in the world, regardless their location so we decided to keep it as it is in the Arabic UI.

And here some other examples from other apps that shows how directionality can impact the way symbols are treated in an Arabic UI, like writing from right to left while maintaining the angularity of the pen or changing the speaker's direction to make it feel natural in the UI while maintaining the slash direction, which is consistent across our Apple ecosystem, or changing the direction of the calendar dots that represent the progress of months while keeping the clock hands as they are to match the physical clock representation in the system. And on top of directionality, having more locally relevant symbols is another layer that we're dedicated to enhancing over time to ensure excellence in our international markets. And here are few examples for Arabic specific symbols from the SF symbols library, including an exclusively drawn Arabic signature symbol and other text formatting ones. All of this and more than 300 Arabic and right-to-left symbols can be found in SF Symbols app. In the app you can easily choose a symbol and check the localization section in the info panel to see the Arabic local variant and other non-Latin scripts. All of the right-to-left and the local symbols should appear automatically in your app if you use our system API. As we saw, using the right symbols can transform the entire app experience, as it becomes more relevant to the users. And especially for countries and regions that use a non-Latin script, we need to pay more attention, as sometimes we forget about the different linguistic and cultural nuances. And I really hope to see your contribution in creating the most relevant icons for the Arabic customers. Now let's talk about Arabic numerals. The numerals that we're all familiar with and are used in most countries around the world are called Arabic numerals. And this is because they were invented in the Arab world and they replaced the Roman numerals back then.

And you can notice that until today all mathematical calculations happens from right to left, matching the reading behavior of the Arabic language. Like this example which starts the summation process by ones, then tens, then hundreds. In today's world this form of numerals is called Western Arabic numerals, and that is to contrast it with the other form of Arabic numerals which is the Eastern one. Both forms have been invented in the Arab world and are currently used in different Arab countries. The Western Arabic numerals is used in West African Arab countries like Morocco, Algeria, and Tunisia, while the Eastern is used in some Levantine and gulf countries. Countries like Egypt or Saudi Arabia uses both versions.

Choosing between both systems happens automatically according to the user's country, and also can be triggered by the user choice. And you can see a reflection of this choice in the all apps that uses numerals in our ecosystem. Including Calculator app, and the Calendar app, and the Typograph watch face that is beautifully designed in both numeral forms. And many other watch faces that you can check in our watch face gallery. If the app that you're developing includes numerals, make sure to count for both forms or to check which country you're targeting to validate which form would be more suitable. And at last, if you would like to have more design guidance for right-to-left languages, please refer to our Right to Left guidelines in the Human Interface Guidelines. Today I talked about Designing in Arabic, including the impact that the language can have on the UI directionality. And in the typography section, I gave an introduction about the Arabic script, the typefaces, and some Arabic UI type considerations. I also talked about iconography and how it can transform your app experience, the Arabic numerals in its both forms, and the Right to Left Guidelines.

And if you would like to even dive deeper into how to get all of this right from a development perspective, you can also check this year's session "Get it Right (to Left)". I hope all of this gave you guidance and pointed you at the right tools to start designing or optimizing your app to be used in the Arab world. And I can't wait to use all the amazing Arabic apps that you're going to build.