Typothèque Eracom

📋 Table des matières

☎️ Contact

typo.eracom@eduvaud.ch

📓 Terminologie
Terminologie

Typothèque

Une typothèque est une collection organisée de polices.

Police

Une police désigne un ensemble de fontes (un dossier de fontes) qui partagent une identité commune (« le même squelette »). Une police inclut toutes les variations possibles (gras, italique, etc.) d’une même famille de fontes.

Fonte

Une fonte désigne l’ensemble des caractères (contenu dans un fichier) correspondant aux mêmes caractéristiques (de style) au sein d’une même police. Par exemple, la police « Times », inclut notamment les fontes « Times Regular », « Times Bold », ou « Times Italic ».

Glyphe

Un glyphe est une représentation graphique d’un signe typographique (un symbole). Cela peut inclure non seulement les lettres et les chiffres, mais aussi les accents, les ligatures (comme « fi » ou « fl »), et d’autres symboles.

Script

Un scripts fait référence à un système d’écriture (une langue) que l’on peut utiliser avec une certaine police en fonction des glyphes présents au sein de celle-ci (on parle alors de son « jeux de caractères »). Par exemple, une police peut prendre en charge plusieurs scripts, comme le latin, le cyrillique, l’arabe ou le chinois.

👋 Charte d’utilisation

La présente charte définit les droits et les obligations des utilisateur.trice.s de la typothèque de l’Ecole Romande d’Arts et Communication (Eracom). Elle s’applique à tous.tes les utilisateur.trice.s.

Définitions

Droits et Obligations

Violation

Une violation des principes énoncés plus haut peut entraîner le retrait de l’accès aux ressources. En outre, les abus seront dénoncés aux autorités académiques et/ou administratives compétentes en vue de sanctions disciplinaires. Sont réservés le remboursement des frais résultant de l’utilisation abusive et de son identification ainsi que d’éventuelles poursuites judiciaires.

🗂️ Classification

Dans le cadre des activités professionnelles des graphistes, un système de classification se révèle utile pour identifier, sélectionner et combiner les polices de caractères ainsi que justifier leur usage en fonction du contexte (sémiotique).

Historique

La classification selon le «principe historique»1 (classification Vox adaptée) est une méthode de classification pédagogique des polices de caractères qui permet de répartir toutes les polices dans ordre chronologique lié à l’histoire de l’écriture et l’évolution des technologies.
Classification historique
  1. Incises
    Gravure dans la pierre
  2. Scriptes
    Calligraphie (ductus)
    1. Onciales
    2. Fractures
    3. Cursives
  3. Sérifs
    Impression à caractères mobiles
    1. Humanes
    2. Garaldes
    3. Réales
    4. Didones
  4. Slab-Sérifs
    Composition à chaud
    1. Mécanes
    2. Monospaces
  5. Sans-Sérifs
    Composition à froid (photo-composition)
    1. Grotesques
    2. Humanistes
    3. Géométriques
  6. Expressives
    Composition en grands corps (aussi décoratives)
  7. Hybrides
    Variations de contrastes et de terminaisons au sein d’une même police
  8. Non-Latines
    Composition digitale (symboles: ornements (Dingbats) & mathématiques (Pi))

Formelle

La classification selon le «principe de forme»2 (classification Kupferschmid adaptée) est une méthode de classification fonctionnelle des polices de caractères qui permet de répartir toutes les polices selon un système cohérent basé sur 3 paramètres.
Classification formelle
  1. Principe
    • Dynamique
      Plume à bec large (translation)
      Axe diagonal + extrémités ouvertes
      voc. sémiotique: convivial, ouvert, accessible, flexible, naturel, démocratique, chaleureux, accueillant, personnel, intemporel
    • Statique
      Plume à bec pointu (expansion)
      Axe vertical + extrémités fermées
      voc. sémiotique: rationnel, ordonné, réservé, noble, élégant, sérieux, rigide, correct, rigoureux, autoritaire
    • Géométrique
      Plume à bec rond (linéaire)
      Construction modulaire
      voc. sémiotique: géométrique, simple, technique, moderne, fonctionnel, informel, systématique, sobre, construit, épuré
  2. Contraste
    • Contrasté (avec)
    • Linéaire (sans)
  3. Terminaisons
    • Avec (empattements)
    • Sans (empattement)
Créer des paires de fontes avec la matrice de classification

Choisir des fontes, combiner des fontes

En se basant sur la classification formelle de Indra Kupferschmid, on peut faire les remarques suivantes concernant les combinaisons:

Ce système est un point de départ, il n’y a pas de règles absolues en matière de design. Il est nécesaire d’affiner les combinaisons en prenant en compte le contexte de votre projet, notamment les points suivants:

🧬 Typologie

Classique

Cette catégorie inclut les digitalisations des fontes classiques de l’histoire de la typographie, qui datent d’avant l’ère digitale. La digitalisation fait référence au processus de conversion d’une police de caractères physique (par exemple, une police dessinée à la main ou gravée) en un format numérique. Ce processus implique la numérisation de dessins existants et leur conversion en courbes vectorielles, ce qui permet une mise à l’échelle sans perte de qualité.

Moderne

Cette catégorie inclut les fontes contemporaines qui ont été conçues à partir du début du XXIe siècle. Ces fontes résultent soit d’une réinterprétation d’un classique, soit d’un design original. La réinterprétation d’une police de caractères consiste à créer une nouvelle version d’une fonte existante en introduisant différentes altérations de design dans le but de l’adapter à un contexte spécifique. Cela peut inclure des modifications dans la forme des glyphes, la graisse, le contraste, l’espacement ou même le character-set.

📄 Extensions
Extensions

Desktop

OTF, TTF

Les polices destinées à un usage desktop sont installées localement sur l’ordinateur d’un utilisateur et utilisées dans des logiciels comme les applications de traitements de texte (Word, Pages,…) et de mise en page (InDesign, Illustrator,…).

Web

WOFF, WOFF2, EOT

Les polices destinées à un usage web sont compressées pour être utilisées directement sur des sites internet grâce à des langages comme le HTML et le CSS. Elles sont hébergées sur un serveur et chargées par le navigateur des utilisateurs lorsqu’ils visitent une page web.

Variable

OTF, TTF, WOFF, WOFF2

Les polices variables sont une nouvelle technologie qui permet d’inclure plusieurs styles (par ex., graisse, largeur, angle, etc.) dans un seul fichier de police. Cela permet aux designers de créer des variations infinies entre des styles définis sans avoir à installer plusieurs fichiers de police distincts. Ce format de police peut être utilisé pour de la mise en page, du développement web ou encore de l’animation vidéo.

🔗 Licenses

Le type de license est toujours spécifié et précisé dans l’EULA (End User License Agreement). C’est un contrat qui définit les conditions d’utilisation des police par l’utilisateur.rice final. Il précise ce que l’utilisateur est autorisé à faire (comme installer la police sur un nombre limité d’ordinateurs, l’utiliser pour des projets imprimés ou web) et ce qui est interdit (comme redistribuer, modifier, ou copier les polices).

Propriétaire

Une licence propriétaire est un contrat qui accorde à l’utilisateur.rice le droit d’utiliser une fonte, mais sans en posséder le code source ou les droits de modification et de redistribution. Les restrictions sont souvent strictes: l’utilisateur.rice ne peut pas copier, modifier, ni partager le produit sans autorisation explicite.

Libre

Une licence libre (open-source) permet généralement à l’utilisateur.rice d’utiliser, copier, modifier et redistribuer une fonte, souvent de manière gratuite et sans restriction. Elle garantit l’accès au code source et la liberté de l’adapter selon les besoins. Néamoins, il est toujours nécessaire d’aller vérifier ce qui est autorisé dans le contrat de license.

💻 Installation (check-in)

Réception des fichiers après signature de la charte pour toute la classe.

Livre des polices

Afin de pouvoir utiliser les fontes de la typothèque, il est nécessaire d’installer un logiciel de gestion des fontes. Un tel outil permet notamment:

  1. Créer les 9 collections suivantes
1. Incises
2. Scriptes
3. Sérifs
4. Slab-Sérifs
5. Sans-Sérifs
6. Expressives
7. Hybrides
8. Non-Latines
  1. Glisser le dossier de fontes correspondant sur chaque collection
  2. Pour chaque collection, sélectionner toutes les fontes (⌘ + A) > Désactiver
Installation

👩🏼‍💻 Usage Desktop

Choisir une fonte

  1. Éditer le mot d’aperçu
  2. Scroller à travers les différentes fontes
Choisir une fonte

Afficher les glyphes

  1. Affichage en mode exemple
  2. Affichage en mode échantillon > Sélectionner un glyphe
Afficher les glyphes

Afficher les informations

  1. Dans le panneau latéral de droite, ouvrir / fermer les différents menus déroulants
    • Description
    • Langues
    • Identifiants
    • Utilisation
    • Détails
Afficher les informations

Activer une fonte

  1. Choisir une fonte
  2. Clic droit > Activer le style
Activer une fonte

Informations complémentaires grâce aux tags

  1. Choisir une fonte
  2. Clic droit > Afficher dans le finder
  3. Fichier > Afficher les informations (⌘ + I)
Afficher les tags d’une fonte
Filtrer les fichiers de fontes grâce aux tags

🌐 Usage Web

Remplacer MyFont par le nom de votre fichier.

Déclarer une fonte

@font-face {
  font-family: 'MyFont';
  src: url('MyFont.eot'); /* IE9 Compat Modes */
  src: url('MyFont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('MyFont.woff2') format('woff2'), /* Super Modern Browsers */
       url('MyFont.woff') format('woff'), /* Pretty Modern Browsers */
       url('MyFont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('MyFont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Utiliser une fonte

body {
  font-family: 'MyFont', Fallback, sans-serif;
}

Fonctionnalités opentype

/* synthax */
.class {
  font-variant-ligatures: common-ligatures;
  -moz-font-feature-settings: "liga", "clig";
  -webkit-font-feature-settings: "liga", "clig";
  font-feature-settings: "liga", "clig";
}

/* use small-cap alternate glyphs */
.small-caps {
  font-feature-settings: "smcp" on;
}

/* convert both upper and lowercase to small caps (affects punctuation also) */
.all-small-caps {
  font-feature-settings: "c2sc", "smcp";
}

/* use zeros with a slash through them to differentiate from "O" */
.nice-zero {
  font-feature-settings: "zero";
}

/* enable historical forms */
.historical {
  font-feature-settings: "hist";
}

/* disable common ligatures, usually on by default */
.no-ligatures {
  font-feature-settings: "liga" 0;
}

/* enable tabular (monospaced) figures */
td.tabular {
  font-feature-settings: "tnum";
}

/* enable automatic fractions */
.fractions {
  font-feature-settings: "frac";
}

/* use the second available swash character */
.swash {
  font-feature-settings: "swsh" 2;
}

/* enable stylistic set 7 */
.fancy-style {
  font-family: Gabriola;
  font-feature-settings: "ss07";
}

Fonctionnalités variable

/* synthax */
.class {
  font-variation-settings: "wght" 850, "wdth" 100, "ital" 1;
}

/* adjust the weight */
.weight {
  font-weight: 600;
}

/* adjust the width */
.width {
  font-stretch: 75%;
}

/* adjust the slant */
.slant {
  font-style: oblique 15deg;
}

/* animate font weight on hover */
.class:hover {
  transition: font-weight 0.3s ease;
  font-weight: 800; 
}

🔥 Supression (check-out)

Chaque utilisateur.rice s’engage à supprimer tous les fichiers de fontes à la fin de son cursus.

  1. Aller > Se rendre au dossier
  2. Copier le chemin suivant (Macintosh HD > Users > YourName > Bibliothèque > Fonts)
~/Library/Fonts
  1. Coller le chemin > Enter
  2. Supprimer toutes les fontes qui appartiennent au catalogue de la typothèque.

➡️ Tags

Grâce aux tags sur mac, il est possible filtrer les fontes en fonction de critères de recherche directement dans le finder. Sur windows, il faut se référer au tableau du catalogue ci-dessous.

Tag Titre Valeur
➡️ é_Hst Classification Historique3 Inc / Scr / Sér / Slab / Sans / Exp /Hyb / NonL
➡️ é_ForP Classification Formelle Principe Dyn(amique) / Sta(tique) / Géo(métrique)
➡️ é_ForC Classification Formelle Contraste Con(trasté) / Lin(éaire)
➡️ é_ForT Classification Formelle Terminaisons Avec / Sans
➡️ é_Typ Typologie Cla(ssique) / Mod(erne) / –
➡️ é_Lic License Pro(priétaire) / Lib(re)
➡️ é_Ext Extensions — / Var(iable)

🔠 Catalogue

Police é_Hst é_ForP é_ForC é_ForT é_Typ é_Lic é_Ext
Africa 6_Exp       Mod Pro  
Agatha 3.4_Sér_Didones Sta Ctr Avec   Pro Var
Akzidenz Grotesk Next 5.1_Sans_Grotesques Sta Lin Sans Cla Pro  
Alaska 5.3_Sans_Géométriques Géo Lin Sans   Pro Var
Allegra 5.2_Sans_Humanistes Dyn Lin Sans Mod Pro  
Aloha 4.2_Slab_Monos         Pro Var
Alpaga 4.2_Slab_Monos         Pro Var
Alte Schwabacher D 2.2_Scr_Fractures       Cla Pro  
Alverata 1_Inc       Mod Pro  
Amazonia 3.4_Sér_Didones Sta Ctr Avec   Pro Var
Angela 6_Exp       Mod Pro  
Antarctica 5.1_Sans_Grotesques Sta Lin Sans   Pro Var
Antique Legacy 5.1_Sans_Grotesques Sta Lin Sans Mod Pro  
Apax 5.3_Sans_Géométriques Géo Lin Sans Mod Pro  
Armada 6_Exp       Mod Pro  
Arnhem 3.3_Sér_Réales Dyn Ctr Avec Mod Pro  
Arno 3.1_Sér_Humanes Dyn Ctr Avec Cla Pro  
Artex 5.3_Sans_Géométriques Géo Lin Sans   Pro Var
Atacama 3.2_Sér_Garaldes Dyn Ctr Avec   Pro Var
Atlantique Miami 3.3_Sér_Réales Dyn Ctr Avec   Pro Var
Atlas Grotesk 5.1_Sans_Grotesques Sta Lin Sans Mod Pro  
Avant Garde Gothic 5.3_Sans_Géométriques Géo Lin Sans Cla Pro  
Avenir Next 5.3_Sans_Géométriques Géo Lin Sans Cla Pro  
Azaka 6_Exp       Mod Pro  
Azteca 6_Exp       Mod Pro  
Baikal 5.1_Sans_Grotesques Sta Lin Sans   Pro Var
Balance 5.2_Sans_Humanistes Dyn Lin Sans Cla Pro  
Bodoni 3.4_Sér_Didones Sta Ctr Avec Cla Pro  
Bradford 3.3_Sér_Réales Dyn Ctr Avec Mod Pro  
Breeze Sans 5.2_Sans_Humanistes Dyn Lin Sans   Lib  
Caflisch Script 2.3_Scr_Cursives       Cla Pro  
Caslon 224 3.3_Sér_Réales Dyn Ctr Avec Cla Pro  
Centaur 3.1_Sér_Humanes Dyn Ctr Avec Cla Pro  
Chaparral 4.1_Slab_Mécanes Sta Ctr Avec Cla Pro  
Charter 3.3_Sér_Réales Dyn Ctr Avec Cla Pro  
Clarendon Graphic 4.1_Slab_Mécanes Sta Ctr Avec Mod Pro  
Cochin 3.2_Sér_Garaldes Dyn Ctr Avec Cla Pro  
Cooper Hewitt 5.1_Sans_Grotesques Sta Lin Sans   Lib  
Courier 4.2_Slab_Monos       Cla Pro  
Crystal 5.1_Sans_Grotesques Sta Lin Sans   Pro Var
Custodia 3.3_Sér_Réales Dyn Ctr Avec Mod Pro  
Didot Elder 3.4_Sér_Didones Sta Ctr Avec Mod Pro  
Didot Modern 3.4_Sér_Didones Sta Ctr Avec Mod Pro  
Didot 3.4_Sér_Didones Sta Ctr Avec Cla Pro  
Dominicale 6_Exp       Mod Pro  
Egyptienne F 4.1_Slab_Mécanes Sta Ctr Avec Cla Pro  
English 111 2.3_Scr_Cursives       Cla Pro  
Estuary 3.2_Sér_Garaldes Dyn Ctr Avec Mod Pro  
European Pi 8_NonL       Cla Pro  
Fedra Mono 4.2_Slab_Monos       Mod Pro  
Fedra Sans 5.2_Sans_Humanistes Dyn Lin Sans Mod Pro  
Fedra SerifAB 3.2_Sér_Garaldes Dyn Ctr Avec Mod Pro  
Fedra 7_Hyb       Mod Pro  
Fira 5.2_Sans_Humanistes Dyn Lin Sans   Lib  
Fleischmann 3.3_Sér_Réales Dyn Ctr Avec Mod Pro  
Founders Grotesk 5.1_Sans_Grotesques Sta Lin Sans Mod Pro  
Franklin Gothic 5.1_Sans_Grotesques Sta Lin Sans Cla Pro  
Fraunces 6_Exp         Lib  
Frutiger 5.2_Sans_Humanistes Dyn Lin Sans Cla Pro  
Futura 5.3_Sans_Géométriques Géo Lin Sans Cla Pro  
Garamond Premier 3.2_Sér_Garaldes Dyn Ctr Avec Cla Pro  
Geograph 5.3_Sans_Géométriques Géo Lin Sans Mod Pro  
Gill Sans 5.2_Sans_Humanistes Dyn Lin Sans Cla Pro  
Glypha 4.1_Slab_Mécanes Sta Ctr Avec Cla Pro  
Goudy Text 2.2_Scr_Fractures       Cla Pro  
Gradot 3.3_Sér_Réales Dyn Ctr Avec Mod Pro  
Heldane 3.2_Sér_Garaldes Dyn Ctr Avec Mod Pro  
Helvetica Neue 5.1_Sans_Grotesques Sta Lin Sans Cla Pro  
Herculanum 1_Inc       Cla Pro  
Hermes 5.3_Sans_Géométriques Géo Lin Sans Mod Pro  
Humanistika 2.1_Scr_Onciales       Cla Pro  
IBM Plex 7_Hyb         Lib  
Ibarra Real Nova 3.3_Sér_Réales Dyn Ctr Avec   Lib  
Infini 1_Inc       Mod Pro  
JJannon 3.2_Sér_Garaldes Dyn Ctr Avec Mod Pro  
Jenson 3.1_Sér_Humanes Dyn Ctr Avec Cla Pro  
Johnston 5.2_Sans_Humanistes Dyn Lin Sans Cla Pro  
Lapture 3.2_Sér_Garaldes Dyn Ctr Avec Mod Pro  
Literata 3.3_Sér_Réales Dyn Ctr Avec   Lib  
Lithos 1_Inc       Cla Pro  
Ludwig 5.1_Sans_Grotesques Sta Lin Sans Mod Pro  
Lutetia Nova 3.1_Sér_Humanes Dyn Ctr Avec Cla Pro  
Mathematical Pi 8_NonL       Cla Pro  
Media77 3.3_Sér_Réales Dyn Ctr Avec Mod Pro  
Millionaire 2.3_Scr_Cursives       Mod Pro  
Minion 3.2_Sér_Garaldes Dyn Ctr Avec Cla Pro  
Moderne 5.2_Sans_Humanistes Dyn Lin Sans Mod Pro  
Monaako 2.3_Scr_Cursives       Mod Pro  
New Baskerville 3.3_Sér_Réales Dyn Ctr Avec Cla Pro  
Newsreader 3.2_Sér_Garaldes Dyn Ctr Avec   Lib  
November Slab 4.1_Slab_Mécanes Sta Ctr Avec Mod Pro  
November 7_Hyb       Mod Pro  
NovemberL 5.2_Sans_Humanistes Dyn Lin Sans Mod Pro  
OCR F 4.2_Slab_Monos       Cla Pro  
Oddity 6_Exp       Mod Pro  
Omnia 2.1_Scr_Onciales       Cla Pro  
Open Sans 5.2_Sans_Humanistes Dyn Lin Sans   Lib  
Palatino 3.2_Sér_Garaldes Dyn Ctr Avec Cla Pro  
Parmigiano Serif 3.4_Sér_Didones Sta Ctr Avec Mod Pro  
Pfeffer Mediaeval 2.1_Scr_Onciales       Mod Pro  
Pfeffer Simpelgotisch 2.2_Scr_Fractures       Mod Pro  
Ping 5.2_Sans_Humanistes Dyn Lin Sans Mod Pro  
Plain 5.1_Sans_Grotesques Sta Lin Sans Mod Pro  
Pompeijana 2.1_Scr_Onciales       Cla Pro  
Practice 3.2_Sér_Garaldes Dyn Ctr Avec Mod Pro  
Public Sans 5.1_Sans_Grotesques Sta Lin Sans   Lib  
Publico Text 3.3_Sér_Réales Dyn Ctr Avec Mod Pro  
Red Hat 7_Hyb         Lib  
Roboto 7_Hyb         Lib  
Ruder Plakat 6_Exp       Cla Pro  
Serifa 4.1_Slab_Mécanes Sta Ctr Avec Cla Pro  
Snell Roundhand 2.3_Scr_Cursives       Cla Pro  
Source 7_Hyb         Lib  
Space Mono 4.2_Slab_Monos       Lib    
Spectral 3.3_Sér_Réales Dyn Ctr Avec   Lib  
Stardust 6_Exp       Mod Pro  
Supreme 5.3_Sans_Géométriques Géo Lin Sans Mod Pro  
Syntax Lapidar 1_Inc       Cla Pro  
The AntiquaB 3.2_Sér_Garaldes Dyn Ctr Avec Mod Pro  
The Mix Mono 4.2_Slab_Monos       Mod Pro  
The Sans 5.2_Sans_Humanistes Dyn Lin Sans Mod Pro  
The Serif 4.1_Slab_Mécanes Sta Ctr Avec Mod Pro  
Thesis 7_Hyb       Mod Pro  
Tiina 3.2_Sér_Garaldes Dyn Ctr Avec Mod Pro  
Times New Roman 3.3_Sér_Réales Dyn Ctr Avec Cla Pro  
Trajan 1_Inc       Cla Pro  
Unica77 5.1_Sans_Grotesques Sta Lin Sans Mod Pro  
Univers 5.1_Sans_Grotesques Sta Lin Sans Cla Pro  
Walbaum Fraktur 2.2_Scr_Fractures       Cla Pro  
Walbaum 3.4_Sér_Didones Sta Ctr Avec Cla Pro  
Weiss Rundgotisch D 2.2_Scr_Fractures       Cla Pro  
Zapf Dingbats 8_NonL       Cla Pro  
Zapfino Extra 2.3_Scr_Cursives       Cla Pro  

📎 Sources

  1. Illustration tirée du livre Type, Sign, Symbol de Adrian Frutiger (1980). ↩

  2. Illustration tirée du livre Le trait. Une théorie de l’écriture de Gerrit Noordzij (2010) + ajout du principe géométrique basé sur le système de classification de Indra Kupferschmid. ↩

  3. Inc(ises) / Scr(iptes) / Sér(ifs) / Slab(-Sérifs) / Sans(-Sérifs) / Exp(ressives) / Hyb(rides) / NonL(atines) ↩