montrer démontrer

Macro typographie

La lecture n’est pas tâche aisée pour l’œil humain ; chaque mots qui composent nos phrases et forment nos paragraphes, l’œil suit une rythmique et des saccades différentes. Nous, web designers, avons la tâche de faciliter et de ne pas épuiser l’oeil humain. Il est de notre devoir de soigner la construction de nos sites en respectant une série de règles distinctes. La macro typographie englobe un ensemble de règles concernant la longueur de ligne, l’interlignage, la combinaison de polices, la hiérarchie de nos textes assurant le confort essentiel et nécessaire aux humains utilisateurs, lecteurs de nos contenus.

1. La couleur de paragraphe

Aux premiers abords on songerait à choisir une teinte, or la couleur de paragraphe est sujette à la clarté. Il s’agit de la lisibilité d’un paragraphe, le graphiste devra réaliser une série de test différents sur un même paragraphe afin de déterminer l’interlignage qui conviendra le mieux et qui sera le plus lisible pour l’utilisateur. Prenons l’exemple de texte suivant :

Ceci est un exemple de paragraphe. Ce samedi a très bien commencé, j’ai été déjeuner à la boulangerie où j’ai continué la création du wireframe de ce site, ensuite je me suis rendue à la librairie où j’ai acheté deux livres. J’en avais déjà lu un des deux quand j’étais plus jeune, tandis que l’autre pas du tout : J’en avais entendu parler dans une vidéo et le sujet m’intéresssait beaucoup. 

Comment gérer notre couleur de paragraphe pour que ce texte soit des plus lisible sur notre site et assurer le confort à nos utilisateurs ?

La première chose à faire est de modifier votre interlignage. Celui-ci modifiera la distance  entre les lignes ; De base, la suite adobe vous proposera une configuration à 120% mais  pour le web il sera préférable de passer à minimum 140%. A vous d’essayer différents interlignages afin de déterminer celui qui conviendra le mieux  au confort de l’oeil humain. N’ayez pas peur d’en tester un maximum : 150% , 180% , 200%, … Autant de test qu’il sera nécessaire afin d’assurer une lisibilité à toute épreuve.

Ceci est un exemple de paragraphe. Ce samedi a très bien commencé, j’ai été déjeuner à la boulangerie où j’ai continué la création du wireframe de ce site, ensuite je me suis rendue à la librairie où j’ai acheté deux livres. J’en avais déjà lu un des deux quand j’étais plus jeune, tandis que l’autre pas du tout : J’en avais entendu parler dans une vidéo et le sujet m’intéresssait beaucoup. 

Font : Playfair Display, 16 px Interlignage : 150%, 24px

Ceci est un exemple de paragraphe. Ce samedi a très bien commencé, j’ai été déjeuner à la boulangerie où j’ai continué la création du wireframe de ce site, ensuite je me suis rendue à la librairie où j’ai acheté deux livres. J’en avais déjà lu un des deux quand j’étais plus jeune, tandis que l’autre pas du tout : J’en avais entendu parler dans une vidéo et le sujet m’intéresssait beaucoup. 

  • Font : Playfair Display, 16 px
  • Interlignage : 180%, 28px

Plissez les yeux, et observez les différents test effectués. Vous voyez la différence ? Dans notre exemple, le premier test avec un interlignage de 150% semble moins net et aurait une couleur grisâtre. Le dernier test effectué avec un interlignage de 180% est beaucoup plus net et précis, on arrive à distinguer quelques mots malgré les yeux plissés. Ainsi, vous commencez à comprendre le sens de l’expression “Couleur de paragraphe”.

La deuxième chose à faire est de réduire la longueur des lignes entre 55 et 60 caractères. Un interlignage trop élevé ou des lignes trop longues risquent de perdre la concentration et l’intérêt de l'utilisateur. Cela demanderait trop d’effort, car trop de rythme, trop d’espace.

La troisième chose est de considérer l’existence des marges. Elles sont à l’équivalent de l’interlignage.

2. La combinaison de polices

L’enseignement de la combinaison de police requiert 3 notions simples et basiques. Cependant il est difficile d’associer deux polices qui respectent ces trois notions en même temps ; si vous avez un de ces rudiments qui s’applique à votre choix, alors libre à vous de continuer, le système fonctionne.

La hauteur de X

Observez ci-dessus l’exemple. Le premier exemple montre l’obtention d’une même hauteur de x, contrairement à l’exemple du dessous où les hauteurs ne correspondent pas.

Hauteur de X

Le contraste

Cela correspond à la différence qu’il y a dans l’épaisseur du trait. Plus le trait sera irrégulier plus le contraste sera haut. Par exemple, un trait fort régulier ne s’accordera pas avec un trait irregulier et variant.

contraste

La chasse

La chasse est la largeur du caractère employée comprenant l’espace avant et après celui-ci. Cet aspect est plus subjectif que le reste de nos éléments, mais comprenez par là qu’une police dites “condensée” ne s’associe pas avec une police dites “large”.

la chasse

3. La hiéarchie

Que serait un contenu sans hiérarchie ? Une anarchie, et beaucoup d’ennui. Même bien écrit, respectant la couleur de paragraphe et d’une bonne combinaison de police, la hiérarchie est un aspect important à intégrer. Mon contenu se compose de titres, de paragraphes, de plusieurs types de titres, et tous se mêlent, se calculent et se décident à l’aide des rapports de proportions.

Pour sélectionner la taille de nos différents éléments typographie, deux liens sont nécessaires : type-scale.com et pxtoem.com.

Visitons type-scale.com et tentons de comprendre le fonctionnement.

type scale

Ne vous trompez pas, et indiquez la taille de typographie que vous avez choisie sur la colonne de gauche. L’option “Scale” est le rapport de proportion que vous choisissez. N’oubliez pas de notifier la police que vous avez choisie dans les deux espaces “Googlefont” et “Font family”.

A vous de faire votre choix dans le choix de proportions et ce qui, selon vous, correspondrait le mieux à vos différents tailles de titres et autres 1em correspondant à votre texte. Votre choix étant fait, il vous suffit à présent de convertir votre rapport de proportion indiqué à côté de votre sélection grâce au lien suivant : http://pxtoem.com

px to em

Micro typographie

La nature de la micro typographie est telle qu’elle se concentre essentiellement sur le détail de la mise en forme du texte ainsi que toutes ses subtilités. Elle est constitué de tous ces caractères que nous oublions régulièrement. Guillemets, ponctuation, marques de paragraphes… Découvrons ensemble de quoi il en ressort.

1. Les marques de paragraphe

Elles s’emploient pour noter au lecteur un changement de paragraphe; le paragraphe d’introduction de possède pas de marque de paragraphe. On peut marquer ce changements de différentes manières : La lettrine, la première lettre du paragraphe en gras, etc … Mais deux techniques distinctives marquent également ce changement :

On marque ce changement de deux façon différentes et distinctives :

  • Le saut à la ligne
  • Le retrait vers la droite, étant à l’équivalence de la valeur de la taille de police de notre corps de caractères.
marques de paragraphe

2. Les majuscules accentuées

L’accent oublié sur les majuscules tu ne devras pas car l’erreur tu cometra.

Voici comment insérer des majuscules accentuées en HTML

accents sur les majuscules

3. Les types de tirets

Nous, webdesigner, devons connaître les nuances de tirets existantes. Elles sont au nombre de 3 :

Le tiret court {-}

Il est employé comme trait d’union entre les mots ainsi que comme signe de soustraction et de césure dans les textes imprimés.

Le tiret moyen/ Dash {–}

Il peut remplacer l’utilisation de parenthèses – avec des espaces – ou pour exprimer une durée, une distance ainsi que pour le marquage des éléments d’une liste.

Le tiret long / « em « dash {—}

On l’utilise essentiellement pour la mise en forme des dialogues.

— Bonjours, monsieur.

— Bonsoir madame.

4. Les guillemets

L’emploi des guillemets est récurent et incompris une majorité du temps. Ne t’inquiète pas, je l’ai récapitulé pour toi. Les guillemets permettent de mettre en avant une expression, une citation ou un terme. Encore une fois, différentes notions de transcription s’emploient et sont d’usage. N’oublions pas qu’il est nécessaire d’insérer des fines espaces insécables après le premier guillemet et avant le deuxième, ce qui permet un non retour à la ligne.

Les bon guillemet à utiliser est le guillemet français ou guillemet simple « ... »

Pour tout ce qui est en anglais, les citations, les références, on utilisera: “...” “ ... ” Et on utilise pas ces guillemets: " ... "

5. La ponctuation et les espaces

Nous arrivons bientôt à la fin de notre aventure typographique, et je te propose que nous terminons par aborder le sujet de la ponctuation et des espaces. Savais-tu qu’il existait différents espaces possible ?

En fonction de la situation, un espace spécifique sera utilisé. Il y en a 4 types :

  • l’espace : c’est l’espace par défaut entre deux mots.
  • l’espace fine : c’est un espace valant la moitié d’un espace normal.
  • — l’espace insécable : c’est l’équivalent d’un espace fine en web qu’on obtient grâce à ALT+MAJ sur mac
  • — l’espace fine insécable : c’est un espace insécable plus court, il n’est pas montré dans tous les navigateurs.

Chaque ponctuation nécessite un espace distinctif :

  • Pour la virgule : il n’y a pas d’espace devant mais il y a un simple espace après
  • Pour le point virgule : il y a un espace fine insécable devant et un espace insécable après
  • Pour le point final : l est suivi d’un espace insécable
  • Pour les deux points : un espace insécable avant, suivi d’un espace après
  • Pour le ? et le ! on les sépare du texte par un espace fine et un espace normal les suit