Typography

1. Fonts
   1. Font stack
      1. Sans-serif type:
      2. Serif type:
      3. Display type:
   2. Type scale
2. Usage
3. Text formatting
   1. Copy wrapper
   2. Headers size
   3. Table
4. Color Text and Titles

Fonts

Ciutadella

Default sans-serif typeface

AÀÂBCDEÉÈÊËFGHIÎÏJKLMNOÔPQRSTUÛVWXYZ
aàâbcdeéèêëfghiîïjklmnoôpqrstuûvwxyz
1234567890

Ciutadella Bold

Display type

AÀÂBCDEÉÈÊËFGHIÎÏJKLMNOÔPQRSTUÛVWXYZ
aàâbcdeéèêëfghiîïjklmnoôpqrstuûvwxyz
1234567890

Download: Ciutadella

Suisse

Default serif type for body text/

AÀÂBCDEÉÈÊËFGHIÎÏJKLMNOÔPQRSTUÛVWXYZ
aàâbcdeéèêëfghiîïjklmnoôpqrstuûvwxyz
1234567890

Download: Suisse

Font stack

WIP

Sans-serif type:

@font-family-sans-serif

"Ciutadella-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;

Serif type:

@font-family-serif

 "Suisse", Georgia, serif;

Display type:

@font-family-display

font-family: "Ciutadella-Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;

• Ciutadella is used for headings and on navigation, button and other interface labels
• Suisse is used for main body text, tables and forms.

Type scale

The base font is 16px except for the x-wide screen size or it is 19px. The spacing and size of the elements is based on the traditional rule of typographic rhythm.

fr :: Le base font est de 16px sauf pour la taille d’écran x-large ou il est à 19px. L’espacement et la taille des éléments est basé sur la règle traditionnelle du rythme typographique.

Usage

Ciutadella is the sans-serif font used on interface components (navigation, buttons and cards). It’s also used on heading in text block.

The Suisse font (serif) is mostly used on text blocks. (it’s sometime used on numbers in older components like pagination).

Ciutadella Bold + All Caps is used to identify the different section of a page. Example, it’s used on the titles of components like carousel. It can be used in very large type as a main header on the top of a page.

Text formatting

Copy wrapper

All styles related to text layout are protected by using the .copy class. Add the .copy class to a parent element to eliminate conflicts with styles that govern the look and feel of the interface.

fr :: Tous les styles relatif a la mise en page de texte sont securises grace a l utilisation de la classe .copy. Ajouter la classe .copy sur un élément parent afin d eliminer les conflicts avec les styles qui regisse le look and feel de l interface.

Headers size

It is possible to keep the semantics of heading element (like <h1>) and to associate the style of another heading type (like a <h4>). This can be done in 2 ways:

1. By applying the .h4 class to the <h1> <h1 class="h4">. This way would be preferable if the style that one wants to give to the <h1> is exactly the style of <h4> (same spacing, font, color, size …).
2. By adding the class .h4 to our element in the css/less file. This way is better if you want to start from the style of h4 and then customize it even more (change the color, make it, etc.)

fr :: Il est possible de garder la sémantique d’un élément de titre (ex: un h1) et de lui associer le style d’un autre élément (ex: un h4). Ceci peut être fait de 2 façons :

1. En appliquant la classe .h4 au <h1> dans le code html <h1 class="h4">. Cette façon serait préférable si le style que l’on veut donner au <h1> est exactement le style du<h4> (même espacement, font, couleur, taille…)
2. En ajoutant la classe .h4 à notre élément dans le css. Cette façon est préférable si on veut partir du style du h4 et ensuite le personnaliser encore plus (changer la couleur, la font, etc.)

Table

Add the class .table to the <table> tag

Color Text and Titles

Use colored text on the beginning of an article. Color available: .rose, .bleu, .orange, .rouge, .violet, .vert & .turquoise.

The following colors are based on official colors but have been adjusted to ensure optimal readability (WCAG 2.0 accessibility AAA).

NFB brand colors adjusted for text

fr :: Utilisation de texte de couleur sur l’amorce d’un article. Couleur disponibles : .rose, .bleu, .orange, .rouge, .violet, .vert & .turquoise.

Les couleurs suivantes sont basees sur les couleurs officielles mais ont ete ajustees pour assurer une lisibilite optimal (WCAG 2.0 accessibility AAA).

<p class="m-article-lead rose">
[...]
</p>

Note:

1. To use these colors on text, the character size must be at least 24px.  2. The use of yellow is deprecated. The color tint required to conform to the standard is too far from the original yellow.
2. Accessibility of adjusted NFB pallette
3. Accessibility of real NFB pallette