Bien composer le texte web

Bien composer le texte webLa typo web facile (avec Tiny Typo)

par Romy Duhem-Verdière

Romy Duhem-Verdièrehttp://romy.tetue.net

@tetue

Paragraphes

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;

.text-left {text-align: left;

.text-right {text-align: right;

.text-justify {text-align: justify;

.text-center {text-align: center;

L'élément BR coupela 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’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

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

Les titres hiérarchisent le contenu

Un titre annonce un contenu

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

Pour avoir la forme seule !

Listes

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

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)

<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

<cite>

<cite>

<small>

<cite>

+ .blockquote

Medias

Encadrés

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

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

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.

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

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

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

= 16px

Valeur par défaut du terminalou préférence utilisateur

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…

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

Rythme vertical

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.

21.2 1.5

65 66Bien composer le texte web, par Romy Duhem-Verdière, pour Codeurs en Seine 2014

= 16px= 16px * 1.5 = 24px

Pas d’unitéC’est un multiplicateur

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

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

Bien composer le texte web

Design

RAPPORT FINAL DU GT H+H - ne.ch · PDF file3.2 Partenariat public-privé ... questions prioritaires et deux phases bien distinctes ... compétences requises pour composer les futurs

Moyennes Géométries · Moyennes géométries Je "vois" la musique bien avant de l'entendre. Mentalement, pour moi, composer c'est travailler sur la construction et l'agencement

Composer et interpréter des rythmes

MARC-ANDRÉ HAMELIN plays The Composer-Pianists

the music of the composer myster shadow-sky

Brochure Composer Votre éQuipe 2008

Bien démarrer avec Twine - Salle des Rancy · Mettre en forme du texte Vous pouvez mettre en forme votre texte pour qu’il soit plus agréable à lire : • gras Le texte entre

L'Essentiel du Solfège pour Composer

Composer Musique Online

Mensonge bien gardé (début de texte)

L'Essentiel du Solfège pour Composer au Piano

En vacances on holiday Nous allons.. Travailler avec un texte plus long au passé comprendre Construire un texte Prononcer bien

DOSSIER DE PRESSE Requiem - cdntours.frcdntours.fr/.../default/files/spectacles/dossier_de_presse_requiem.pdf · farcesques ou dramatiques, mêlant les genres pour composer un texte

香港演藝精英盃音樂大賽 · 2020. 3. 3. · Composer: Felix Swinstead Piece: Questions Composer: Paul Hughes Repertoire Piece: Corranto Composer: Anon Piece: Cradle Song

Sommaire - Composer en home studio

Perles Tissees - 50 Bijoux a Composer

Web viewTexte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte

ESPAGNOL - ens.fr AL 2014/espagnol... · Concours ESPAGNOL Écrit Toutes séries Commentaire et traduction d’un texte hors programme Les candidats ont eu cette année à composer

ESPAGNOL - ens.psl.eu · Concours ESPAGNOL Écrit Toutes séries Commentaire et traduction d’un texte hors programme Les candidats ont eu cette année à composer sur un texte de

PHP Composer : Pourquoi ? Comment ? Et plus