Content Comparison

...

The general rule for text expansion is: “the shorter the English text, the longer the translated text is likely to be”. The following table shows the average text expansion rate for different English text lengths:

English word expansion guidelines

In addition to English text length, the target language also has an impact upon the amount of expansion. The following table shows the expansion factor for the English text “Share” into various languages:

Expansion factor for the English word “Share”

...

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:

Image Modified

When localizing for RTL, the elements below should be mirrored:

...

In LUX, all headers should be the same size as its corresponding section text using the matrix below. Headers one stop higher (two at most) than the section text may be used when no exact match or extra emphasis is required for that specific section. For example, if your section copy text is set at 12px, use the small, medium or large header depending on how much emphasis is needed. If your section copy text is set at 14px, only the medium or large headers should be used.

<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>

Accessibility

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

For accessible header, you should also follow these additional requirements:

...

• Provide a text label, left aligned to its associated field. Check Boxes Checkboxes and Radio Buttons are exceptions to this rule.

• In situations where horizontal UI space is limited, or responsive design is used, render the label above its associated field.

• Ensure that all labels and associated fields are vertically aligned as columns in a table.

Image Modified

Required fields

All required fields should be marked with an asterisk in close proximity to its associated label.

• Provide a star (asterisk) symbol positioned in superscript.

• Use the Verint error color with the star symbol to identify its necessity.

Image Modified

Accessibility

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

For accessible labels, you should also follow these additional requirements:

...

LUX uses two capitalization styles:

Examples

...