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.

1. Bien composer le texte web
La typo web facile (avec Tiny Typo)
par Romy Duhem-Verdière

2. Romy Duhem-Verdière
http://romy.tetue.net
@tetue

4. Paragraphes

5. <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

6. 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

7. Composition en alinéa Rendu web
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 7

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 8

9. .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

10. <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

11. &nbsp;
L'entité &nbsp; (&#160; ou &#xA0;)
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

12. <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

13. 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

14. Hiérarchie des titres

15. 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

16. 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

17. Un titre annonce un contenu
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 17

18. 18
Source : http://tinytypo.tetue.net/tinytypo.html#heading
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014

19. 19
Outil en ligne : http://lamb.cc/typograph
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014

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; Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 20

21. 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

22. Listes

23. <ul>
<li>
<li>
<li>
<li>
<li>
<li>
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 23

24. <ol>
<li>
<li>
<li>
<li>
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 24

25. <dl>
<dt>
<dd>
<dt>
<dd>
<dt>
<dd>
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 25

26. <dl>
<dt>
<dd>
<dt>
<dd>
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 26

27. Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 27

28. ol,
ul,
dd { margin-left: 1.5em; }
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 28

29. Citations

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>
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

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)
?
<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

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)
<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

33. <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

34. <blockquote>
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 34

35. <div>
+ .blockquote
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 35

36. Medias

37. <figure>
<figcaption>
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 37

38. <figure>
<figure>
<figure>
<figure>
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 38

39. Encadrés

40. .box
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 40

41. .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

42. .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

43. <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

44. Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 44

45. Taille des caractères

46. 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

47. 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

48. %
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

49. 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

50. 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

51. 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

52. 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

53. 53
Outil en ligne : http://pxtoem.com
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014

54. 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

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 55

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 56

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 57

58. 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

59. 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

60. Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 60

61. .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

62. Rythme vertical

63. Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 63

64. 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

65. 1.2 1.5 2
B6ie5n composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 66

66. 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

67. 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

68. 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

69. body {
font-size: 1em;
line-height: 1.5;
}
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 69

70. 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

71. Des questions ?
Romy Duhem-Verdière
http://romy.tetue.net/1067
@tetue

72. • 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/