Typography
Typography is a main part of visual identity. To maintain a homogeneous and easily recognizable image, a family of characters has been chosen: Barlow.
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 more Open Source solution, Barlow is the closest font we found.
For legal reasons, the name Foyer found in text blocs must be in bold. The first name letter must be in uppercase, and the rest in lowercase.
Table of Contents
Barlow 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.
In practice, to avoid too small nuances between closed texts, we advise to use an increment of 2 pixels, at least.
Font-weights
In most of our Designs, the base font-weight used is Regular (400).
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 (400), 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.
Letter casing
The book Dynamics in Document Design which 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.
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:
- "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 "Barlow" font, please.
- If you don't have that, try "Din Pro" font, please.
- 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:
- Barlow,
- Arial,
- Sans-Serif