Typography

Another important consideration is typography. RTL scripts require a different typography. The choice of font can also have a significant impact on the readability of RTL content. For example, letters can connect to each other, rather than standing alone as they do in LTR languages. This means that fonts need to be chosen carefully, to make sure that they are appropriate for the language being used.

Many scripts, such as Arabic, have special orthographic rules that require certain combinations of letterforms to be combined into special ligature forms. The rules governing ligature formation in Arabic can be quite complex, requiring special script-shaping technologies.

Leverage our existing fonts, Text and Heading components

In Pinterest products, we default to device fonts so that fallbacks for RTL are handled automatically. Also, if you use our existing components for text, alignment and spacing are also handled out-of-the box.

Pinterest marketing sites using Pinterest Sans. For more information, refer to the brand guidelines

Typography considerations for non-product or brand applications

How to select fonts for RTL and LTR

Fonts are an essential element of web development, as they can influence the readability, accessibility‌ and the aesthetics of your app or site. When selecting fonts for RTL and LTR web development, you need to consider language support, font style, font size and spacing.

Language support is vital; you should use tools such as Google Fonts or Font Squirrel to find fonts that accommodate multiple languages and scripts. Additionally, the font style should be appropriate for the context of your content and consistent across different languages. Serif, sans-serif‌ or monospace fonts are all acceptable options; however, avoid using overly decorative fonts as they can reduce readability or cause visual clutter.

Finally, adjust the font size and spacing according to the text direction and the characteristics of the script. For example, RTL scripts tend to have more vertical strokes than LTR scripts, so you may need to increase the font size and line height for RTL text. CSS logical properties or SASS mixins can be used to apply different font styles based on the text direction.

Date and time formatting

Date and time formatting is another important consideration. In RTL languages, the date and time should be displayed from right to left, rather than left to right. In addition to the alignment of the date, dates should be formatted according to the user’s local, indicated in their OS settings. The appropriate formatting codes in the localization software can achieve this.

Numbers and currency

Numbers and currency are also formatted differently in RTL languages. In Arabic, for example, the decimal separator is a comma, rather than a period as it is in English. Currency symbols follow numbers in Arabic—they're placed on the left. Similarly to the dates formatting, currency formatting should follow the user’s selected local formatting in their OS settings.

Number enumeration

Numbers in RTL scripts are LTR; When enumerating numbers the list of numbers starts from right and flows to the left; however, 2 digit+ numbers are written from left to right and shouldn't be reversed.

A pagination component with numbers from large to small reading from left to right.
Enumeration in LTR
A pagination component with numbers from large to small reading from right to left.
Enumeration in RTL

Phone numbers

Phone numbers should be written the same way as in English; if they are written in an international format, the leading + should be to the left of the phone number (like in English), next to the leading digit. Use bidirectional algorithms to format numbers correctly.

A list of left-aligned phone numbers in English will all of the text reading from left to right.
LTR phone numbers
A list of right-aligned phone numbers in Arabic. The heading and descriptions of the numbers read from right to left, but the numbers themselves read from left to right.
RTL phone numbers

Western vs Eastern Arabic digits

Different RTL languages can use different number systems.

For example, Hebrew text uses Western Arabic numerals and Hebrew Numerals, whereas Arabic text might use either Western or Eastern Arabic numerals.

The numbers 4,5,6 as Western digits.
Western Arabic numerals
The numbers 4,5,6 as Eastern digits reading from right to left.
Eastern Arabic numerals

In the Pinterest app, numerals' format choice should mimic the person’s choice in their operating system settings. For instance, if a person opted for Eastern Arabic numerals, digits displayed in the app should be in that format.

Don't release without testing
Testing is an indispensable step in localization, especially when it comes to RTL languages. Always have native, in-market speakers review the full content to ensure that you have the content catered for the target audience and, more importantly, present it so it can be read effortlessly. What’s more, the lessons learned from testing can always be applied to the next round of development, making it more streamlined and cost-effective.

Additional considerations

As mentioned previously, bidirectional content includes both RTL (for example, Arabic words) and LTR (for example, English) script components.

The top of a long form as part of a setting screen.
Example of a sentence in Arabic that contains a number or an English word (like “Pinterest”)

To render Bidirectional content correctly, bidi-algorithm rules should be applied as part of engineering internationalization efforts—these rules will guarantee that the components of a sentence are in the right position in the flow for the sentence to be made.

How do the rules affect the order of the bidi content?

  • The entire sentence/string flows from right to left
  • English words will flow from left to right (or any word in LTR language)
  • Numbers (incl. Phone numbers) will also flow from left to right.
  • Each component will be in the correct position for the sentence to make sense.

Note to engineers

In all major web browsers, the order of characters in memory (logical) isn't the same as the order in which they are displayed (visual).

The set of rules applied by the browser to produce the correct order at the time of display are described by the Unicode Bidirectional Algorithm, or 'bidi algorithm' for short. The page covers the following principles:

  • Characters and directional typing
  • Directional runs
  • Base direction, a fundamentally important concept
  • Neutral characters
  • Embedding changes to the base direction
  • Numbers
  • Mirrored Characters
Edit page on GitHub