SlideShare une entreprise Scribd logo
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/ecriture-web/ 
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
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
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; 
} 
.text-center { 
text-align: 
center; 
} 
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 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
<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
&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
<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
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
Hiérarchie des titres
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
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
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 Codeurs en Seine 2014
19 
Outil en ligne : http://lamb.cc/typograph 
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
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
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
Listes
<ul> 
<li> 
<li> 
<li> 
<li> 
<li> 
<li> 
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 23
<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 25
<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 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
<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
<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
<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
<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 solid !important; 
} 
} 
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 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
<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
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%; } 
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
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
% 
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
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
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 
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
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 
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ère, pour Codeurs en Seine 2014 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
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
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
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
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
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%; } 
.smaller { font-size: 75%; } 
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 61
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 hauteur de ligne. 
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 64
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 composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 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
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
body { 
font-size: 1em; 
line-height: 1.5; 
} 
Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014 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
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 : 
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/

Contenu connexe

En vedette

Typographie pour le Web
Typographie pour le WebTypographie pour le Web
Typographie pour le WebStrasWeb
 
mettre en œuvre des compositions C-L-A-I-R-E-S
mettre en œuvre des compositions C-L-A-I-R-E-Smettre en œuvre des compositions C-L-A-I-R-E-S
mettre en œuvre des compositions C-L-A-I-R-E-SYves Goguely
 
Techniques de web design
Techniques de web designTechniques de web design
Techniques de web designPoule Design
 
L'art de la typographie, d'illustrator à InDesign
L'art de la typographie, d'illustrator à InDesignL'art de la typographie, d'illustrator à InDesign
L'art de la typographie, d'illustrator à InDesignFranck Payen
 
Cours sur la programmation neurolinguistique redouane boulguid lp icsi-ensa s...
Cours sur la programmation neurolinguistique redouane boulguid lp icsi-ensa s...Cours sur la programmation neurolinguistique redouane boulguid lp icsi-ensa s...
Cours sur la programmation neurolinguistique redouane boulguid lp icsi-ensa s...Rednef68 Rednef68
 
Koudetat identite - Typographie
Koudetat identite - TypographieKoudetat identite - Typographie
Koudetat identite - TypographieTheFamily
 
Comment construire son univers iconographique par Julia Moroge
Comment construire son univers iconographique par Julia MorogeComment construire son univers iconographique par Julia Moroge
Comment construire son univers iconographique par Julia MorogeTheFamily
 
Cours de typographie (2) - Le flux typographique dans le prépresse
Cours de typographie (2) - Le flux typographique dans le prépresseCours de typographie (2) - Le flux typographique dans le prépresse
Cours de typographie (2) - Le flux typographique dans le prépresseSerge Guerriero
 
Codes Typographiques1
Codes Typographiques1Codes Typographiques1
Codes Typographiques1Signlighter
 
Le bien être, une recherche quotidienne - Rapport d'étude
Le bien être, une recherche quotidienne - Rapport d'étudeLe bien être, une recherche quotidienne - Rapport d'étude
Le bien être, une recherche quotidienne - Rapport d'étudeIpsos France
 
De La typographie Lisible à la Typographie Visible
De La typographie Lisible à la Typographie VisibleDe La typographie Lisible à la Typographie Visible
De La typographie Lisible à la Typographie VisibleLCxLM
 
La Typographie Web - CleverToday
La Typographie Web - CleverTodayLa Typographie Web - CleverToday
La Typographie Web - CleverTodayCleverToday
 
Gestion des conflits
Gestion des conflitsGestion des conflits
Gestion des conflitsSami Belhaj
 
Cours de typographie (1) – La discipline visuelle
Cours de typographie (1) – La discipline visuelleCours de typographie (1) – La discipline visuelle
Cours de typographie (1) – La discipline visuelleSerge Guerriero
 
Les Machinimas par Isabelle Arvers, Cinéma 104, 13 juin 2012
Les Machinimas par Isabelle Arvers, Cinéma 104, 13 juin 2012Les Machinimas par Isabelle Arvers, Cinéma 104, 13 juin 2012
Les Machinimas par Isabelle Arvers, Cinéma 104, 13 juin 2012Isabelle Arvers
 
Etude d’une œuvre d’ayn rand par heng hovine_tragnee
Etude d’une œuvre d’ayn rand par  heng hovine_tragneeEtude d’une œuvre d’ayn rand par  heng hovine_tragnee
Etude d’une œuvre d’ayn rand par heng hovine_tragneeTheillier Nicomaque
 
Présentation1
Présentation1Présentation1
Présentation1christho
 

En vedette (20)

Typographie pour le Web
Typographie pour le WebTypographie pour le Web
Typographie pour le Web
 
mettre en œuvre des compositions C-L-A-I-R-E-S
mettre en œuvre des compositions C-L-A-I-R-E-Smettre en œuvre des compositions C-L-A-I-R-E-S
mettre en œuvre des compositions C-L-A-I-R-E-S
 
Techniques de web design
Techniques de web designTechniques de web design
Techniques de web design
 
L'art de la typographie, d'illustrator à InDesign
L'art de la typographie, d'illustrator à InDesignL'art de la typographie, d'illustrator à InDesign
L'art de la typographie, d'illustrator à InDesign
 
Cours sur la programmation neurolinguistique redouane boulguid lp icsi-ensa s...
Cours sur la programmation neurolinguistique redouane boulguid lp icsi-ensa s...Cours sur la programmation neurolinguistique redouane boulguid lp icsi-ensa s...
Cours sur la programmation neurolinguistique redouane boulguid lp icsi-ensa s...
 
Koudetat identite - Typographie
Koudetat identite - TypographieKoudetat identite - Typographie
Koudetat identite - Typographie
 
Comment construire son univers iconographique par Julia Moroge
Comment construire son univers iconographique par Julia MorogeComment construire son univers iconographique par Julia Moroge
Comment construire son univers iconographique par Julia Moroge
 
Cours de typographie (2) - Le flux typographique dans le prépresse
Cours de typographie (2) - Le flux typographique dans le prépresseCours de typographie (2) - Le flux typographique dans le prépresse
Cours de typographie (2) - Le flux typographique dans le prépresse
 
Codes Typographiques1
Codes Typographiques1Codes Typographiques1
Codes Typographiques1
 
Bien etre et_la_performance_au_travail (1)
Bien etre et_la_performance_au_travail (1)Bien etre et_la_performance_au_travail (1)
Bien etre et_la_performance_au_travail (1)
 
Pnl
PnlPnl
Pnl
 
Le bien être, une recherche quotidienne - Rapport d'étude
Le bien être, une recherche quotidienne - Rapport d'étudeLe bien être, une recherche quotidienne - Rapport d'étude
Le bien être, une recherche quotidienne - Rapport d'étude
 
De La typographie Lisible à la Typographie Visible
De La typographie Lisible à la Typographie VisibleDe La typographie Lisible à la Typographie Visible
De La typographie Lisible à la Typographie Visible
 
La Typographie Web - CleverToday
La Typographie Web - CleverTodayLa Typographie Web - CleverToday
La Typographie Web - CleverToday
 
Gestion des conflits
Gestion des conflitsGestion des conflits
Gestion des conflits
 
Cours de typographie (1) – La discipline visuelle
Cours de typographie (1) – La discipline visuelleCours de typographie (1) – La discipline visuelle
Cours de typographie (1) – La discipline visuelle
 
Les Machinimas par Isabelle Arvers, Cinéma 104, 13 juin 2012
Les Machinimas par Isabelle Arvers, Cinéma 104, 13 juin 2012Les Machinimas par Isabelle Arvers, Cinéma 104, 13 juin 2012
Les Machinimas par Isabelle Arvers, Cinéma 104, 13 juin 2012
 
L o mas lindo
L o mas lindoL o mas lindo
L o mas lindo
 
Etude d’une œuvre d’ayn rand par heng hovine_tragnee
Etude d’une œuvre d’ayn rand par  heng hovine_tragneeEtude d’une œuvre d’ayn rand par  heng hovine_tragnee
Etude d’une œuvre d’ayn rand par heng hovine_tragnee
 
Présentation1
Présentation1Présentation1
Présentation1
 

Similaire à Bien composer le texte web

Bonnes pratiques intégration robuste
Bonnes pratiques intégration robusteBonnes pratiques intégration robuste
Bonnes pratiques intégration robusteRomy Duhem-Verdière
 
Conduite de projet web elie sloim temesis mopa 20141113
Conduite de projet web elie sloim temesis mopa 20141113Conduite de projet web elie sloim temesis mopa 20141113
Conduite de projet web elie sloim temesis mopa 20141113MONA
 
Ayez les clés pour bâtir votre site internet et communiquer avec votre agence
Ayez les clés pour bâtir votre site internet et communiquer avec votre agenceAyez les clés pour bâtir votre site internet et communiquer avec votre agence
Ayez les clés pour bâtir votre site internet et communiquer avec votre agenceDestination Brocéliande
 
Conception du portail centenaire.org — Rencontre du web 14-18
Conception du portail centenaire.org — Rencontre du web 14-18Conception du portail centenaire.org — Rencontre du web 14-18
Conception du portail centenaire.org — Rencontre du web 14-18Martin Ferronnière
 
Alphorm.com Formation Dreamweaver CC pour les débutants
Alphorm.com Formation Dreamweaver CC pour les débutantsAlphorm.com Formation Dreamweaver CC pour les débutants
Alphorm.com Formation Dreamweaver CC pour les débutantsAlphorm
 
La guerre SEO du CMS : WordPress VS Drupal
La guerre SEO du CMS : WordPress VS DrupalLa guerre SEO du CMS : WordPress VS Drupal
La guerre SEO du CMS : WordPress VS DrupalDaniel Roch - SeoMix
 
Atelier WordPress - Freelance fair tour - La cordée Rennes
Atelier WordPress - Freelance fair tour - La cordée RennesAtelier WordPress - Freelance fair tour - La cordée Rennes
Atelier WordPress - Freelance fair tour - La cordée Renneswpalex
 
Seo camp day lorraine 2018 - Nancy gregory ambroise
Seo camp day lorraine 2018  - Nancy gregory ambroiseSeo camp day lorraine 2018  - Nancy gregory ambroise
Seo camp day lorraine 2018 - Nancy gregory ambroiseGrégory Ambroise
 
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)Corinne Schillinger
 
Webdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsWebdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsOlivier Dommange
 
Web Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibesWeb Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibesiProspect France
 
Webperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibesWebperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibesMadeline Pinthon
 

Similaire à Bien composer le texte web (16)

Bonnes pratiques intégration robuste
Bonnes pratiques intégration robusteBonnes pratiques intégration robuste
Bonnes pratiques intégration robuste
 
Conduite de projet web elie sloim temesis mopa 20141113
Conduite de projet web elie sloim temesis mopa 20141113Conduite de projet web elie sloim temesis mopa 20141113
Conduite de projet web elie sloim temesis mopa 20141113
 
Méthode CSS modulaire Daisy
Méthode CSS modulaire DaisyMéthode CSS modulaire Daisy
Méthode CSS modulaire Daisy
 
Ayez les clés pour bâtir votre site internet et communiquer avec votre agence
Ayez les clés pour bâtir votre site internet et communiquer avec votre agenceAyez les clés pour bâtir votre site internet et communiquer avec votre agence
Ayez les clés pour bâtir votre site internet et communiquer avec votre agence
 
CMS
CMSCMS
CMS
 
Presentation wc
Presentation wcPresentation wc
Presentation wc
 
Conception du portail centenaire.org — Rencontre du web 14-18
Conception du portail centenaire.org — Rencontre du web 14-18Conception du portail centenaire.org — Rencontre du web 14-18
Conception du portail centenaire.org — Rencontre du web 14-18
 
Alphorm.com Formation Dreamweaver CC pour les débutants
Alphorm.com Formation Dreamweaver CC pour les débutantsAlphorm.com Formation Dreamweaver CC pour les débutants
Alphorm.com Formation Dreamweaver CC pour les débutants
 
La guerre SEO du CMS : WordPress VS Drupal
La guerre SEO du CMS : WordPress VS DrupalLa guerre SEO du CMS : WordPress VS Drupal
La guerre SEO du CMS : WordPress VS Drupal
 
Staelens cv 2019 word
Staelens cv 2019 wordStaelens cv 2019 word
Staelens cv 2019 word
 
Atelier WordPress - Freelance fair tour - La cordée Rennes
Atelier WordPress - Freelance fair tour - La cordée RennesAtelier WordPress - Freelance fair tour - La cordée Rennes
Atelier WordPress - Freelance fair tour - La cordée Rennes
 
Seo camp day lorraine 2018 - Nancy gregory ambroise
Seo camp day lorraine 2018  - Nancy gregory ambroiseSeo camp day lorraine 2018  - Nancy gregory ambroise
Seo camp day lorraine 2018 - Nancy gregory ambroise
 
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
 
Webdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsWebdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outils
 
Web Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibesWeb Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibes
 
Webperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibesWebperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibes
 

Bien composer le texte web

  • 1. Bien composer le texte web La typo web facile (avec Tiny Typo) par Romy Duhem-Verdière
  • 3.
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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/