Bien composer le texte web

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

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

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

<br>
L'élément BR coupe
la ligne de texte courante.

 
L'entité   (  ou  )
agit comme un espace insécable,
pour empêcher qu'une coupure de ligne
n'intervienne entre deux mots.

<p>Il est désormais d’usage
d’écrire « Garamond »
pour désigner une police de
caractère, et « Garamont »
pour citer le graveur.</p>
Source : http://romy.tetue.net/le-site-garamond-maltraite-la-typo
12 82

Une idée par paragraphe
Sauter une ligne entre chaque
Éviter de justifier le texte
Utiliser les espaces insécables

Il existe 6 niveaux de titres
15
Illustration : http://blog.axe-net.fr/hierarchie-balises-h1-h2-hn-referencement/

Les titres hiérarchisent le contenu
<h1>
<h2>
<h3>
<h4>

Un titre annonce un contenu

18
Source : http://tinytypo.tetue.net/tinytypo.html#heading

19
Outil en ligne : http://lamb.cc/typograph

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 !

ol,
ul,
dd { margin-left: 1.5em; }

<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

<blockquote>
?
<cite>
31

<blockquote>
<footer>
<cite>
32

<blockquote>
<small>
<cite>
33

<div>
+ .blockquote

.box

.box {
display: block;
padding: 1.5em;
background: pink;
margin-bottom: 1.5em;
}
@media print {
.box {
border: 1px solid !important;
}
}

.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

<aside>
43
Pour en savoir plus : http://docteurhtml5.com/html5/comprendre-la-balise-aside/

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.

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
h1 { font-size: 200%; }
h2 { font-size: 150%; }
h3 { font-size: 130%; }
px
ex
pt
cm
mm
in
pc
48
Pour en savoir plus : http://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texte-avec-les-em.html

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

= 16px
h1 { font-size: 200%; }
h2 { font-size: 150%; }
h3 { font-size: 130%; }
Valeur par défaut du terminal
ou préférence utilisateur

53
Outil en ligne : http://pxtoem.com

Résultats de recherche
des occurrences de « font-size » dans un projet…

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érite
3. Puis définir quelques exceptions :
titres plus gros, mentions plus petites, etc.

.biggest { font-size: 200%; }
.bigger { font-size: 175%; }
big, .big { font-size: 130%; }
small, .small { font-size: 80%; }
.smaller { font-size: 75%; }

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.

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

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

68
Outil en ligne : https://drewish.com/tools/vertical-rhythm/

body {
font-size: 1em;
line-height: 1.5;
}

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.

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/

Bien composer le texte web

Contenu connexe

En vedette (20)

Similaire à Bien composer le texte web (16)

Bien composer le texte web