{"id":7149,"date":"2024-05-14T03:27:41","date_gmt":"2024-05-14T01:27:41","guid":{"rendered":"https:\/\/graphizm.fr\/greta\/?p=7149"},"modified":"2024-05-14T03:36:19","modified_gmt":"2024-05-14T01:36:19","slug":"typographie-et-lisibilite","status":"publish","type":"post","link":"https:\/\/graphizm.fr\/greta\/com-crea\/typographie-et-lisibilite\/","title":{"rendered":"Typographie et lisibilit\u00e9"},"content":{"rendered":"\n<p>Dans ce cours vous allez examiner avec attention les polices de caract\u00e8res utilis\u00e9es pour l\u2019impression et l\u2019affichage sur \u00e9cran. Il s\u2019agit de d\u00e9terminer quelles sont celles qui se lisent le mieux et pour quelles raisons.<a href=\"https:\/\/comvi.plurimedia.greta-clermont-auvergne.fr\/com-crea\/typographie-et-lisibilite\/#\"><\/a><\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Sommaire<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #6b6b6b;color:#6b6b6b\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #6b6b6b;color:#6b6b6b\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/typographie-et-lisibilite\/#Lisibilite_des_polices_sans_serif_lineales\" >Lisibilit\u00e9 des polices sans serif (lin\u00e9ales)<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/typographie-et-lisibilite\/#Polices_sans_serif_en_general\" >Polices sans serif en g\u00e9n\u00e9ral<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/typographie-et-lisibilite\/#Police_sans_serif_lisible_disponible_sur_toutes_les_plateformes\" >Police sans serif lisible disponible sur toutes les plateformes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/typographie-et-lisibilite\/#Polices_sans_serif_disponibles_sur_Google_Fonts\" >Polices sans serif disponibles sur Google Fonts<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/typographie-et-lisibilite\/#Le_test_qui_tue%E2%80%A6_les_sans_serif\" >Le test qui tue\u2026 les sans serif&nbsp;!<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/typographie-et-lisibilite\/#Lisibilite_des_polices_avec_serifs\" >Lisibilit\u00e9 des polices avec serifs<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Lisibilite_des_polices_sans_serif_lineales\"><\/span>Lisibilit\u00e9 des polices sans serif (lin\u00e9ales)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Polices_sans_serif_en_general\"><\/span>Polices sans serif en g\u00e9n\u00e9ral<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Dans un premier temps, penchons-nous sur les polices de caract\u00e8res sans empattement (<em>sans serif<\/em>, en anglais) nomm\u00e9es commun\u00e9ment \u201cpolices b\u00e2tons\u201d, utilis\u00e9es dans tous les m\u00e9dias.<\/p>\n\n\n\n<p><strong>Les polices sans serif appartiennent au grand registre des polices neutres.<\/strong>&nbsp;Elles sont utilis\u00e9es dans le secteur de la signal\u00e9tique mais aussi pour accompagner les polices plus expressives ou plus amicales. Ces derni\u00e8res sont r\u00e9serv\u00e9es exclusivement au titrage et les polices sans serif servent alors pour les textes de paragraphe (texte courant).<\/p>\n\n\n\n<p>Il est tout \u00e0 fait possible, en jouant sur le nombre de styles (\u2026 ou fontes) disponibles, d\u2019<strong>utiliser seulement une police de caract\u00e8res sans serif<\/strong>&nbsp;pour styliser un document.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Police_sans_serif_lisible_disponible_sur_toutes_les_plateformes\"><\/span>Police sans serif lisible disponible sur toutes les plateformes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Une dizaine de polices de caract\u00e8res sont disponibles par d\u00e9faut sur tous les syst\u00e8mes d\u2019exploitation. Parmi ces polices,&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.wikiwand.com\/fr\/Trebuchet_(police_d%27%C3%A9criture)\" target=\"_blank\">Trebuchet MS<\/a>&nbsp;se montre particuli\u00e8rement lisible. Son d\u00e9faut est d\u2019\u00eatre disponible dans seulement 4 fontes (normal, italique, gras, italique gras). Son avantage est d\u2019\u00eatre utilisable comme telle dans un site Web sans n\u00e9cessiter de t\u00e9l\u00e9chargement. \u00c9co-conception et lisibilit\u00e9 se conjuguent, m\u00eame si le potentiel de design est limit\u00e9 &#x1f609;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"520\" height=\"615\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2024\/05\/trebuchetMS-specimen.png\" alt=\"\" class=\"wp-image-7151\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2024\/05\/trebuchetMS-specimen.png 520w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2024\/05\/trebuchetMS-specimen-507x600.png 507w\" sizes=\"auto, (max-width: 520px) 100vw, 520px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Polices_sans_serif_disponibles_sur_Google_Fonts\"><\/span>Polices sans serif disponibles sur Google Fonts<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>La publication sur le Web s\u2019effectue souvent en faisant appel \u00e0 des polices distribu\u00e9es gratuitement. Google Fonts proposant un service de t\u00e9l\u00e9chargement performant, les polices de caract\u00e8res sans serif disponibles sur cette plateforme habillent de tr\u00e8s nombreux sites Web.<\/p>\n\n\n\n<p>Je vous propose d\u2019examiner attentivement&nbsp;<strong>une s\u00e9lection de polices sans serif<\/strong>&nbsp;disponibles sur Google Fonts.<\/p>\n\n\n\n<p>\u279c Notez quels sont les crit\u00e8res retenus pour effectuer cette s\u00e9lection. V\u00e9rifiez par vous-m\u00eame la pertinence du choix effectu\u00e9.<\/p>\n\n\n\n<p>V\u00e9rifiez \u00e9galement la pertinence des alternatives propos\u00e9es pour certaines polices de caract\u00e8res&nbsp;!<\/p>\n\n\n\n<p><a href=\"https:\/\/graphizm.fr\/typographie\/sans-serif-lisibles\/\" target=\"_blank\" rel=\"noreferrer noopener\">VOIR LA S\u00c9LECTION DES SANS SERIF DE GOOGLE FONTS<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Le_test_qui_tue%E2%80%A6_les_sans_serif\"><\/span>Le test qui tue\u2026 les sans serif&nbsp;!<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>Choisissez une police sans serif<\/strong>&nbsp;sur une plateforme de distribution de caract\u00e8res (Google Fonts, Squirrel Fonts, Dafont, etc.).<\/p>\n\n\n\n<p>\u279c&nbsp;<strong>Saisissez cette phrase<\/strong>&nbsp;dans le champ permettant de personnaliser le texte affich\u00e9 en exemple&nbsp;:&nbsp;<strong><em>\u201cIllisible&nbsp;!\u201d s\u2019\u00e9crie Ian en lisant l\u2019Iliade<\/em>\u2026<\/strong><\/p>\n\n\n\n<p>Le pr\u00e9nom Ian est fr\u00e9quent dans les pays anglo-saxons. Il s\u2019\u00e9crie aussi Iain.&nbsp;<em>L\u2019Iliade et l\u2019Odyss\u00e9e<\/em>&nbsp;est un texte du po\u00e8te grec Hom\u00e8re.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"639\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2024\/05\/test-lisibilite-lato-1024x639.png\" alt=\"\" class=\"wp-image-7153\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2024\/05\/test-lisibilite-lato-1024x639.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2024\/05\/test-lisibilite-lato-600x374.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2024\/05\/test-lisibilite-lato-768x479.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2024\/05\/test-lisibilite-lato-1536x958.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2024\/05\/test-lisibilite-lato-2048x1277.png 2048w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2024\/05\/test-lisibilite-lato-1200x748.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2024\/05\/test-lisibilite-lato-1980x1235.png 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Si vous ne parvenez pas \u00e0 lire correctement cette phrase test avec la police choisie, pourquoi envisageriez-vous d\u2019utiliser cette police de caract\u00e8res pour vos publications&nbsp;?&nbsp;<strong>Ach\u00e8teriez-vous un appareil qui ne fonctionnerait pas dans certaines circonstances&nbsp;?<\/strong><\/p>\n\n\n\n<p>Essayez&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/fonts.google.com\/specimen\/Roboto?preview.text=%E2%80%9CIllisible%20!%E2%80%9D%20s%E2%80%98%C3%A9crie%20Ian%20en%20lisant%20l%27Iliade.&amp;preview.text_type=custom\" target=\"_blank\">avec Roboto<\/a>&nbsp;&#x1f609;<\/p>\n\n\n\n<p>Vous voil\u00e0 outill\u00e9s pour v\u00e9rifier les dires des auteurs des articles suivants (qui ne sont pas tous pertinents&nbsp;!)&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.vistaprint.fr\/hub\/design-decoded-top-12-easy-read-fonts?GP=03%2f20%2f2022+17%3a03%3a44&amp;GPS=6195161370&amp;GNF=1\" target=\"_blank\">Le top 12 des polices les plus faciles \u00e0 lire<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/webarcana.fr\/police-facile-a-lire\/\" target=\"_blank\">Polices faciles \u00e0 lire<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/kinsta.com\/fr\/blog\/meilleures-polices-google-fonts\/\" target=\"_blank\">Les 15 meilleurs polices sur Google Fonts<\/a>&nbsp;(selon le nombre de t\u00e9l\u00e9chargements)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Lisibilite_des_polices_avec_serifs\"><\/span>Lisibilit\u00e9 des polices avec serifs<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Les polices avec empattements font partie du grand registre des polices s\u00e9rieuses. Elles sont class\u00e9es dans plusieurs sous-cat\u00e9gories parmi lesquelles les humanes, les garaldes, les r\u00e9ales, les didones, les m\u00e9canes, etc. (classification Vox ATYPI).<\/p>\n\n\n\n<p>Moins neutres globalement, certaines polices avec serifs se montrent toutefois assez discr\u00e8tes (<a rel=\"noreferrer noopener\" href=\"https:\/\/fonts.google.com\/specimen\/Merriweather?category=Serif\" target=\"_blank\">Merriweather<\/a>,&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/fonts.google.com\/specimen\/Bitter?category=Serif\" target=\"_blank\">Bitter<\/a>, \u2026) . Leur lisibilit\u00e9 \u00e0 l\u2019\u00e9cran et sur le papier r\u00e9side principalement dans la qualit\u00e9 de leur dessin. L\u2019habitude que nous avons de lire des textes habill\u00e9s par telle ou telle d\u2019entre elles joue en faveur des plus fr\u00e9quentes.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/comvi.plurimedia.greta-clermont-auvergne.fr\/wp-content\/uploads\/2022\/03\/georgia-specimen.png\" alt=\"\" class=\"wp-image-6481\"\/><\/figure>\n\n\n\n<p>La police&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.wikiwand.com\/fr\/Georgia_(police_d%27%C3%A9criture)\" target=\"_blank\">Georgia<\/a>&nbsp;semble faire l\u2019unanimit\u00e9 pour sa lisibilit\u00e9. Elle n\u2019a pas besoin d\u2019\u00eatre t\u00e9l\u00e9charg\u00e9e dans une page Web, en effet, elle est disponible par d\u00e9faut sur toutes les syst\u00e8mes d\u2019exploitation.<\/p>\n\n\n\n<p>Voici un dernier site mentionnant des polices avec empattements particuli\u00e8rement lisibles&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/poliseuse.wordpress.com\/les-polices\/palmares-des-polices-serifs\/\" target=\"_blank\">Palmar\u00e8s des polices serifs<\/a>&nbsp;(pour liseuse)<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Dans ce cours vous allez examiner avec attention les polices de caract\u00e8res utilis\u00e9es pour l\u2019impression et l\u2019affichage sur \u00e9cran. Il s\u2019agit de d\u00e9terminer quelles sont celles qui se lisent le mieux et pour quelles raisons. Lisibilit\u00e9 des polices sans serif (lin\u00e9ales) Polices sans serif en g\u00e9n\u00e9ral Dans un premier temps, penchons-nous sur les polices de [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,4],"tags":[],"class_list":["post-7149","post","type-post","status-publish","format-standard","hentry","category-cc1-cours","category-com-crea"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","post-thumbnail":"","twentytwenty-fullscreen":""},"post_excerpt_stackable_v2":"<p>Dans ce cours vous allez examiner avec attention les polices de caract\u00e8res utilis\u00e9es pour l\u2019impression et l\u2019affichage sur \u00e9cran. Il s\u2019agit de d\u00e9terminer quelles sont celles qui se lisent le mieux et pour quelles raisons. Sommaire Toggle Lisibilit\u00e9 des polices sans serif (lin\u00e9ales)Polices sans serif en g\u00e9n\u00e9ralPolice sans serif lisible disponible sur toutes les plateformesPolices sans serif disponibles sur Google FontsLe test qui tue\u2026 les sans serif&nbsp;!Lisibilit\u00e9 des polices avec serifs Lisibilit\u00e9 des polices sans serif (lin\u00e9ales) Polices sans serif en g\u00e9n\u00e9ral Dans un premier temps, penchons-nous sur les polices de caract\u00e8res sans empattement (sans serif, en anglais) nomm\u00e9es commun\u00e9ment\u2026<\/p>","category_list_v2":"<a href=\"https:\/\/graphizm.fr\/greta\/category\/com-crea\/cc1-cours\/\" rel=\"category tag\">CC1-cours<\/a>, <a href=\"https:\/\/graphizm.fr\/greta\/category\/com-crea\/\" rel=\"category tag\">Com-Cr\u00e9a<\/a>","author_info_v2":{"name":"Yves Goguely","url":"https:\/\/graphizm.fr\/greta\/author\/formationsgreta\/"},"comments_num_v2":"0 commentaire","_links":{"self":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/7149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/comments?post=7149"}],"version-history":[{"count":3,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/7149\/revisions"}],"predecessor-version":[{"id":7154,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/7149\/revisions\/7154"}],"wp:attachment":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/media?parent=7149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/categories?post=7149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/tags?post=7149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}