Bien composer le texte web 
La typo web facile (avec Tiny Typo) 
par Romy Duhem-Verdière
Romy Duhem-Verdière 
http://romy.tetue.net 
@tetue
Paragraphes
<p> 
<h2> 
<h1> 
<p> 
<h2> 
<p> 
5 
Source : Spécificités de l’écriture web, Sunukaddu — http://sunukaddu.com/lesson/ecrit...
6 
Flan d’imprimerie au Centre d’Histoire Sociale, Expotec 103, à Rouen — Photo de Frédéric Bisson 
et http://klepas.org/t...
Composition en alinéa Rendu web 
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 7
.text-left { 
text-align: 
left; 
} 
.text-right { 
text-align: 
right; 
} 
.text-justify { 
text-align: 
justify; 
} 
.te...
.text-left { 
text-align: 
left; 
} 
.text-right { 
text-align: 
right; 
} 
.text-justify { 
text-align: 
justify; 
} 
.te...
<br> 
L'élément BR coupe 
la ligne de texte courante. 
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs e...
&nbsp; 
L'entité &nbsp; (  ou  ) 
agit comme un espace insécable, 
pour empêcher qu'une coupure de ligne 
n'intervienne en...
<p>Il est désormais d’usage 
d’écrire «&nbsp;Garamond&nbsp;» 
pour désigner une police de 
caractère, et «&nbsp;Garamont&n...
Une idée par paragraphe 
Sauter une ligne entre chaque 
Éviter de justifier le texte 
Utiliser les espaces insécables 
Bie...
Hiérarchie des titres
Il existe 6 niveaux de titres 
15 
Illustration : http://blog.axe-net.fr/hierarchie-balises-h1-h2-hn-referencement/ 
Bien ...
Les titres hiérarchisent le contenu 
<h1> 
<h2> 
<h3> 
<h4> 
Bien composer le texte web, par Romy Duhem-Verdière, pour Cod...
Un titre annonce un contenu 
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 17
18 
Source : http://tinytypo.tetue.net/tinytypo.html#heading 
Bien composer le texte web, par Romy Duhem-Verdière, pour Co...
19 
Outil en ligne : http://lamb.cc/typograph 
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine ...
h1, .h1 { font-size: 2em; line-height: 1.5; h2, .h2 { font-size: 1.5em; line-height: h3, .h3 { font-size: 1.25em; line-hei...
h1, .h1 { font-size: 2em; line-height: 1.5; h2, .h2 { font-size: 1.5em; line-height: h3, .h3 { font-size: 1.25em; line-hei...
Listes
<ul> 
<li> 
<li> 
<li> 
<li> 
<li> 
<li> 
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 ...
<ol> 
<li> 
<li> 
<li> 
<li> 
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 24
<dl> 
<dt> 
<dd> 
<dt> 
<dd> 
<dt> 
<dd> 
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 ...
<dl> 
<dt> 
<dd> 
<dt> 
<dd> 
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 26
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 27
ol, 
ul, 
dd { margin-left: 1.5em; } 
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 28
Citations
<blockquote> 
Les règles de typographie fine, que l’on nomme 
microtypographie dans le langage professionnel 
des métiers ...
<blockquote> 
Les règles de typographie fine, que l’on nomme 
microtypographie dans le langage professionnel 
des métiers ...
<blockquote> 
Les règles de typographie fine, que l’on nomme 
microtypographie dans le langage professionnel 
des métiers ...
<blockquote> 
Les règles de typographie fine, que l’on nomme 
microtypographie dans le langage professionnel 
des métiers ...
<blockquote> 
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 34
<div> 
+ .blockquote 
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 35
Medias
<figure> 
<figcaption> 
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 37
<figure> 
<figure> 
<figure> 
<figure> 
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 38
Encadrés
.box 
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 40
.box { 
display: block; 
padding: 1.5em; 
background: pink; 
margin-bottom: 1.5em; 
} 
@media print { 
.box { 
border: 1px...
.box { 
display: block; 
padding: 1.5em; 
background: pink; 
margin-bottom: 1.5em; 
} 
@media print { 
.box { 
border: 1px...
<aside> 
43 
Pour en savoir plus : http://docteurhtml5.com/html5/comprendre-la-balise-aside/ 
Bien composer le texte web, ...
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 44
Taille des caractères
html { font-size: 100%; } 
body { font-size: 1em; } 
h1 { font-size: 200%; } 
h2 { font-size: 150%; } 
h3 { font-size: 130...
Pouvoir 
zoomer le texte 
à 200 % 
Critère AccessiWeb HTML5/ARIA No 10.4 [AA] 
Test RGAA 2.2 No 7.13 [AA] 
Source : http:/...
% 
em 
rem 
html { font-size: 100%; } 
body { font-size: 1em; } 
h1 { font-size: 200%; } 
h2 { font-size: 150%; } 
h3 { fo...
Laisser 
le texte 
à 100 % 
16px 11pt 
Relative readability, by Wilson Miner, 2008 
http://wm4.wilsonminer.com/posts/2008/...
Laisser 
le texte 
à 100 % 
Responsive Typography: The Basics, by Oliver Reichenstein, 2012 
http://informationarchitects....
51 
Source : Un petit pas pour l'em, un grand pas pour le Web, par Nicolas Hoisey, Paris Web 2013 
Bien composer le texte ...
html { font-size: 100%; } 
body { font-size: 1em; } 
= 16px 
h1 { font-size: 200%; } 
h2 { font-size: 150%; } 
h3 { font-s...
53 
Outil en ligne : http://pxtoem.com 
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
Résultats de recherche 
des occurrences de « font-size » dans un projet… 
Bien composer le texte web, par Romy Duhem-Verdi...
html { font-size: 100%; } 
body { font-size: 1em; } 
h1 { font-size: 200%; } 
h2 { font-size: 150%; } 
h3 { font-size: 130...
html { font-size: 100%; } 
body { font-size: 1em; } 
h1 { font-size: 200%; } 
h2 { font-size: 150%; } 
h3 { font-size: 130...
html { font-size: 100%; } 
body { font-size: 1em; } 
h1 { font-size: 200%; } 
h2 { font-size: 150%; } 
h3 { font-size: 130...
html { font-size: 100%; } 
body { font-size: 1em; } 
h1 { font-size: 200%; } 
h2 { font-size: 150%; } 
h3 { font-size: 130...
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éri...
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 60
.biggest { font-size: 200%; } 
.bigger { font-size: 175%; } 
big, .big { font-size: 130%; } 
small, .small { font-size: 80...
Rythme vertical
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 63
body { 
font-size: 1em; 
line-height: 1.5; 
} 
La propriété CSS line-height spécifie l’interligne 
- plus précisément la h...
1.2 1.5 2 
B6ie5n composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 66
body { 
font-size: 1em; 
line-height: 1.5; 
} 
= 16px 
= 16px * 1.5 = 24px 
Pas d’unité 
C’est un multiplicateur 
Bien com...
Source : L'importance du rythme vertical en design CSS, par David Larlet — https://larlet.fr/david/biologeek/archives/2007...
68 
Outil en ligne : https://drewish.com/tools/vertical-rhythm/ 
Bien composer le texte web, par Romy Duhem-Verdière, pour...
body { 
font-size: 1em; 
line-height: 1.5; 
} 
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine ...
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 ...
Des questions ? 
Romy Duhem-Verdière 
http://romy.tetue.net/1067 
@tetue
• Relire la spécification HTML 4.01 : 
http://www.la-grange.net/w3c/html4.01/struct/text.html 
• Et la spécification HTML5...
Bien composer le texte web
Prochain SlideShare
Chargement dans…5
×

Bien composer le texte web

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

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/

×