Go to content Go to menu

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.

Barlow Preview

Bar
Characters
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
éèêëàâäùûüîïôöç
éèêëàâäùûüîïôöç
&"'`@%*µ§~#¤^¨()[]{}-_²/\|.,;:?!><​‌-​‌+​‌÷​‌×​‌=​‌>​‌®​‌©‌$​‌€​‌£​‌¥​‌¢
Font weights & styles
300 - Light italic
400 - Regular italic
500 - Medium italic
700 - Bold italic
900 - Black italic
Font sizes
12px - lorem ipsum
14px - lorem ipsum
16px - lorem ipsum
24px - lorem ipsum
32px - lorem ipsum
40px - lorem ipsum

Rules & Guidelines for Web Applications

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:

  1. "Barlow"
  2. “DIN Pro”,
  3. Roboto,
  4. “Helvetica Neue”,
  5. Helvetica,
  6. Arial,
  7. Sans-Serif;

So to be really verbose here, what that rule is saying is:

  1. I'd like to use the "Barlow" font, please.
  2. If you don't have that, try "Din Pro" font, please.
  3. you don't have that, try "Roboto" next.
  4. etc.
  5. All else fails, use whatever you've got for the generic keyword Sans-Serif

Preset styles

– IN PROGRESS –

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

  1. Barlow,
  2. Arial,
  3. Sans-Serif