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: DIN Pro.

This typeface must be systematically used and applied to all supports except for some specific ones. Check exceptions list.

For legal reasons, the name Foyer presents in text blocs must be in bold. The first name letter must be in uppercase, and the rest in lowercase.

Din Pro preview

Din
Characters
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
éèêëàâäùûüîïôöç
éèêëàâäùûüîïôöç
&"'`@%*µ§~#¤^¨()[]{}-_²/\|.,;:?!><​‌-​‌+​‌÷​‌×​‌=​‌>​‌®​‌©‌$​‌€​‌£​‌¥​‌¢
Font weights & styles
200 - Light italic
400 - Regular italic
500 - Medium italic
700 - Bold italic
800 - 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.

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.

Underlining

To avoid confusing users since it is a common web convention, underlining is reserved to links.

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.

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.

Font fallback strategy

In some situations, the DIN Pro – the primary font – could not be available or usable for technical reasons/limitations. Then to protect the homogeneity of Foyer's image, we defined a list of fonts that will be used as fallbacks.

Here is the ordered list:

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

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

  1. I'd like to use the "Din Pro" font, please.
  2. If you don't have that, try Roboto next.
  3. you don't have that, try "HelveticaNeue",
  4. you don't have that, try Helvetica,
  5. you don't have that, try Arial,
  6. 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.

Refer to the Corporate Identity document

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