Bien composer le texte web

2 212 vues

Publié le

Rappel des bases de la typo web, depuis le HTML qui donne sens : paragraphes, espace insécable, citations, figures, encadré… jusqu'au CSS : texte zoomable et rythme vertical.

Publié dans : Design
0 commentaire
6 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 212
Sur SlideShare
0
Issues des intégrations
0
Intégrations
151
Actions
Partages
0
Téléchargements
41
Commentaires
0
J’aime
6
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Bien composer le texte web

  1. 1. Bien composer le texte web La typo web facile (avec Tiny Typo) par Romy Duhem-Verdière
  2. 2. Romy Duhem-Verdière http://romy.tetue.net @tetue
  3. 3. Paragraphes
  4. 4. <p> <h2> <h1> <p> <h2> <p> 5 Source : Spécificités de l’écriture web, Sunukaddu — http://sunukaddu.com/lesson/ecriture-web/ Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
  5. 5. 6 Flan d’imprimerie au Centre d’Histoire Sociale, Expotec 103, à Rouen — Photo de Frédéric Bisson et http://klepas.org/top-10-does-and-donts-of-web-typography/ Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
  6. 6. Composition en alinéa Rendu web Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 7
  7. 7. .text-left { text-align: left; } .text-right { text-align: right; } .text-justify { text-align: justify; } .text-center { text-align: center; } Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 8
  8. 8. .text-left { text-align: left; } .text-right { text-align: right; } .text-justify { text-align: justify; } .text-center { text-align: center; } Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 9
  9. 9. <br> L'élément BR coupe la ligne de texte courante. Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 10
  10. 10. &nbsp; L'entité &nbsp; (  ou  ) agit comme un espace insécable, pour empêcher qu'une coupure de ligne n'intervienne entre deux mots. Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 11
  11. 11. <p>Il est désormais d’usage d’écrire «&nbsp;Garamond&nbsp;» pour désigner une police de caractère, et «&nbsp;Garamont&nbsp;» pour citer le graveur.</p> Source : http://romy.tetue.net/le-site-garamond-maltraite-la-typo Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 12 82
  12. 12. Une idée par paragraphe Sauter une ligne entre chaque Éviter de justifier le texte Utiliser les espaces insécables Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 13
  13. 13. Hiérarchie des titres
  14. 14. Il existe 6 niveaux de titres 15 Illustration : http://blog.axe-net.fr/hierarchie-balises-h1-h2-hn-referencement/ Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
  15. 15. Les titres hiérarchisent le contenu <h1> <h2> <h3> <h4> Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 16
  16. 16. Un titre annonce un contenu Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 17
  17. 17. 18 Source : http://tinytypo.tetue.net/tinytypo.html#heading Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
  18. 18. 19 Outil en ligne : http://lamb.cc/typograph Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
  19. 19. h1, .h1 { font-size: 2em; line-height: 1.5; h2, .h2 { font-size: 1.5em; line-height: h3, .h3 { font-size: 1.25em; line-height: h4, .h4 { font-size: 1.1em; line-height: h5, .h5 { font-size: 1em; font-weight: bold; h6, .h6 { font-size: 1em; font-weight: bold; Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 20
  20. 20. h1, .h1 { font-size: 2em; line-height: 1.5; h2, .h2 { font-size: 1.5em; line-height: h3, .h3 { font-size: 1.25em; line-height: h4, .h4 { font-size: 1.1em; line-height: h5, .h5 { font-size: 1em; font-weight: bold; h6, .h6 { font-size: 1em; font-weight: bold; Pour avoir la forme seule ! Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 21
  21. 21. Listes
  22. 22. <ul> <li> <li> <li> <li> <li> <li> Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 23
  23. 23. <ol> <li> <li> <li> <li> Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 24
  24. 24. <dl> <dt> <dd> <dt> <dd> <dt> <dd> Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 25
  25. 25. <dl> <dt> <dd> <dt> <dd> Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 26
  26. 26. Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 27
  27. 27. ol, ul, dd { margin-left: 1.5em; } Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 28
  28. 28. Citations
  29. 29. <blockquote> Les règles de typographie fine, que l’on nomme microtypographie dans le langage professionnel des métiers du livre, sont très souvent négligées sur le Web, faute de connaissance suffisante du code typographique. (Marie-Valentine Blond, Olivier Marcellin et Melina Zerbib, Lisibilité des sites web : Des choix typographiques au design d’information, 2009, p. 279) <cite> 30 Pour en savoir plus : http://romy.tetue.net/blockquote-cite-html5 Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
  30. 30. <blockquote> Les règles de typographie fine, que l’on nomme microtypographie dans le langage professionnel des métiers du livre, sont très souvent négligées sur le Web, faute de connaissance suffisante du code typographique. (Marie-Valentine Blond, Olivier Marcellin et Melina Zerbib, Lisibilité des sites web : Des choix typographiques au design d’information, 2009, p. 279) ? <cite> 31 Pour en savoir plus : http://romy.tetue.net/blockquote-cite-html5 Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
  31. 31. <blockquote> Les règles de typographie fine, que l’on nomme microtypographie dans le langage professionnel des métiers du livre, sont très souvent négligées sur le Web, faute de connaissance suffisante du code typographique. (Marie-Valentine Blond, Olivier Marcellin et Melina Zerbib, Lisibilité des sites web : Des choix typographiques au design d’information, 2009, p. 279) <footer> <cite> 32 Pour en savoir plus : http://romy.tetue.net/blockquote-cite-html5 Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
  32. 32. <blockquote> Les règles de typographie fine, que l’on nomme microtypographie dans le langage professionnel des métiers du livre, sont très souvent négligées sur le Web, faute de connaissance suffisante du code typographique. (Marie-Valentine Blond, Olivier Marcellin et Melina Zerbib, Lisibilité des sites web : Des choix typographiques au design d’information, 2009, p. 279) <small> <cite> 33 Pour en savoir plus : http://romy.tetue.net/blockquote-cite-html5 Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
  33. 33. <blockquote> Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 34
  34. 34. <div> + .blockquote Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 35
  35. 35. Medias
  36. 36. <figure> <figcaption> Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 37
  37. 37. <figure> <figure> <figure> <figure> Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 38
  38. 38. Encadrés
  39. 39. .box Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 40
  40. 40. .box { display: block; padding: 1.5em; background: pink; margin-bottom: 1.5em; } @media print { .box { border: 1px solid !important; } } Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 41
  41. 41. .box { display: block; padding: 1.5em; background: pink; margin-bottom: 1.5em; } @media print { .box { border: 1px solid; } } Ne pas perdre l’encadré à l’impression Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 42
  42. 42. <aside> 43 Pour en savoir plus : http://docteurhtml5.com/html5/comprendre-la-balise-aside/ Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
  43. 43. Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 44
  44. 44. Taille des caractères
  45. 45. html { font-size: 100%; } body { font-size: 1em; } h1 { font-size: 200%; } h2 { font-size: 150%; } h3 { font-size: 130%; } small { font-size: 80%; } La propriété CSS font-size spécifie la taille de police - plus précisément la hauteur des glyphes de la police. Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 46
  46. 46. Pouvoir zoomer le texte à 200 % Critère AccessiWeb HTML5/ARIA No 10.4 [AA] Test RGAA 2.2 No 7.13 [AA] Source : http://www.voyages-sncf.com/guide/accessibilite Améliorer l’accessibilité par la typographie : http://www.pompage.net/traduction/ ameliorer-l-accessibilite-par-la-typographie Source : Bonnes pratiques graphiques — Paris Web 2012 47
  47. 47. % em rem html { font-size: 100%; } body { font-size: 1em; } h1 { font-size: 200%; } h2 { font-size: 150%; } h3 { font-size: 130%; } px ex pt cm mm in pc small { font-size: 80%; } 48 Pour en savoir plus : http://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texte-avec-les-em.html Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
  48. 48. Laisser le texte à 100 % 16px 11pt Relative readability, by Wilson Miner, 2008 http://wm4.wilsonminer.com/posts/2008/oct/20/relative-readability/ Source : Bonnes pratiques graphiques — Paris Web 2012 49
  49. 49. Laisser le texte à 100 % Responsive Typography: The Basics, by Oliver Reichenstein, 2012 http://informationarchitects.net/blog/responsive-typography-the-basics/ Source : Bonnes pratiques graphiques — Paris Web 2012 50
  50. 50. 51 Source : Un petit pas pour l'em, un grand pas pour le Web, par Nicolas Hoisey, Paris Web 2013 Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
  51. 51. html { font-size: 100%; } body { font-size: 1em; } = 16px h1 { font-size: 200%; } h2 { font-size: 150%; } h3 { font-size: 130%; } small { font-size: 80%; } Valeur par défaut du terminal ou préférence utilisateur Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 52
  52. 52. 53 Outil en ligne : http://pxtoem.com Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
  53. 53. Résultats de recherche des occurrences de « font-size » dans un projet… Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 54
  54. 54. html { font-size: 100%; } body { font-size: 1em; } h1 { font-size: 200%; } h2 { font-size: 150%; } h3 { font-size: 130%; } small { font-size: 80%; } Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 55
  55. 55. html { font-size: 100%; } body { font-size: 1em; } h1 { font-size: 200%; } h2 { font-size: 150%; } h3 { font-size: 130%; } small { font-size: 80%; } Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 56
  56. 56. html { font-size: 100%; } body { font-size: 1em; } h1 { font-size: 200%; } h2 { font-size: 150%; } h3 { font-size: 130%; } small { font-size: 80%; } Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 57
  57. 57. html { font-size: 100%; } body { font-size: 1em; } h1 { font-size: 200%; } h2 { font-size: 150%; } h3 { font-size: 130%; } small { font-size: 80%; } Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 58
  58. 58. 1. Ne pas définir la taille de chaque élément ! 2. Définir une font-size de base, sur le <body> dont chaque élément hérite 3. Puis définir quelques exceptions : titres plus gros, mentions plus petites, etc. Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 59
  59. 59. Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 60
  60. 60. .biggest { font-size: 200%; } .bigger { font-size: 175%; } big, .big { font-size: 130%; } small, .small { font-size: 80%; } .smaller { font-size: 75%; } Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 61
  61. 61. Rythme vertical
  62. 62. Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 63
  63. 63. body { font-size: 1em; line-height: 1.5; } La propriété CSS line-height spécifie l’interligne - plus précisément la hauteur de ligne. Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 64
  64. 64. 1.2 1.5 2 B6ie5n composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 66
  65. 65. body { font-size: 1em; line-height: 1.5; } = 16px = 16px * 1.5 = 24px Pas d’unité C’est un multiplicateur Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 66
  66. 66. Source : L'importance du rythme vertical en design CSS, par David Larlet — https://larlet.fr/david/biologeek/archives/20070819-l-importance-du-rythme-vertical-en-design-css/ Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 67
  67. 67. 68 Outil en ligne : https://drewish.com/tools/vertical-rhythm/ Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
  68. 68. body { font-size: 1em; line-height: 1.5; } Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 69
  69. 69. 1. Ne pas définir l’interligne de chaque élément ! 2. Définir un line-height de base, sur le <body> dont chaque élément hérite 3. Puis ajuster les quelques exceptions : titres plus gros, mentions plus petites, etc. Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 70
  70. 70. Des questions ? Romy Duhem-Verdière http://romy.tetue.net/1067 @tetue
  71. 71. • Relire la spécification HTML 4.01 : http://www.la-grange.net/w3c/html4.01/struct/text.html • Et la spécification HTML5 : http://www.w3.org/TR/html5/semantics.html#semantics • Améliorer la lisibilité typo à l’écran, par Romy Duhem-Verdière, FEAN 2013 http://romy.tetue.net/ameliorer-lisibilite-typographique • Tiny Typo, base CSS pour le contenu éditorial web http://tinytypo.tetue.net • Typographie web : gérer la taille du texte avec les « em », par Alsacréations, 2006 http://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texte-avec-les-em.html • Un petit pas pour l'em, un grand pas pour le Web, par Nicolas Hoisey, Paris Web 2013 http://www.paris-web.fr/2013/conferences/un-petit-pas-pour-lem-un-grand-pas-pour-le-web.php • L'importance du rythme vertical en design CSS, par David Larlet, 2007 https://larlet.fr/david/biologeek/archives/20070819-l-importance-du-rythme-vertical-en-design-css/ • Line-height: une propriété méconnue, par Vincent De Oliviera, KiwiParty 2014 http://slides.iamvdo.me/kiwiparty14/

×