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.
Quels principes adopter en phase de création graphique pour préserver l’ergonomie et l’accessibilité de l’interface web ? Lisibilité typographique, contrastes, couleurs, signalétique des hyperliens, utilisabilité des formulaires, messages d’erreur etc. Quels exemples suivre ?
Ce petit florilège de bonnes pratiques graphiques pour améliorer l’ergonomie et l’accessibilité web, était proposé en atelier à Paris Web 2012.
De nombreux sites sont difficiles à lire pour les internautes. N’êtes-vous pas souvent penché en avant sur votre chaise pour mieux lire à l’écran ? Il est pourtant assez simple et rapide d’améliorer cela.
Pour s'y retrouver dans le vocabulaire de la conception, commençons par mettre les bons mots sur les choses : wireframe, style tiles, prototype, etc. Voyons ensuite comment enchaîner ça dans un workflow idéal, à moduler en fonction des équipes et des projets, pour vitaminer vos processus de conception web !
La tendance est de plus en plus marquée pour 2015, les utilisateurs veulent du simple, du rapide et du facile, tout en obtenant de très bons résultats sur le rendu visuel de leur WordPress.
Les constructeurs de page sont en plein essor, avec les meilleurs on peut très rapidement créer des pages aux mises en formes complexes (colonnes, onglets tabulaires, filtres, etc), et ce, sans aucune connaissance particulière!
Oui mais… que valent-ils ? Quels sont les meilleurs constructeurs du moment ? Quels sont les avantages pour vous et votre client ? Quid de la qualité du code généré ? Et enfin, est-ce un frein à votre référencement ?
Autant de questions auxquelles nous allons essayer de répondre lors de cette conférence.
De plus en plus, la typographie est au cœur des problématiques de design web. Lisibilité, rigueur, émotion, etc. : la forme des lettres devient presque aussi importante que le fond des textes.
Petit retour en image sur la manière dont la typographie remplace les petits chatons sur Internet.
Quels principes adopter en phase de création graphique pour préserver l’ergonomie et l’accessibilité de l’interface web ? Lisibilité typographique, contrastes, couleurs, signalétique des hyperliens, utilisabilité des formulaires, messages d’erreur etc. Quels exemples suivre ?
Ce petit florilège de bonnes pratiques graphiques pour améliorer l’ergonomie et l’accessibilité web, était proposé en atelier à Paris Web 2012.
De nombreux sites sont difficiles à lire pour les internautes. N’êtes-vous pas souvent penché en avant sur votre chaise pour mieux lire à l’écran ? Il est pourtant assez simple et rapide d’améliorer cela.
Pour s'y retrouver dans le vocabulaire de la conception, commençons par mettre les bons mots sur les choses : wireframe, style tiles, prototype, etc. Voyons ensuite comment enchaîner ça dans un workflow idéal, à moduler en fonction des équipes et des projets, pour vitaminer vos processus de conception web !
La tendance est de plus en plus marquée pour 2015, les utilisateurs veulent du simple, du rapide et du facile, tout en obtenant de très bons résultats sur le rendu visuel de leur WordPress.
Les constructeurs de page sont en plein essor, avec les meilleurs on peut très rapidement créer des pages aux mises en formes complexes (colonnes, onglets tabulaires, filtres, etc), et ce, sans aucune connaissance particulière!
Oui mais… que valent-ils ? Quels sont les meilleurs constructeurs du moment ? Quels sont les avantages pour vous et votre client ? Quid de la qualité du code généré ? Et enfin, est-ce un frein à votre référencement ?
Autant de questions auxquelles nous allons essayer de répondre lors de cette conférence.
De plus en plus, la typographie est au cœur des problématiques de design web. Lisibilité, rigueur, émotion, etc. : la forme des lettres devient presque aussi importante que le fond des textes.
Petit retour en image sur la manière dont la typographie remplace les petits chatons sur Internet.
Cette formation a pour but de sensibiliser le public aux différents enjeux dans le choix d’une mise en page textuelle sur Internet.
La formation présentera dans les grandes lignes les différents types de police utilisés sur Internet, les situations où certaines polices sont plus ou moins adaptées, et les astuces d’ergonomie et de mise en page dans la création d’un site web.
Support de la conférence en ligne sur le site de Poule Design, le jeudi 9 août à 10h : techniques incontournables du web design aujourd'hui !
Profitez-en, la conférence est gratuite !
L'art de la typographie, d'illustrator à InDesignFranck Payen
Élement clé de toute creation graphique, la typographie est un art à part entière. Ce séminaire revient sur les techniques associées pour leurs créations graphiques dans Illustrator et aborde également les dernières nouveautés en termes d’usage de police dans InDesign ainsi que sur Typekit.
L'art de la typographie, d'illustrator à InDesign
Séminaire Ask a Pro — Adobe France — Mardi 14 avril 2015
animé par Franck Payen (@fr32c)
http://www.adobe.com/fr/event/askapro/replay.html
Cours sur la programmation neurolinguistique redouane boulguid lp icsi-ensa s...Rednef68 Rednef68
Ce cours est destiné aux étudiants de la Licence Professionnelle: Ingénierie et Conception des Systèmes d'Information pour le compte de l’année universitaire 2014/2015 - Ecole Nationale des Sciences Appliquées de Safi - Maroc.
Venez découvrir la typographie web, son histoire, son fonctionnement, les typographies les plus connues par le biais de cette présentation offerte lors d'un de nos lunch & learn.
Les Machinimas par Isabelle Arvers, Cinéma 104, 13 juin 2012Isabelle Arvers
En partenariat avec Kyrnéa Passeurs d’images, la Direction du développement culturel de la Ville de Pantin organise un colloque intitulé Adolescences numériques qui se tiendra le 13 juin 2012, de 14h à 18h, au Ciné 104. Présentation des machinimas et des ateliers de création de films à partir de moteurs de jeux vidéo par Isabelle Arvers, commissaire d'exposition indépendante.
Cet atelier partage des bonnes pratiques pour réaliser des intégrations robustes, qui résisteront au développement. À partir d’exemples concrets nous essayerons de décortiquer ensemble ce qui coince, entre le code idéal produit par l’intégrateur et le code effectivement développé, afin d’en tirer la leçon et lister les concessions prévisibles de part et d’autre pour un mariage réussi. Souple sur les pattes arrières !
Conduite de projet web elie sloim temesis mopa 20141113MONA
Présentation de Elie Sloim de la société Temesis sur la Conduite de projet web, dans le cadre de la journée MOPA du 13 novembre 2014 intitulé Manager sa destination avec la team numérique sur les territoires touristiques.
Cette formation a pour but de sensibiliser le public aux différents enjeux dans le choix d’une mise en page textuelle sur Internet.
La formation présentera dans les grandes lignes les différents types de police utilisés sur Internet, les situations où certaines polices sont plus ou moins adaptées, et les astuces d’ergonomie et de mise en page dans la création d’un site web.
Support de la conférence en ligne sur le site de Poule Design, le jeudi 9 août à 10h : techniques incontournables du web design aujourd'hui !
Profitez-en, la conférence est gratuite !
L'art de la typographie, d'illustrator à InDesignFranck Payen
Élement clé de toute creation graphique, la typographie est un art à part entière. Ce séminaire revient sur les techniques associées pour leurs créations graphiques dans Illustrator et aborde également les dernières nouveautés en termes d’usage de police dans InDesign ainsi que sur Typekit.
L'art de la typographie, d'illustrator à InDesign
Séminaire Ask a Pro — Adobe France — Mardi 14 avril 2015
animé par Franck Payen (@fr32c)
http://www.adobe.com/fr/event/askapro/replay.html
Cours sur la programmation neurolinguistique redouane boulguid lp icsi-ensa s...Rednef68 Rednef68
Ce cours est destiné aux étudiants de la Licence Professionnelle: Ingénierie et Conception des Systèmes d'Information pour le compte de l’année universitaire 2014/2015 - Ecole Nationale des Sciences Appliquées de Safi - Maroc.
Venez découvrir la typographie web, son histoire, son fonctionnement, les typographies les plus connues par le biais de cette présentation offerte lors d'un de nos lunch & learn.
Les Machinimas par Isabelle Arvers, Cinéma 104, 13 juin 2012Isabelle Arvers
En partenariat avec Kyrnéa Passeurs d’images, la Direction du développement culturel de la Ville de Pantin organise un colloque intitulé Adolescences numériques qui se tiendra le 13 juin 2012, de 14h à 18h, au Ciné 104. Présentation des machinimas et des ateliers de création de films à partir de moteurs de jeux vidéo par Isabelle Arvers, commissaire d'exposition indépendante.
Cet atelier partage des bonnes pratiques pour réaliser des intégrations robustes, qui résisteront au développement. À partir d’exemples concrets nous essayerons de décortiquer ensemble ce qui coince, entre le code idéal produit par l’intégrateur et le code effectivement développé, afin d’en tirer la leçon et lister les concessions prévisibles de part et d’autre pour un mariage réussi. Souple sur les pattes arrières !
Conduite de projet web elie sloim temesis mopa 20141113MONA
Présentation de Elie Sloim de la société Temesis sur la Conduite de projet web, dans le cadre de la journée MOPA du 13 novembre 2014 intitulé Manager sa destination avec la team numérique sur les territoires touristiques.
Produire le style CSS d'un site en équipe est souvent galère. Améliorez ça, en répartissant le code en différentes feuilles conventionnelles, indépendantes et interchangeables.
Ayez les clés pour bâtir votre site internet et communiquer avec votre agenceDestination Brocéliande
Si internet est devenu un outil incontournable pour les professionnels du tourisme, la création ou la refonte d’un site web
est souvent vécue comme une phase technique complexe et pleine d’interrogations. Comment choisir son prestataire
parmi une offre pléthorique ? Quelles fonctionnalités sont essentielles ? Quel budget prévoir ?...
Pas besoin d’être webmaster ou développeur pour définir les enjeux de votre présence sur le web. Un atelier convivial
pour connaître les bonnes pratiques et bien démarrer votre projet web !
CONTENU DE L'ATELIER :
Définir les objectifs de votre site internet
Découvrir les solutions techniques adaptées à votre projet
Découvrir les fonctionnalités essentielles à la performance de votre
site
Connaître les différentes étapes de la création d’un site internet
Choisir son prestataire sur des critères objectifs et précis
BONUS :
Repartez avec une base de cahier des charges de site Internet
Avec WordPress sont aujourd’hui produits des sites responsives, adaptatifs, ou en thèmes mobiles spécifiques. Ces mêmes sites sont aussi transférables en appli mobile ou en webmobile, sur des tablettes permettant la vente en direct en boutique.
À partir d’un back office unique, on pilote ainsi une multitude de sites sur des supports très différents.
Comment réalise t on ces sites WordPress multi-supports ? Quels sont les pièges à éviter et les best practices ? Quels sont les références de sites, les plugins existants et les possibilités actuelles ?
Découvrons les possibilités multi support de WordPress !
Conception du portail centenaire.org — Rencontre du web 14-18Martin Ferronnière
Retour sur la conception du portail centenaire.org : besoins de la Mission, réponses de l'agence is&a bloom, méthode et versions successives - Gaîté Lyrique vendredi 10 avril 2014 - M. Ferronnière & A. Brossé
Alphorm.com Formation Dreamweaver CC pour les débutantsAlphorm
Formation complète ici:
http://www.alphorm.com/tutoriel/formation-en-ligne-dreamweaver-cc-pour-les-debutants
Cette formation Adobe Dreamweaver CC vous présente l'utilisation de cet outil puissant de création de sites web statiques et dynamiques rapide et efficace.
Très simple et souple d’utilisation, Adobe Dreamweaver CC permet de créer un site internet sans réelle connaissance en développement grâce à son interface intuitive et son mode de "création".
Vous allez découvrir son interface puis traiter les notions de bases comme les listes, les formulaires, les ancres, les tableaux, les médias, les fonts, les CSS…
Ensuite, vous allez maîtriser la gestion et paramétrage des sites web sous Adobe Dreamweaver CC, en plus d'une introduction au responsive design et analyse de la compatibilité cross browsers.
Pour bien assimiler Adobe Dreamweaver CC, vous allez avoir une série d'exercices et d'exemples afin de construire un site final fonctionnel et complet.
WordPress et Drupal sont-ils des CMS optimisés pour le référencement naturel ? Lors du dernier SEOCampus de Paris, Simon Georges (Drupal) et Daniel Roch (WordPress) font leur retour d'expérience sur les lacunes quasi identiques de ces deux CMS pour le référencement naturel.
http://paris.seo-campus.org/guerre-cms-drupal-vs-wordpress/
Infos
Je possède plus de 10 années d’expérience en Webdesign et en intégration web. En recherche constante de solutions pertinentes, je m’engage pleinement dans chaque mandat. J’aime travailler directement dans vos bureaux car je crois qu’une étroite collaboration avec l’équipe en place est le catalyseur du succès.
Avec une grande polyvalence et en veille technologique constante, j’interviens sur un large éventail de problématiques, produits et services. Mon approche 360° est axée sur des stratégies visuelles, techniques concrètes et réalistes.
Doté d'une grande faculté d'adaptation et d'un esprit analytique, je sais traduire tant au niveau design que technique, les différents besoins d'une entreprise afin de concrétiser un projet ou de pallier une surcharge de travail.
• Plusieurs années d'expérience dans le domaine du Web Design et de l'intégration web
• Formation professionnelle qualifiante Master Web mobile
• Responsable de la conception graphique de sites internet et de l'intégration HTML / Css, d'infolettres, de bannières web publicitaires et de contenus interactifs
• Chargé d'optimiser l'ergonomie de sites web
• Chargé de la création et de la conception d'animations multimédia
• Contact clients : évaluer la demande, conseiller, et suivre les projets
Webdesign sites web et mobiles-methodes-realisation-outilsOlivier Dommange
Méthodes et stratégies de conception sites Web et mobiles. Processus de conception présentant la maquette de fil de fer (wireframe), mockups jusqu'au design. Présentation des objectifs et du rôle du Webdesigner à chacun des étapes. Rapports entre la dégradation élégante (gracefull degradation) et amélioration progressive (progressive enhancement - mobile first).
Comment améliorer la performance de votre site et avec quels outils ?
Retrouvez la présentation de Madeline Pinthon, consultante SEO, sur la performance web lors du SEO Good Vibes. #SEOGoodVibes
Quelques outils pour débuter l'analyse de la webperformance :
- comment comparer son site aux concurrents ?
- comment cibler les pages les plus problématiques ?
- comment détecter ce qui pose problème sur ces pages ?
- quels outils et indicateurs utiliser ?
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.
L'entité (  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
12. <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
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
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
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/