Embed Size (px)
Citation preview
Bien composer le texte webLa typo web facile (avec Tiny Typo)
par Romy Duhem-Verdière
Paragraphes
<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
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
Composition en alinéa Rendu web
7Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
.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
.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
<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
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
<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
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
Hiérarchie des titres
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
<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
Un titre annonce un contenu
17Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
18Source : http://tinytypo.tetue.net/tinytypo.html#headingBien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
19Outil en ligne : http://lamb.cc/typographBien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
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
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
Listes
<ul>
<li>
<li>
<li>
<li>
<li>
<li>
23Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
<ol>
<li>
<li>
<li>
<li>
24Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
<dl>
<dd>
<dt>
<dt>
<dd>
<dt>
<dd>
25Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
<dl>
<dd>
<dt>
<dt>
<dd>
26Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
27Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
ol,ul,dd { margin-left: 1.5em; }
28Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
Citations
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
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
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
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
34Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
<blockquote>
<div>
+ .blockquote
35Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
Medias
<figure>
<figcaption>
37Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
<figure>
<figure>
<figure>
<figure>
38Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
Encadrés
.box
40Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
.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
.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
<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
44Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
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.
46Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
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
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
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
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
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
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
53Outil en ligne : http://pxtoem.comBien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
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
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
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
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
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
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
60Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
.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
Rythme vertical
63Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
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.
21.2 1.5
65 66Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
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
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
68Outil 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;
}
69Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014
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
Des questions ?
Romy Duhem-Verdièrehttp://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 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/
