Bien composer le texte web
-
Upload
romy-duhem-verdiere -
Category
Design
-
view
1.152 -
download
0
Transcript of Bien composer le texte web
![Page 1: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/1.jpg)
Bien composer le texte webLa typo web facile (avec Tiny Typo)
par Romy Duhem-Verdière
![Page 3: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/3.jpg)
![Page 4: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/4.jpg)
Paragraphes
![Page 5: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/5.jpg)
<h2>
<h1>
<p>
<p>
<p>
<h2>
5Source : 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
![Page 6: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/6.jpg)
6Flan d’imprimerie au Centre d’Histoire Sociale, Expotec 103, à Rouen — Photo de Frédéric Bissonet 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
![Page 7: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/7.jpg)
Composition en alinéa Rendu web
7Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 8: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/8.jpg)
.text-left {text-align: left;
}
.text-right {text-align: right;
}
.text-justify {text-align: justify;
}
.text-center {text-align: center;
}
8Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 9: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/9.jpg)
.text-left {text-align: left;
}
.text-right {text-align: right;
}
.text-justify {text-align: justify;
}
.text-center {text-align: center;
}
9Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 10: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/10.jpg)
<br>
L'élément BR coupela ligne de texte courante.
10Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 11: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/11.jpg)
L'entité (  ou  )agit comme un espace insécable,pour empêcher qu'une coupure de ligne n'intervienne entre deux mots.
11Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 12: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/12.jpg)
<p>Il est désormais d’usaged’écrire « Garamond »pour désigner une police de caractère, et « Garamont » pour citer le graveur.</p>
12 82Source : http://romy.tetue.net/le-site-garamond-maltraite-la-typoBien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 13: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/13.jpg)
Une idée par paragraphe
Sauter une ligne entre chaque
Éviter de justifier le texte
Utiliser les espaces insécables
13Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 14: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/14.jpg)
Hiérarchie des titres
![Page 15: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/15.jpg)
Il existe 6 niveaux de titres
15Illustration : 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
![Page 16: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/16.jpg)
<h3>
<h2>
<h1>
<h4>
Les titres hiérarchisent le contenu
16Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 17: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/17.jpg)
Un titre annonce un contenu
17Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 18: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/18.jpg)
18Source : http://tinytypo.tetue.net/tinytypo.html#headingBien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 19: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/19.jpg)
19Outil en ligne : http://lamb.cc/typographBien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 20: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/20.jpg)
h1, .h1 { font-size: 2em; line-height: 1.5; margin-bottom: .75em; }h2, .h2 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }h3, .h3 { font-size: 1.25em; line-height: 1.2; margin-bottom: 1.2em; }h4, .h4 { font-size: 1.1em; line-height: 1.364; margin-bottom: 1.364em; }h5, .h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }h6, .h6 { font-size: 1em; font-weight: bold; }
20Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 21: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/21.jpg)
h1, .h1 { font-size: 2em; line-height: 1.5; margin-bottom: .75em; }h2, .h2 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }h3, .h3 { font-size: 1.25em; line-height: 1.2; margin-bottom: 1.2em; }h4, .h4 { font-size: 1.1em; line-height: 1.364; margin-bottom: 1.364em; }h5, .h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }h6, .h6 { font-size: 1em; font-weight: bold; }
Pour avoir la forme seule !
21Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 22: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/22.jpg)
Listes
![Page 23: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/23.jpg)
<ul>
<li>
<li>
<li>
<li>
<li>
<li>
23Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 24: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/24.jpg)
<ol>
<li>
<li>
<li>
<li>
24Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 25: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/25.jpg)
<dl>
<dd>
<dt>
<dt>
<dd>
<dt>
<dd>
25Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 26: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/26.jpg)
<dl>
<dd>
<dt>
<dt>
<dd>
26Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 27: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/27.jpg)
27Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 28: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/28.jpg)
ol,ul,dd { margin-left: 1.5em; }
28Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 29: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/29.jpg)
Citations
![Page 30: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/30.jpg)
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)
<blockquote>
<cite>
30Pour en savoir plus : http://romy.tetue.net/blockquote-cite-html5Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 31: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/31.jpg)
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)
<blockquote>
?
<cite>
31Pour en savoir plus : http://romy.tetue.net/blockquote-cite-html5Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 32: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/32.jpg)
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)
<blockquote>
<footer>
<cite>
32Pour en savoir plus : http://romy.tetue.net/blockquote-cite-html5Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 33: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/33.jpg)
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)
<blockquote>
<small>
<cite>
33Pour en savoir plus : http://romy.tetue.net/blockquote-cite-html5Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 34: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/34.jpg)
34Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
<blockquote>
![Page 35: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/35.jpg)
<div>
+ .blockquote
35Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 36: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/36.jpg)
Medias
![Page 37: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/37.jpg)
<figure>
<figcaption>
37Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 38: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/38.jpg)
<figure>
<figure>
<figure>
<figure>
38Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 39: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/39.jpg)
Encadrés
![Page 40: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/40.jpg)
.box
40Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 41: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/41.jpg)
.box { display: block; padding: 1.5em; background: pink; margin-bottom: 1.5em;}@media print { .box { border: 1px solid !important; }}
41Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 42: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/42.jpg)
.box { display: block; padding: 1.5em; background: pink; margin-bottom: 1.5em;}@media print { .box { border: 1px solid; }}
42Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
Ne pas perdre l’encadré à l’impression
![Page 43: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/43.jpg)
<aside>
43Pour 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
![Page 44: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/44.jpg)
44Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 45: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/45.jpg)
Taille des caractères
![Page 46: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/46.jpg)
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.
46Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 47: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/47.jpg)
Pouvoirzoomer le texte
à 200 %Critère AccessiWeb HTML5/ARIA No 10.4 [AA]
Test RGAA 2.2 No 7.13 [AA]
Améliorer l’accessibilité par la typographie : http://www.pompage.net/traduction/ameliorer-l-accessibilite-par-la-typographie
Source : http://www.voyages-sncf.com/guide/accessibilite
Source : Bonnes pratiques graphiques — Paris Web 2012 47
![Page 48: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/48.jpg)
html { font-size: 100%; }body { font-size: 1em; }
h1 { font-size: 200%; }h2 { font-size: 150%; }h3 { font-size: 130%; }
small { font-size: 80%; }
%emrem
pxexptcmmminpc
48Pour en savoir plus : http://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texte-avec-les-em.htmlBien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 49: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/49.jpg)
Laisserle texte
à 100 %
Relative readability, by Wilson Miner, 2008http://wm4.wilsonminer.com/posts/2008/oct/20/relative-readability/
16px 11pt
Source : Bonnes pratiques graphiques — Paris Web 2012 49
![Page 50: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/50.jpg)
Responsive Typography: The Basics, by Oliver Reichenstein, 2012http://informationarchitects.net/blog/responsive-typography-the-basics/Source : Bonnes pratiques graphiques — Paris Web 2012
Laisserle texte
à 100 %
50
![Page 51: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/51.jpg)
51Source : Un petit pas pour l'em, un grand pas pour le Web, par Nicolas Hoisey, Paris Web 2013Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 52: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/52.jpg)
html { font-size: 100%; }body { font-size: 1em; }
h1 { font-size: 200%; }h2 { font-size: 150%; }h3 { font-size: 130%; }
small { font-size: 80%; }
= 16px
Valeur par défaut du terminalou préférence utilisateur
52Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 53: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/53.jpg)
53Outil en ligne : http://pxtoem.comBien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 54: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/54.jpg)
Résultats de recherchedes occurrences de « font-size » dans un projet…
54Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 55: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/55.jpg)
html { font-size: 100%; }body { font-size: 1em; }
h1 { font-size: 200%; }h2 { font-size: 150%; }h3 { font-size: 130%; }
small { font-size: 80%; }
55Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 56: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/56.jpg)
html { font-size: 100%; }body { font-size: 1em; }
h1 { font-size: 200%; }h2 { font-size: 150%; }h3 { font-size: 130%; }
small { font-size: 80%; }
56Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 57: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/57.jpg)
html { font-size: 100%; }body { font-size: 1em; }
h1 { font-size: 200%; }h2 { font-size: 150%; }h3 { font-size: 130%; }
small { font-size: 80%; }
57Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 58: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/58.jpg)
html { font-size: 100%; }body { font-size: 1em; }
h1 { font-size: 200%; }h2 { font-size: 150%; }h3 { font-size: 130%; }
small { font-size: 80%; }
58Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 59: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/59.jpg)
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.
59Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 60: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/60.jpg)
60Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 61: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/61.jpg)
.biggest { font-size: 200%; } .bigger { font-size: 175%; } big, .big { font-size: 130%; }
small, .small { font-size: 80%; } .smaller { font-size: 75%; }
61Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 62: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/62.jpg)
Rythme vertical
![Page 63: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/63.jpg)
63Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 64: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/64.jpg)
body {font-size: 1em;line-height: 1.5;
}
64Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
La propriété CSS line-height spécifie l’interligne- plus précisément la hauteur de ligne.
![Page 65: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/65.jpg)
21.2 1.5
65 66Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 66: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/66.jpg)
body {font-size: 1em;line-height: 1.5;
}
= 16px= 16px * 1.5 = 24px
Pas d’unitéC’est un multiplicateur
66Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 67: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/67.jpg)
67Source : 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
![Page 68: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/68.jpg)
68Outil en ligne : https://drewish.com/tools/vertical-rhythm/Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 69: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/69.jpg)
body {font-size: 1em;line-height: 1.5;
}
69Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 70: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/70.jpg)
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.
70Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
![Page 71: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/71.jpg)
Des questions ?
Romy Duhem-Verdièrehttp://romy.tetue.net/1067
@tetue
![Page 72: Bien composer le texte web](https://reader034.fdocuments.fr/reader034/viewer/2022042518/55a3a9be1a28ab73658b45bb/html5/thumbnails/72.jpg)
• 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 2013http://romy.tetue.net/ameliorer-lisibilite-typographique
• Tiny Typo, base CSS pour le contenu éditorial webhttp://tinytypo.tetue.net
• Typographie web : gérer la taille du texte avec les « em », par Alsacréations, 2006http://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 2013http://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, 2007https://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 2014http://slides.iamvdo.me/kiwiparty14/