Upgrade to Pro — share decks privately, control downloads, hide ads and more …

La microtypographie au service de la lisibilité

La microtypographie au service de la lisibilité

Conférence donnée en octobre 2021 pour Paris Web
https://www.paris-web.fr/2021/conferences/pourquoi-et-comment-utiliser-la-microtypographie-pour-ameliorer-la-lecture-en-ligne.php

Le Web est un support de lecture quotidien pour beaucoup, et il a depuis longtemps remplacé nos supports papiers. Saviez-vous qu’il existe des solutions pour que le confort de lecture sur le web soit similaire à celui d’un bon vieux journal ? Et pour cela, pas besoin de demander à vos contributeurs d’utiliser des raccourcis claviers improbables, car des solutions simples existent.
Je vous présenterai ce qu’est la microtypographie, ses avantages pour vos visiteurs, les différentes méthodes simples que vous pouvez appliquer, et des outils vous permettant de faire cela très rapidement sur votre site Web, sans rien changer à votre workflow actuel.

Afa7d9b3759a3d0c934966e7f19421fc?s=128

Marion Hurteau

October 08, 2021
Tweet

More Decks by Marion Hurteau

Other Decks in Programming

Transcript

  1. La microtypographie au service de la lisibilité Paris Web -

    Octobre 2021
  2. Hello 👋 Marion Hurteau 🐦 @MarionHerisson 💻 @MarionLeHerisson 🎓 Master

    à l’ESGI 🤓 Mémoire sur la naissance d’un langage spontané chez les robots (j’aime bien les langues) 󰠁 JoliCode depuis 2019
  3. La microtypographie

  4. C’est quoi ? Lisibilité et organisation d’un document à une

    échelle très fine, au niveau de la lettre, du mot et du paragraphe.
  5. C’est quoi ? Hello world ! Lorem ipsum dolor sit

    amet, consectetur adipiscing elit. Pellentesque cursus pulvinar quam, et commodo elit elementum sed. Vivamus aliquet libero eget lacus laoreet tristique. Aenean tristique iaculis purus, ut vulputate nibh faucibus at. In eleifend ex sit amet nibh mattis, in egestas nibh efficitur. Donec vel mollis orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum dolor libero, dapibus a porttitor id, placerat quis mauris. In tincidunt a nulla eu efficitur. Integer elementum maximus nisl et mollis. Micro Macro
  6. C’est quoi ? 👉 Ponctuation

  7. C’est quoi ? 👉 Ponctuation 👉 Espacements

  8. C’est quoi ? 👉 Ponctuation 👉 Espacements 👉 Césures des

    mots
  9. C’est quoi ?

  10. C’est quoi ?

  11. C’est quoi ? 👉 Graphisme

  12. C’est quoi ? 👉 Graphisme 👉 Presse (papier ou web)

  13. C’est quoi ? 👉 Graphisme 👉 Presse (papier ou web)

    👉 Edition
  14. C’est quoi ? 👉 Graphisme 👉 Presse (papier ou web)

    👉 Edition 👉 IDEs & autres éditeurs
  15. Avantages ? Augmente le confort de lecture Diminue la charge

    cognitive Diminue la fatigue visuelle Augmente la facilité de compréhension Esthétique générale
  16. Avantages ? Problématiques Web

  17. Application De nombreuses règles : espaces, tirets, guillemets...

  18. Mais pourquoi on ne l’applique pas ? Règles peu connues

    hors du secteur de l’édition
  19. Mais pourquoi on ne l’applique pas ? Règles peu connues

    hors du secteur de l’édition Pas du tout adaptées aux claviers !
  20. Mais pourquoi on ne l’applique pas ? Règles peu connues

    hors du secteur de l’édition Pas du tout adaptées aux claviers ! a ’ a Alt + 0146 Opt + Shift + ] Alt + Shift + B
  21. Les solutions

  22. Les librairies JoliTypo - JoliCode 🌎 󰏃 PHP SmartyPants Typographer

    - Michel Fortin (John Gruber) 󰏅 Php-Typography - Der Mundschenk 🌎 React Typography Helper - Seamus Leahy 󰏅
  23. Le test

  24. None
  25. Où et quand les utiliser ? - À l’édition -

    Avant l’enregistrement - Au moment de l’affichage de la page - Sur des contenus HTML, ou non
  26. La fonction d’export de Word Sur l’éditeur de texte :

    Sur le navigateur :
  27. La fonction d’export de Word Dans la console : <body

    dir="ltr" style="max-width:21.001cm;margin-top:2cm; margin-bottom:2cm; margin-left:2cm; margin-right:2cm; "><p class="Title">Titre</p><p class="Subtitle">Sous-titre</p><p class="P1">Hello World !</p></body>
  28. ⚠ Gentle reminder ⚠

  29. Espaces Justifiante Insécable Fine (sécable ou insécable) Cadratin Demi-cadratin Tiers

    de cadratin Quart de cadratin Demi-espace fine Espace ultra-fine Espace fixe ...
  30. Espaces Justifiante Insécable Fine (sécable ou insécable) Cadratin Demi-cadratin Tiers

    de cadratin Quart de cadratin Demi-espace fine Espace ultra-fine Espace fixe ...
  31. Espaces Vous avez dit “Cadratin” ? M Quelle espace utiliser ? Cadratin M-space

    em-space Demi cadratin Quart de cadratin
  32. Espaces Justifiante ∅ entre deux mots

  33. Espaces Justifiante ∅ entre deux mots Insécable &nbsp; avant :

    ou dans les « guillemets » 󰏃
  34. Espaces Justifiante ∅ entre deux mots Insécable &nbsp; avant :

    ou dans les « guillemets » 󰏃 Fine &#x202F; pour la ponctuation !
  35. Espaces Support ✅ Système d’exploitation ❌ Navigateur

  36. Espaces Espaces justifiantes Espaces insécables Espaces fines JoliTypo 🌎 ✅

    ✅ ✅ PHP SmartyPants Typographer 󰏅 ✅ ❌ ❌ Php-Typography 🌎 ✅ ✔ ✔ React Typography Helper 󰏅 ✅ ❌ ❌
  37. Points de suspension … (ellipsis) &mldr;

  38. None
  39. None
  40. Points de suspension Points de suspension Espaces insécables Espaces fines

    JoliTypo 🌎 ✅ ✅ ✅ PHP SmartyPants Typographer 󰏅 ✅ ❌ ❌ Php-Typography 🌎 ✅ ✔ ✔ React Typography Helper 󰏅 ✅ ❌ ❌
  41. Points de suspension Points de suspension Remplacement Espaces fines JoliTypo

    🌎 ✅ &hellip; ✅ PHP SmartyPants Typographer 󰏅 ✅ &#8230; ❌ Php-Typography 🌎 ✅ … ✔ React Typography Helper 󰏅 ✅ … ❌
  42. Apostrophe ʼ apostrophe typographique &#x2BC; La seule, l’unique.

  43. Apostrophe ʼ apostrophe typographique &#x2BC; La seule, l’unique. ' apostrophe

    dactylographique &apos; 2'30''
  44. Apostrophe ʼ apostrophe typographique &#x2BC; La seule, l’unique. ' apostrophe

    dactylographique &apos; 2'30'' ‘ ’ guillemets anglais &lsquo; &rsquo; ‘It’s a quote.’
  45. Apostrophe Apostrophe typographique Apostrophe dactylographique Guillemets anglais JoliTypo 🌎 ✅

    ✅ ❌ PHP SmartyPants Typographer 󰏅 ✅ ✅ avec \' et \" ✅ Php-Typography 🌎 ✅ ❌ ❌ React Typography Helper 󰏅 ✅ ❌ ✅
  46. Guillemets « » (quotes) &laquo; &raquo; C’est une « citation

    »
  47. Guillemets « » (quotes) &laquo; &raquo; C’est une « citation

    » “ ” (curly quotes) &laquo; &raquo; It’s also a “quote”
  48. Guillemets « » (quotes) &laquo; &raquo; C’est une « citation

    » “ ” (curly quotes) &laquo; &raquo; It’s also a “quote” „ “ &bdquo; &ldquo; „Das ist ein Zitat“
  49. Guillemets « » (quotes) &laquo; &raquo; C’est une « citation

    » “ ” (curly quotes) &laquo; &raquo; It’s also a “quote” „ “ &bdquo; &ldquo; „Das ist ein Zitat“ 「 」(hook brakets) &raquo; &laquo; それは「引用」です
  50. Guillemets « » (quotes) &laquo; &raquo; C’est une « citation

    » “ ” (curly quotes) &laquo; &raquo; It’s also a “quote” „ “ &bdquo; &ldquo; „Das ist ein Zitat“ 「 」(hook brakets) &raquo; &laquo; それは「引用」です 《 》(arrow brackets) &#x300A; &#x300B; 《인용》입니다.
  51. None
  52. Guillemets Guillemets Guillemets en virgule Autres JoliTypo 🌎 ✅ ✅

    🌎 PHP SmartyPants Typographer 󰏅 ✔ ✅ Php-Typography 🌎 ❌ ✅ React Typography Helper 󰏅 ❌ ✅
  53. Guillemets Guillemets Guillemets en virgule Autres JoliTypo 🌎 ✅ ✅

    🌎 PHP SmartyPants Typographer 󰏅 << Blablabla >> → « Blablabla » → ✅ Php-Typography 🌎 ❌ ✅ React Typography Helper 󰏅 ❌ ✅
  54. Tirets - Trait d’union (dash) ∅ sans espaces autour

  55. Tirets - Trait d’union (dash) ∅ sans espaces autour —

    Tiret M (m-dash) &mdash; sans espaces autour
  56. Tirets - Trait d’union (dash) ∅ sans espaces autour —

    Tiret M (m-dash) &mdash; sans espaces autour – Tiret N (n-dash) &ndash; avec espaces autour
  57. Tirets - Trait d’union (dash) ∅ sans espaces autour —

    Tiret M (m-dash) &mdash; sans espaces autour – Tiret N (n-dash) &ndash; avec espaces autour − Signe moins &minus; avec espaces autour
  58. Tirets - Trait d’union (dash) ∅ sans espaces autour —

    Tiret M (m-dash) &mdash; sans espaces autour – Tiret N (n-dash) &ndash; avec espaces autour − Signe moins &minus; avec espaces autour Trait d’union conditionnel &shy; ∅
  59. Person&shy;na&shy;li&shy;sa&shy;tion Personnalisatio- n Personnalisa- tion 👍 👎

  60. Césures Person&shy;na&shy;li&shy;sa&shy;tion Personnalisatio- n Personnalisa- tion 👍 👎

  61. Tirets Trait d’union Tiret M Tiret N Signe moins Trait

    d’union conditionnel JoliTypo 🌎 ✅ ✅ -- ✅ ✅ ✅ PHP SmartyPants Typographer 󰏅 ✅ ✅ * ❌ * ❌ ❌ Php-Typography 🌎 ✅ ✅ --- ✅ -- ✅ ❌ React Typography Helper 󰏅 ✅ ✅ --- ✅ -- ❌ ❌
  62. Lignes veuves

  63. Lignes veuves Lignes veuves Guillemets en virgule Autres JoliTypo 🌎

    ❌ PHP SmartyPants Typographer 󰏅 ❌ Php-Typography 🌎 ✅ React Typography Helper 󰏅 ✅
  64. Installation

  65. PHP-Typography composer require mundschenk-at/php-typography 💬 PHP 👍 Accès CSS pour

    styliser certains caractères 👍 Gère les fractions ❌ Manque de doc $settings = new Settings(); $settings->set_hyphenation (true); $settings->set_hyphenation_language ('en-US'); $typo = new PHP_Typography() ; $transformed = $typo->process($this->text, $settings);
  66. SmartyPants composer require michelf/php-smartypants 💬 Php 👍 Très simple d’installation

    $transformed = SmartyPants:: defaultTransform($text);
  67. SmartyPants composer require michelf/php-smartypants 💬 Php 👍 Très simple d’installation

    $transformed = SmartyPantsTypographer:: defaultTransform($text);
  68. JoliTypo composer require jolicode/jolitypo 💬 PHP 👍 Flexible 👍 Personnalisable

    $fixer = new Fixer([ 'CurlyQuote', 'Dash', 'Dimension', 'Ellipsis', 'FrenchNoBreakSpace' , 'Hyphen', 'NoSpaceBeforeComma' , 'SmartQuotes', 'Trademark', 'Unit', ]); $fixer->setLocale('fr_FR'); $transformed = $fixer->fix($text);
  69. JoliTypo composer require jolicode/jolitypo 💬 PHP 👍 Flexible 👍 Personnalisable

    👍 Filtre Twig $fixer = new Fixer([ 'CurlyQuote', 'Dash', 'Dimension', 'Ellipsis', 'FrenchNoBreakSpace' , 'Hyphen', 'NoSpaceBeforeComma' , 'SmartQuotes', 'Trademark', 'Unit', ]); $fixer->setLocale('fr_FR'); $transformed = $fixer->fix($text); {{ html_content|jolitypo }}
  70. Extension Twig : Typography composer require parisek/twig-typography 👍 Propose diverses

    options Basé sur PHP-Typography ❌ Toujours pas doc ? $twig = new Twig_Environment( $loader); $twig->addExtension(new Parisek\Twig\TypographyExtension( __DIR__ . '/typography.yml' )); {{ title|typography }} {{ title|typography({ 'set_dewidow': FALSE}) }}
  71. React Typography Helper npm install @seamusleahy/react-typography-helper 💬 React 👍 Flexible

    👍 Facilités de style import React from 'react'; import TypographyHelper from 'react-typography-helper'; export const MyArticle = ({textToTransform}) => ( <article> <h1><TypographyHelper text={textToTransform} widontNonBreakingSpace /> </h1> </article> );
  72. React Typography Helper yarn add @seamusleahy/react-typography-helper 💬 React 👍 Flexible

    👍 Facilités de style import React from 'react'; import TypographyHelper from 'react-typography-helper'; export const MyArticle = ({textToTransform}) => ( <article> <h1><TypographyHelper text={textToTransform} widontNonBreakingSpace /> </h1> </article> );
  73. Plug-Ins de CMS Sur Craft : nystudio107/craft-typogrify (SmartyPants et PHP-Typography)

    Sur Wordpress : typofr (JoliTypo) wp-typography (PHP-Typography) Sur Drupal : Twig Typography (PHP-Typography) Sur SPIP : TextWheel
  74. Pour aller plus loin 👉 La macrotypographie de la page

    Web, Anne-Sophie Fradier, Paris Web 2010
  75. Pour aller plus loin 👉 La macrotypographie de la page

    Web, Anne-Sophie Fradier, Paris Web 2010 👉 L’accessibilité
  76. Sources github.com/MarionLeHerisson 👉 Exemple de code fonctionnel 👉 Slides 👉

    Articles
  77. Merci !

  78. Sources Les espaces typographiques et le Web http://typographisme.net/post/Les-espaces-typographiques-et-le-web Punctuation Matters

    https://www.punctuationmatters.com Points de suspension https://fr.wikipedia.org/wiki/Points_de_suspension Petit guide typographique à l’usage de l’internet http://www.uzine.net/article1802.html Améliorez la lisibilité de vos textes https://quelmottapique.com/2017/11/02/ameliorez-la-lisibilite-de-vos-textes/ JoliTypo (et ses sources) https://github.com/jolicode/JoliTypo HTML entities encoder/decoder https://mothereff.in/html-entities Guillemets anglais ou guillemets français | Un choix graphique https://blog.typogabor.com/2009/02/19/guillemets-anglais-ou-guillemets-francais-un-choix-graphique-reloaded/ Les tirets https://www.24joursdeweb.fr/2017/les-tirets/
  79. Libs Js corrigeant les lignes veuves Widow Tamer Js https://responsivedesign.is/resources/typography/widowtamer-js/

    JQuery WidowFix https://matthewlein.com/tools/widowfix