typographie

typotap

Introduction

En 26 jours de confinement, je viens de finir un alphabet animé de 26 lettres, visible sur https://typotap.jenseign.com, le projet se situe entre patatap, le cédérom Alphabet et d’autres inspirations.
Décortication.

Trois ingrédients

Pour faire votre propre typotap, il vous faut :

  • Environ 26 SVG ;
  • 26 MP3 ;
  • 200 gr de JavaScript.

Les SVG

Pour les SVG, il est nécessaire de comprendre, le dessin en SVG via un logiciel de votre choix (Illustrator, Figma, InkScape, Affinity Designer), la balise <g> et les options de la balise <svg> pour certains cas (preserveAspectRatio).

Les MP3

Par défaut, les animations vont être créées avec une base temporelle en seconde, pour certains sons rythmiques, j’ai réglé les BPM à 120 ou 60 (astuce offerte).

Le JavaScript

On décompose les connaissances :

  • Détecter les événements du clavier — les touches pressées (niveau débutant) ;
  • Charger un SVG en JavaScript (pas débutant, mais facile à écrire avec un exemple) ;
  • Animer le SVG, on utilisera la librairie GSAP (niveau moyen) ;
  • Lire le MP3, on utilisera ToneJS (niveau débutant avec un exemple) ;
  • Retirer le SVG (une ligne :))

Récipient

L’ensemble des ingrédients sera mélangé dans votre navigateur, de préférence à jour et on monte le tout dans une page HTML, avec un peu de CSS.

En pratique

On commence par le clavier et le JavaScript.

See the Pen clavier by Benoît Wimart (@benoitwimart) on CodePen.dark

Puis pour le SVG, on va chercher le fichier (fetch) et si on le trouve (internet ok, le site ok, le fichier existe…), dès qu’il est totalement chargé, on l’insère dans l’élément « #play ».

Fetch permet de charger un fichier venant d’un autre site, mais pour des raisons de sécurité, les Blocage de requêtes multiorigines (Cross-Origin Request) sont courants (ici jenseign.com est bloqué sur codepen, mais pas « s3-us-west‑2.amazonaws.com/s.cdpn.io ».

See the Pen fetch svg by Benoît Wimart (@benoitwimart) on CodePen.dark

Les deux ensemble (en supposant que le svg est dans le même dossier) :

const play = document.querySlector('#play');
 
function load(letter){
  fetch(letter+'.svg') // concatenation, je charge a.svg ou b.svg … z.svg 
    .then(function(response){
      if(response.ok){
        response.text().then(function(svg){
          play.insertAdjacentHTML("beforeend", svg);
        });
      }
  });
}
 
document.addEventListener('keyup',function(e){
  load(e.key); // une fonction qui charge 
});
Attention, pas mal fonctionnalités JavaScript nécessitent un serveur pour marcher. Trois solutions, mettre en ligne, installer un serveur local ou utiliser l’extension live server de VS Code. Si votre adresse dans le navigateur commence par « file:/// », vous devez résoudre d’abord ce problème.

J’anime

Voici l’avant dernière étape, l’animation, il faut connaitre les fonctions, GSAP et l’overlap (la superposition) en CSS avec Grid.
L’ensemble est ici sur Repl.it.

C’est ici qu’il faut jongler entre la créatvité, le SVG, GSAP et le logiciel de musique (Audacity pour voir le timing).
const play = document.querySelector('#play');
 
function load(letter){
  fetch(letter+'.svg') // concatenation, je charge a.svg ou b.svg … z.svg 
    .then(function(response){
      if(response.ok){
        response.text().then(function(svg){
          // insertion professionnelle
          play.insertAdjacentHTML("beforeend", svg);
          // on ajoute un id avec la lettre et la date en ms
          // depuis 1970 pour le rendre unique
          // ex : r1586771234272 
          // https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date/now
          play.lastElementChild.id = letter + Date.now(); 
          // la fonction qui animera
          // je lui donne la lettre, l'élément et l'id
          anim(letter,play.lastElementChild,play.lastElementChild.id);
 
        });
      }
  });
}
 
document.addEventListener('keyup',function(e){
  load(e.key); // une fonction qui charge 
});
 
function anim(letter,el,id){
    // je récupère la letter, l'élément et l'id pour gsap et le switch 
    // voir la doc mdn sur le switch/case 
    switch(letter) {
      case 'r':
          // j'attache une timeline à l'élément
          el.tl_= gsap.timeline();
          // gsap to
          el.tl_.to('body',{backgroundColor:'#F90'});
          // '#'+id+' .r' sera '#r1586771234272 .r'
          el.tl_.to('#'+id+' .r',{duration:.2,rotation:-15,transformOrigin:'left bottom',repeat:1,yoyo:true,ease:'power1.out'},0);
          el.tl_.to('#'+id,{scale:1.1,transformOrigin:'.5 .5',opacity:0,duration:2,ease:'power1'},0);
          // on enchaine et efface l'élément quand l'animation est finie :) 
          el.tl_.call(function(){el.remove()});
      break;
 
      // avec les autres lettres
      /*
      case 's':
          el.tl_= gsap.timeline();
          el.tl_.to('body',{backgroundColor:'#000'});
          el.tl_.to('#'+id+' .s',{duration:.2,rotation:-15,transformOrigin:'left bottom',repeat:1,yoyo:true,ease:'power1.out'},0);
          el.tl_.to('#'+id,{scale:1.1,transformOrigin:'.5 .5',opacity:0,duration:2,ease:'power1'},0);
          el.tl_.call(function(){el.remove()});
      break;
      */
    }
}

Let’s the musique play

J’ajoute la librairie dans la page d’HTML.
Je connnais peu ToneJS, mais le sampler permet de charger nos sons et avoir une polyphonie.
Pour TypoTap, après chargement, j’ajoute l’écouteur d’événement du clavier.

Voici la demo sur repl.it

Le code JavaScript :

const play = document.querySelector('#play');
 
/* TONE JS */
const alphabet = new Tone.Sampler({
  "F3":"r.mp3", // , <- virgule
  "G3":"s.mp3" // on liste les sons ici
  }, // <- virgule
  function(){ 
    // quand les mp3 sont chargés, on ajoute l'écouteur de clavier
    // ce bout de code était plus bas
    document.addEventListener('keyup',function(e){
      load(e.key); // une fonction qui charge 
    });
  }
).toMaster(); // <- un truc de toneJS pour envoyer le son
 
function load(letter){
  fetch(letter+'.svg') // concatenation, je charge a.svg ou b.svg … z.svg 
    .then(function(response){
      if(response.ok){
        response.text().then(function(svg){
          // insertion professionnelle
          play.insertAdjacentHTML("beforeend", svg);
          // on ajoute un id avec la lettre et la date en ms
          // depuis 1970 pour le rendre unique
          // ex : r1586771234272 
          // https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date/now
          play.lastElementChild.id = letter + Date.now(); 
          // la fonction qui animera
          // je lui donne la lettre, l'élément et l'id
          anim(letter,play.lastElementChild,play.lastElementChild.id);
 
        });
      }
  });
}
 
 
 
function anim(letter,el,id){
    // je récupère la letter, l'élément et l'id pour gsap et le switch 
    // voir la doc mdn sur le switch/case 
    switch(letter) {
      case 'r':
          /* Tone JS en action */
          alphabet.triggerAttack("F3");
 
          // j'attache une timeline à l'élément
          el.tl_= gsap.timeline();
          // gsap to
          el.tl_.to('body',{backgroundColor:'#F90'});
          // '#'+id+' .r' sera '#r1586771234272 .r'
          el.tl_.to('#'+id+' .r',{duration:.2,rotation:-15,transformOrigin:'left bottom',repeat:1,yoyo:true,ease:'power1.out'},0);
          el.tl_.to('#'+id,{scale:1.1,transformOrigin:'.5 .5',opacity:0,duration:2,ease:'power1'},0);
          // on enchaine et efface l'élément quand l'animation est finie :) 
          el.tl_.call(function(){el.remove()});
      break;
 
      // avec les autres lettres
      /*
      case 's':
          el.tl_= gsap.timeline();
          el.tl_.to('body',{backgroundColor:'#000'});
          el.tl_.to('#'+id+' .s',{duration:.2,rotation:-15,transformOrigin:'left bottom',repeat:1,yoyo:true,ease:'power1.out'},0);
          el.tl_.to('#'+id,{scale:1.1,transformOrigin:'.5 .5',opacity:0,duration:2,ease:'power1'},0);
          el.tl_.call(function(){el.remove()});
      break;
      */
    }
}

Remplir avec du texte

Petite exercice pour remplir « sans dépasser » de lettres au hasard un bloc html.

L’idée est de remplir chaque ligne de lettre en chasse fixe (monospace) et d’ajouter un retour à la ligne pour avoir un bloc plein.
Attention : ce code est pour le fun et n’est pas parfait (certains caractères ne passent pas et la preview du codepen ne marche pas).

Le code est aussi commenté dans CodePen.

/* Ajouter GSAP*/
 
var fill  = document.querySelector('.fill'); // je cible la première div.fill
var wl; // largeur d'une lettre 
var hl; // hauteur
var w; // largeur de la fenêtre
var h; // hauteur
 
/* fonction de lettre random via gsap */
// https://greensock.com/docs/v3/GSAP/UtilityMethods/random
var randomLetter = gsap.utils.random('-abcdeABCDEF+*,#_!:\.?/='.split(''),true);
 
/*
étape 1 : prendre les dimensions
*/
function ini(){
  w = window.innerWidth; // largeur de la fenetre 
  h = window.innerHeight; // hauteur
  fill.style.display = 'inline-block'; // par défaut display block prend toute la largeur; 
  // inline-block prend juste la largeur du texte 
  fill.innerHTML = '0123456789'; // j'ajoute 10 glyphs 
  wl = fill.clientWidth/10; // je divise par 10 pour avoir la taille d'un glyph
  fill.innerHTML = '0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9'; // idem en hauteur
  hl = fill.clientHeight/10; // ok
  fill.style.display = 'block'; // je remets 
  console.log(w,h,wl,hl)
  fill.innerHTML = ''; // je vide
}
 
ini(); // je lance la fonction ini
 
/*
étape 2 : on remplit
un peu de math
Si j'ai 13 px et des lettres de 4 px, je peux en mettre 3.
13/4 = 3,25, on supprime le reste après la virgule -> 3.
Math.floor(3.25) = 3 
*/
 
function fillit(){
  let maxX = Math.floor(w/wl); // nombre max en x
  let maxY = Math.floor(h/hl); // nombre max en y
  let innerhtml = ''; // variable temporaire qui contient le texte
 
  /* boucle dans une boucle */
  for(let y=0;y<maxY;y++){ 
    for(let x=0;x<maxX;x++){
      innerhtml+=randomLetter(); // truc de gsap
    }
    innerhtml+='<br>'; // on passe à ligne
  }
  fill.innerHTML = innerhtml; // on remplit l'élement html avec innerhtml
}
 
fillit(); // je lance …
 
/* bonus */
window.addEventListener('resize',function(){
  ini();
  fillit();
})

See the Pen remplir avec du texte by Benoît Wimart (@benoitwimart) on CodePen.dark

Tranches, clip-path, découpe & typographie

Comment couper une lettre ou un élément en plusieurs morceaux ?

Clip-path

Clip-path permet de faire un masque sur un élément HTML.
Différentes valeurs sont possibles :

clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path('…');

La valeur inset(0) permet de cacher comme un overflow:hidden, mais avec la possibilité de faire un position:absolute.

See the Pen a by Benoît Wimart (@benoitwimart) on CodePen.default

La grille (grid)

Le display grid divise en tranches horizontales (un enfant = une tranche).

See the Pen AAA by Benoît Wimart (@benoitwimart) on CodePen.default

Combinaison

Il manque un truc ;¬)

See the Pen AAAAA by Benoît Wimart (@benoitwimart) on CodePen.default

On jongle avec absolute/relative…

See the Pen A&a by Benoît Wimart (@benoitwimart) on CodePen.default

Variation

See the Pen Aa by Benoît Wimart (@benoitwimart) on CodePen.default

effet sur le texte et logique HTML

Pour s’entrainer, voici un exercice pratique.
Comment mettre un fond rectangulaire incliné derrière un titre (droit) ?

Avec les éléments h1 et span

Pour être dans le respect de la sémantique, je dois mettre le texte avec une balise de titrage (ici h1, mais h2 peut convenir si vous êtes dans une sous-partie de la page).
Pour mettre un fond seulement derrière le texte, il faudra ajouter une span, une balise neutre utilisée pour des réglages « visuels ». Enfin pour incliner le fond, il faudra pivoter celui-ci dans un sens et le texte dans l’autre, ce qui ajoute une seconde span.

See the Pen pastille by Benoît Wimart (@benoitwimart) on CodePen.0

Avec les pseudo-élements

Cette variante est assez complexe, elle aborde des notions des prochains cours et des astuces CSS.

See the Pen pastille et pseudo élement by Benoît Wimart (@benoitwimart) on CodePen.0

Variables partout

Variables & CSS

Depuis quelques années, CSS propose d’utiliser des variables.

:root {
  --font-base: 64px;
}
body{
  font-size:var(--font-base);
}

Cette écriture lourde et étrange, n’apporte rien face à des outils/langages comme le SCSS et personnellement je ne l’utilise pas. Néanmoins, on peut facilement créer une interaction avec celle-ci et du JavaScript, ce qui rend la chose plus attrayante !
Avant de faire plus de code, un petit prérequis avec « calc », pour supprimer les unités, c’est juste une histoire de goût pour le JS final.

:root {
  --font-base: 64; // sans px
}
body{
  font-size:calc(var(--font-base) * 1px); // 64px
}

Variables CSS & JS

La communication entre les deux est plutôt simple :

var dS = document.documentElement.style; //le style de la balise <html>
dS.setProperty('--font-base', 128); // je modifie la valeur de --font-base à 128

Avec du JavaScript et des input d’HTML5 (type = ‘range’) :

See the Pen variable partout by Benoît Wimart (@benoitwimart) on CodePen.0

Et avec des fontes variables ? ✌️

Les fontes variables sont de plus en plus nombreuses, il s’agit d’avoir un seul fichier et de jouer avec des opérations mathématiques pour produire différentes graisses, italiques ou formes.
Pour la suite, je suis passé chez Velvetyne télécharger la Tiny. Un fichier m’intéresse plus que les autres, c’est la fonte variable disponible sur GitHub.
Je place le fichier dans le même dossier que ma page pour la démonstration.

    @font-face {
      font-family:'tiny';
      font-style:normal;
      font-weight:400;
      src:url("TINY5x3GX.ttf") format("truetype"); // ou src:url("/Range-mieux/tonDossier/fontes/TINY5x3GX.ttf") format("truetype");
    }

Pour faire varier le « point » en CSS:

font-variation-settings: "wght" 200;

Selon les fontes, les paramètres sont plus ou moins nombreux et s’ajoutent à la suite.
Sur la fonte Graduate on peut ajuster 12 variables !

font-variation-settings: "XOPQ" 76.92, "XTRA" 400, "OPSZ" 16, "GRAD" 5.37, "YTRA" 783.75, "CNTR" 35.64, "YOPQ" 318.68, "SERF" 5.42, "YTAS" 17.82, "YTLC" 691.92, "YTDE" 20.64, "SELE" -12.12;'

Version finale

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Tiny Test</title>
  <style>
    :root {
      --font-base: 64;
      --r:255;
      --v:255;
      --b:0;
      --wght:60;
    }
 
    @font-face {
      font-family:'tiny';
      font-style:normal;
      font-weight:400;
      src:url("TINY5x3GX.ttf") format("truetype");
    }
 
    .interface{
      padding:24px;
      display:flex;
      background: #fff;
      font-family: sans-serif;
    }
 
    body{
      background:rgb(calc(255 - var(--r)),calc(255 - var(--v)),calc(255 - var(--b)));
      margin:0;
    }
 
    article{
      padding:24px;
      font-size:  calc(var(--font-base) * 1px);
      color:rgb(var(--r),var(--v),var(--b));
      font-family: "tiny";
      font-variation-settings: "wght" var(--wght);
    }
 
    p{
      margin:0;
    }
 
    input,label{
      font-size: 16px;
      display:inline;
      margin-right:12px;
    }
 
    input{
      margin-right:32px;
    }
 
  </style>
</head>
<body>
  <div class="interface">
    <label for="fader-size">Font-Size</label>
  <input type="range" min="16" max="256" value="64" id="fader-size" step="1">
 
  <label for="fader-r">R</label>
  <input type="range" min="0" max="255" value="255" id="fader-r" step="1">
 
  <label for="fader-v">V</label>
  <input type="range" min="0" max="255" value="255" id="fader-v" step="1">
 
  <label for="fader-v">B</label>
  <input type="range" min="0" max="255" value="0" id="fader-b" step="1">
 
    <label for="fader-wght">WGHT</label>
  <input type="range" min="20" max="300" value="60" id="fader-wght" step="1">
  </div>
  <article>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, sit dolore nostrum aliquam a consequuntur ducimus alias dignissimos maiores corrupti quidem non dolores est assumenda quis ea quae ipsum placeat!</p>
 
  </article>
<script>
  var faderSize = document.querySelector('#fader-size');
  var faderR = document.querySelector('#fader-r');
  var faderV = document.querySelector('#fader-v');
  var faderB = document.querySelector('#fader-b');
  var faderWGHT = document.querySelector('#fader-wght');
 
  var dS = document.documentElement.style;
 
  faderSize.addEventListener('input',function(e){
    console.log(faderSize.value);
    dS.setProperty('--font-base', this.value);
  });
 
  faderR.addEventListener('input',function(e){
    dS.setProperty('--r', this.value);
  });
 
  faderV.addEventListener('input',function(e){
    dS.setProperty('--v', this.value);
  });
 
  faderB.addEventListener('input',function(e){
    dS.setProperty('--b', this.value);
  });
 
  faderWGHT.addEventListener('input',function(e){
    dS.setProperty('--wght', this.value);
  });
 
 
</script>
 
</body>
</html>

Le faux gras

Le faux gras est un problème courant sur le web (attention, je ne parle pas de faux foie-gras) ; il se manifeste quand vous utilisez une police sans « version bold » dans un style gras. Le navigateur ajoute alors un contour sur le caractère et le résultat n’est plus correct, on perd en lisibilité, les « trous » se bouchent et le texte est gonflé.

La faute à ?

Il n’y a pas de coupable, juste une logique d’ordinateur qui va compenser l’absence du fichier correcte par un effet. La bonne graisse n’est pas sur votre ordinateur ou n’est pas chargée en @font-face (via Google Fonts, autres ou à la main), le navigateur prend alors la graisse existante et « se débrouille ».
Le problème n’est pas nouveau, s’applique aussi au print et existe aussi en version faux italique (oblique)

Voici un exemple de faux gras (passez la souris sur le texte pour voir la version corrigée).
Je charge une typo avec Google et cette feuille de styles :

/* latin */
@font-face {
  font-family: 'Fredoka One';
  font-style: normal;
  font-weight: 400;
  src: local('Fredoka One'), local('FredokaOne-Regular'), url(https://fonts.gstatic.com/s/fredokaone/v6/k3kUo8kEI-tA1RRcTZGmTlHGCaen8wf-.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

La graisse (font-weight) de 400 correspond à normal (contre 700 pour Bold).


Récapitulation des chiffres :
100 	Thin (Hairline)
200 	Extra Light (Ultra Light)
300 	Light
400 	Normal
500 	Medium
600 	Semi Bold (Demi Bold)
700 	Bold
800 	Extra Bold (Ultra Bold)
900 	Black (Heavy)

J’utilise un h1, qui sera par défaut en gras.

<h1>faux-gras</h1>

See the Pen faux gras by Benoît Wimart (@benoitwimart) on CodePen.0

L’art du bon @font-face

Attention à vos @font-face, voici la bonne manière de définir une famille de graisses :

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400;
  src:; /* le ou les fichiers du Fredoka regular */
}
@font-face {
  font-family: 'Fredoka'; /* le même nom */
  font-style: normal;
  font-weight: 700; /* ici c'est 700 */
  src: /* le ou les fichiers du Fredoka Bold */ ;
}

Voici une manière déconseillée :

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400;
  src:; /* le ou les fichiers du Fredoka regular */
}
@font-face {
  font-family: 'Fredoka Bold'; /* le nom avec la graisse  */
  font-style: normal;
  font-weight: 700; 
  src: /* le ou les fichiers du Fredoka Bold */ ;
}

Qui donnera ce genre d’écriture :

body{
  font-family: 'Fredoka';
}
h1{
  font-family: 'Fredoka Bold'; /* sinon : faux gras */
}

La Faune et la fonte #cnap

Bien utiliser @font-face n’est pas toujours simple, voici un exemple avec le caractère Faune.
Le Faune est « Un caractère typographique créé par Alice Savoie » pour « Une commande du Centre national des arts plastiques ».
Un excellent site explique le projet à cette adresse : http://www.cnap.graphismeenfrance.fr/faune/.

Néanmoins, à l’heure actuelle le site étant en « http », si votre site est en « https », la méthode de la feuille de style liée (comme sur Google Font), ne marchera pas sur les navigateurs modernes.

<link rel='stylesheet' href='http://www.cnap.graphismeenfrance.fr/faune/styles/faune-fontes.css'><!-- pas en https -->

La solution consiste à télécharger la fonte (en .zip sur le site).

Renommer le dossier Webfonts (en bleu sur l’image) en « fonts ».
Copier ce dossier « fonts » dans le même dossier que votre feuille de styles.
Ajouter ce code au début de votre feuille de styles :

@font-face {
  font-family: Faune;
  src: url(fonts/eot/Faune-Display_Thin.eot);
  src: url(fonts/eot/Faune-Display_Thin.eot?#iefix) format("embedded-opentype"),
       url(fonts/woff2/Faune-Display_Thin.woff2) format("woff2"),
       url(fonts/woff/Faune-Display_Thin.woff) format("woff"),
       url(fonts/ttf/Faune-Display_Thin.ttf) format("truetype"),
       url(fonts/svg/Faune-Display_Thin.svg#Faune-Display_Thin) format("svg");
  font-weight: 100;
  font-style: normal
}
 
@font-face {
  font-family: Faune;
  src: url(fonts/eot/Faune-Text_Bold.eot);
  src: url(fonts/eot/Faune-Text_Bold.eot?#iefix) format("embedded-opentype"),
       url(fonts/woff2/Faune-Text_Bold.woff2) format("woff2"),
       url(fonts/woff/Faune-Text_Bold.woff) format("woff"),
       url(fonts/ttf/Faune-Text_Bold.ttf) format("truetype"),
       url(fonts/svg/Faune-Text_Bold.svg#Faune-Bold) format("svg");
  font-weight: 700;
  font-style: normal
}
 
@font-face {
  font-family: Faune;
  src: url(fonts/eot/Faune-Text_Italic.eot);
  src: url(fonts/eot/Faune-Text_Italic.eot?#iefix) format("embedded-opentype"),
       url(fonts/woff2/Faune-Text_Italic.woff2) format("woff2"),
       url(fonts/woff/Faune-Text_Italic.woff) format("woff"),
       url(fonts/ttf/Faune-Text_Italic.ttf) format("truetype"),
       url(fonts/svg/Faune-Text_Italic.svg#Faune-Text_Italic) format("svg");
  font-weight: 400;
  font-style: italic
}
 
@font-face {
  font-family: Faune;
  src: url(fonts/eot/Faune-Display_Black.eot);
  src: url(fonts/eot/Faune-Display_Black.eot?#iefix) format("embedded-opentype"),
       url(fonts/woff2/Faune-Display_Black.woff2) format("woff2"),
       url(fonts/woff/Faune-Display_Black.woff) format("woff"),
       url(fonts/ttf/Faune-Display_Black.ttf) format("truetype"),
       url(fonts/svg/Faune-Display_Black.svg#Faune-Display_Black) format("svg");
  font-weight: 900;
  font-style: normal
}
 
@font-face {
  font-family: Faune;
  src: url(fonts/eot/Faune-Display_Bold_Italic.eot);
  src: url(fonts/eot/Faune-Display_Bold_Italic.eot?#iefix) format("embedded-opentype"),
       url(fonts/woff2/Faune-Display_Bold_Italic.woff2) format("woff2"),
       url(fonts/woff/Faune-Display_Bold_Italic.woff) format("woff"),
       url(fonts/ttf/Faune-Display_Bold_Italic.ttf) format("truetype"),
       url(fonts/svg/Faune-Display_Bold_Italic.svg#Faune-Display_Bold_Italic) format("svg");
  font-weight: 700;
  font-style: italic
}
 
@font-face {
  font-family: Faune;
  src: url(fonts/eot/Faune-Text_Regular.eot);
  src: url(fonts/eot/Faune-Text_Regular.eot?#iefix) format("embedded-opentype"),
       url(fonts/woff2/Faune-Text_Regular.woff2) format("woff2"),
       url(fonts/woff/Faune-Text_Regular.woff) format("woff"),
       url(fonts/ttf/Faune-Text_Regular.ttf) format("truetype"),
       url(fonts/svg/Faune-Text_Regular.svg#Faune-Text_Regular) format("svg");
  font-weight: 400;
  font-style: normal
}

Explications

Chaque @font-face donne le nom « Faune » au caractère, chaque src correspond aux fichiers sources pour les différents navigateurs (internet Explorer, Safari, Chrome, Firefox…). Le font-weight et le font-style définissent la graisse et le style des fichiers sources, cela permet d’avoir le vrai italique et la bonne graisse automatiquement.

Si vous avez réussi ce code, la font-family pourra être appliqué en CSS :

font-family: 'Faune', sans-serif;
Attention ! Si la fonte est déjà sur votre ordinateur, un test sur celui-ci ne prouve pas un CSS correctement écrit, pensez à désactiver la police temporairement. Vérifiez deux fois que les fichiers sont dans les bons dossiers ! Testez sur une autre machine !

open source / copyright

En complément des conférences, voici deux documentaires. Le premier raconte l’histoire de Linux et plus, le second parle du copyright.


RiP : remix manifesto (à voir gratuitement sur le site de l’ONF)

Bonus :
Revolution OS (2001)

Quelques liens vus en conférence

Typographie

Visual Data

évaluation

Voici quelques remarques importantes pour la qualité de votre rendu.

Critères d’évaluation

Le site est en ligne !

Sans css

Votre site marche sans CSS, je peux visiter le site et voir toutes les pages. Le HTML fait son rôle, certes le document ressemble à un fichier Word, mais les bases sont là.

Dans ton code HTML

  1. Un seul CSS pour toutes les pages ;
  2. Le respect des bases <html><head></head><body></body></html> ;
  3. Le moins d’ID possible et surtout jamais en double sur une page ;
  4. Des class !
  5. Pas de chemin absolu !
  6. Pas d’image de plus de 700 ko ;
  7. Pas de <br> pour faire de la mise en page ;
  8. La meta viewport !
  9. La meta charset UTF‑8 ;
  10. Le code est propre (beautify !) ;
  11. Pas de code inutile, de balises qui n’existent pas (code valide w3c) ;
  12. La balise <title> est propre et au bon endroit ;
  13. Pas de code en rouge ou ! dans Chrome/Firefox (pomme+U, pomme+alt+I) ;
  14. Un <h1> par page ;
  15. Attribut lang='fr' sur le html et <baliseDuBloc lang="en">insert your english here</baliseDuBloc> pour les passages en anglais ;
  16. Les fichiers n’ont pas des noms exotiques ;
  17. Pas de typo en trop dans le code (genre 4 fontes Google pour une seule utilisée).

Ergonomie

  1. La page actuelle est marquée ;
  2. On peut retourner sur la home à partir de toute les pages (avec un lien sur le logo ou titre) ;
  3. Le site est utilisable sur mobile et tablette (prévoir des boutons/liens assez gros, padding).

Orthographe & typographie

  1. Pas de fautes d’orthographe (accueil, galerie…) ;
  2. Un bon usage des capitales ÀÉÈŒÇ !
  3. La typo est bien graissée (pas de faux-gras).

Forme et identité visuelle

  1. La mise en page n’est pas bizarre à cause d’un mauvais usage de Flex ou autres ;
  2. Le texte n’est pas trop petit, les lignes ne sont pas trop longues ;
  3. Les espaces sont harmonieux ;
  4. L’interlignage n’est pas par défaut ;
  5. Le favicon fonctionne http://www.favicon.cc/ ;
  6. Les images ne sont pas déformées ;
  7. L’univers graphique est cohérent ;
  8. L’aspect visuel est soigné.

Gain de temps et d’énergie

  1. Pas d’upload de fichiers en trop (genre .indd, .psd, .raw) sur le ftp de l’école (rendu)