Typography

16 pixels is defined as a common base for body texts in all our Web Apps. For accessibility purpose, the minimal font-size authorized is 12 pixels with InterVariable. It's still a suitable value since InterVariable has a strong legibility.

In practice, to avoid too small nuances between closed texts, we advise to use an increment of 2 CSS pixels, at least.

In most of our Designs, the base font-weight used is Regular (450).

In practice, to sufficiently mark the difference between two close texts, we advise to have at least a gap of one font-weight.

Example: if your normal text is Regular (450), use at least a Bold (700) font-weight to highlight important text. Medium (500) would not be sufficient. With the same logic, if your normal text is Medium (500), important text would be Black (900)

To avoid confusion since it is a common web convention, underlining is reserved to links, and only links, within digital interfaces or mixed media.

The book Dynamics in Document Design says:

When text is set in all capital letters, reading speed is slowed about 13 to 20 percent (Breland & Breland, 1944). Reading speed is optimal when uppercase and lowercase letters are used (Poulton, 1967; Rickards & August, 1975). When extra emphasis is needed, bold has been found to be a better cue than uppercase (Coles & Foster, 1975).

However, in Design there is not any fixed set of rules to determine when to use all capital letters, normal mixed case (or sentence case) or title case.

In practice, we try to use all capital letters in a light and punctual way. Like for tab labels, panel titles, or in short "call to action" that requires the special attention of the user.

The most important thing to keep in mind while designing is to make the text readable, scannable, and reduce the cognitive load on the user. It's the best way to keep long texts accessible.

Usage of italic can seems as a detail but when accessibility is part of our consideration we cannot ignore that a lot of respected and trusted accessibility resources advise against the use of blocks of italic text.

It should also be noted that many conventions for the use of italics are enshrined in international standards, including BS 5605 (citing and referencing published material), BS ISO 690 (bibliographic references and citations), and ISO 999 (content, organization and presentation of indexes).

Based on that, in practice, we decided to follow international standards and for all others cases limit the usage of italic. We use it only for short texts to put emphasis on it.

The hyphenation is the thing you mostly find in newspaper at the end of a text line: an hyphen that cut the word between two syllables to keep columns clean and well designed.

As the Digital offers a lot of way to communicate information. We decided not to allow hyphenation within our interfaces to avoid confusion and to keep our interfaces accessible.

The most common illustration to that is the hyphenation of an URL. Imagine you write an URL like "https://mysuperwebsite.com" and this part of the text arrives at the end of a line. The hyphenation algorithm will write something like: https://mysuper-
website.com and you won't be able as a reader to know if there is actually an hyphen within the URL or not.

No hyphenation, no risks.

Truncation is when you cut a line of text before the end, oftentime using the ellipsis (…) ponctuation mark to explicit the fact that the text is not whole.

By default we don't use it. But there are exceptions, and most follow those rules:

• The screen displays an high-density level of information,
• The truncated text is not fully necessary on its own, it mostly an hint,
• The truncated text must not be the only way to distinguish 2 similar items.