Typography
Typography is a main part of visual identity. To maintain a homogeneous and easily recognizable image and favor accessibility, the typeface Inter has been choosen.
This typeface must be systematically used and applied to all supports except for some specific ones. Check exceptions list.
Historically, we used DIN Pro as main typography, but the brand evolved. Foyer wants to use a more accessible font, and InterVariable is the most accessible and versatile font we found.
Table of Contents
InterVariable Preview
Rules & Guidelines for Web Applications
Sub-Table of Contents
Font properties
Font-size
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.
Font-weights
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)
Underlining
To avoid confusion since it is a common web convention, underlining is reserved to links, and only links, within digital interfaces or mixed media.
Letter casing
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.
Italicizing
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.
Hyphenation
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
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.
Font fallback strategy
In some situations, the Barlow – the primary font – might not be available or usable for technical reasons/limitations. Then to protect the homogeneity of Foyer's identity, we defined a list of fonts that will be used as fallbacks.
Here is the ordered list:
- "InterVariable"
- "Barlow"
- “DIN Pro”,
- Roboto,
- “Helvetica Neue”,
- Helvetica,
- Arial,
- Sans-Serif;
So to be really verbose here, what that rule is saying is:
- I'd like to use the "InterVariable" font, please.
- If you don't have that, try "Varlow" font.
- If you don't have that, try "Din Pro" font.
- you don't have that, try "Roboto" next.
- etc.
- All else fails, use whatever you've got for the generic keyword Sans-Serif
Preset styles
– IN PROGRESS –
Rules & Guidelines for Print
– COMING SOON –
Rules & Guidelines for Public Websites
– COMING SOON –
Exceptions list
Administrative documents
The font used is Arial to insure compatibility.
Emails
Because of technical limitations within emails, we decided to use the following font stack in a fallback approach:
- Arial,
- Sans-Serif