Content Comparison

...

Here are a number of guidelines for designing content with international audiences in mind:

Flags

Avoid using flags to represent languages; language and country are different concepts. Flags are symbols that represent countries or nations, whereas languages represent a shared method of communication between people. For example, Spanish is spoken in 29 countries, and Spain is only one of them. Countries like Canada have more than 1 official language, so it cannot be represented by a single flag.

When designing a language selector, use plain text, despite its lack of visual appeal. Only use flags to represent countries or nations, not languages. Language names in the selector should always be shown in their own language, in order to make it easy for users to be able to identify their language of choice regardless of the currently-selected language. For example, English will always be labelled ‘English’, and French will always be labelled ‘Français’, even if Hebrew is selected as the current language.

Right to Left

In certain languages, such as Arabic and Hebrew, text is read from right-to-left (RTL). This makes it necessary to flip your entire design. A modular design approach will come in handy while accommodating RTL languages. For example, the application below is designed to flip neatly for Hebrew and other RTL languages:

...

<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<h1 style="font-family: 'Inter', arial; margin: 0; font-size: 32px;">Huge Header</h1>

<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<h2 style="font-family: 'Inter', arial; margin: 0;  font-size: 24px;">Large Header</h2>

<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<h3 style="font-family: 'Inter', arial; margin: 0;  font-size: 16px;">Medium Header</h3>

<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<h4 style="font-family: 'Inter', arial; margin: 0;  font-size: 12px;">Small Header</h4>

<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<h5 style="font-family: 'Inter', arial; margin: 0;  font-size: 8px;">Tiny Header</h5>

Image RemovedImage Added

Accessibility

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

...

Only capitalize the first word of the text element, as well as any proper nouns.

Nation Flags

Avoid using flags to represent languages; language and country are different concepts. Flags are symbols that represent countries or nations, whereas languages represent a shared method of communication between people. For example, Spanish is spoken in 29 countries, and Spain is only one of them. Countries like Canada have more than 1 official language, so it cannot be represented by a single flag.

When designing a language selector, use plain text, despite its lack of visual appeal. Only use flags to represent countries or nations, not languages. Language names in the selector should always be shown in their own language, in order to make it easy for users to be able to identify their language of choice regardless of the currently-selected language. For example, English will always be labelled ‘English’, and French will always be labelled ‘Français’, even if Hebrew is selected as the current language.