typographie

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)

Sélection de la semaine

Petite sélection de liens vu sur Internet et ailleurs !

Césure ou coupure

On commence par un peu de typographie avec le mot du jour, césure coupure :

Le mot césure – qui fait certes très savant – est parfois employé à la place de coupure. Ni le Littré ni le dictionnaire de l’Académie (9e édition) ni le TLFi ni le Petit Robert électronique ne mentionnent d’autre acception du terme césure que celle de pause à l’intérieur d’un vers.

http://j.poitou.free.fr/pro/html/typ/coupure.html
Bonus web : Deux caractères html permettent d’empêcher les coupures &nbsp; pour l’espace insécable et &#x202F; espace fine insécable (plus d’espaces sur wikipedia).

Adopte un logiciel Adobe

Sans transition, InDesign est parfois utilisé pour faire des maquettes web. Hélas, celui‐ci a une gestion du pixel bien étrange. Selon votre écran, en créant une maquette de 320 px de large et en zoomant à 100%, l’image à l’écran ne fera pas forcement 320 px (oui).
Solution (par un script) : http://thatmichael.com/2014/02/how-to-change-indesigns-default-screen-resolution/

indesign pour le web
j’ai remonté mes manches pour remettre ma maquette sous InDesign (à droite)
setup indesign web
réglages des pages

🎁 ✨ kit mobile avec fichiers InDesign cs4 et cc2018, png en 3x (lié dans InDesign) et 1x (pour ceux qui veulent travailler via PhotoShop) + scripts de l’article ci‐dessus.

C’est Vrai

J’aime beaucoup le travail de Graphéine et la générosité de leur site. Même si cette article date de 2011, c’est toujours d’actualité :
https://www.grapheine.com/divers/astuces-cv-stage-graphiste
En bonus : http://cvparade.com/ une collection qui mérite d’exister (chacun y verra les choses à faire ou à éviter).

Canon

Un classique.
http://retinart.net/graphic-design/secret-law-of-page-harmony/

100 heures

Un petit binge watching de tuto Photoshop, Illustrator, InDesign ?

Remerciements : Pour une bonne partie des liens à Éric Bediez.

Vu dans l’école

vu sur Instagram et en vrai ;¬) #soireeintegration #galaxie / ésad amiens