{"id":25636,"date":"2022-01-01T01:00:00","date_gmt":"2022-01-01T00:00:00","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=25636"},"modified":"2024-01-23T10:19:43","modified_gmt":"2024-01-23T09:19:43","slug":"principes-typographiques-ui-design","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/","title":{"rendered":"UI Design&nbsp;: 8 principes typographiques \u00e0 conna\u00eetre en 2024"},"content":{"rendered":"<p>La typographie ne se r\u00e9sume pas \u00e0 choisir simplement la police parfaite de votre projet\u00a0!\u00a0Une typo bien utilis\u00e9e permet aussi d\u2019am\u00e9liorer la lisibilit\u00e9, l&#8217;<a href=\"https:\/\/graphiste.com\/blog\/accessibilite-site-internet-handicap\">accessibilit\u00e9<\/a>, la convivialit\u00e9 et la hi\u00e9rarchie de votre interface.<\/p>\n<p>Voici 8 principes typographiques \u00e0 conna\u00eetre en 2024 pour un UI Design optimal.<\/p>\n<h2>1. La hi\u00e9rarchie des \u00e9l\u00e9ments<\/h2>\n<figure id=\"attachment_25638\" aria-describedby=\"caption-attachment-25638\" style=\"width: 700px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-25638\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/03\/large-13.jpg\" alt=\"UI\" width=\"700\" height=\"490\" \/><figcaption id=\"caption-attachment-25638\" class=\"wp-caption-text\">Cr\u00e9dits&nbsp;: hmry<\/figcaption><\/figure>\n<p>La grande majorit\u00e9 des interfaces utilisateur sont pourvues de textes. Les mots font ainsi partie des \u00e9l\u00e9ments standards de l\u2019UI, au m\u00eame titre que les bo\u00eetes, <a href=\"https:\/\/graphiste.com\/blog\/bouton-web-design\">boutons<\/a> et <a href=\"https:\/\/graphiste.com\/blog\/comment-choisir-entre-icones-solides-ou-filaires\">ic\u00f4nes<\/a>. L\u2019organisation de ces \u00e9l\u00e9ments peut \u00e0 elle seule servir ou desservir une interface.<\/p>\n<p>En les hi\u00e9rarchisant, vous augmentez de fait la lisibilit\u00e9 de votre interface et aidez consid\u00e9rablement vos utilisateurs \u00e0 trouver les informations les plus essentielles. Ainsi, n\u2019h\u00e9sitez pas \u00e0 user d\u2019une typographie plus audacieuse afin de mettre en exergue les textes les plus importants.<\/p>\n<h2>2. La hauteur et la longueur des lignes<\/h2>\n<p>L<a href=\"https:\/\/graphiste.com\/blog\/maitriser-espaces-typographie\">&#8216;espacement des lignes<\/a>, comprenez leur hauteur et leur largeur, est essentiel afin de garantir la lisibilit\u00e9 de vos blocs de texte, et ce quel que soit le support de lecture utilis\u00e9.<\/p>\n<p>Ainsi, un espacement trop important risque de perdre vos utilisateurs, l\u00e0 o\u00f9 un cr\u00e9nage trop r\u00e9duit risque d\u2019\u00eatre trop difficile \u00e0 lire. Pour parvenir \u00e0 un juste \u00e9quilibre, vous devez donc tester diff\u00e9rentes \u00e9chelles sur votre police.<\/p>\n<ul>\n<li>V\u00e9rifiez vos interlignes lors du changement de taille ou de police.<\/li>\n<li>Limitez la longueur de vos lignes entre 70 et 80 caract\u00e8res.<\/li>\n<li>Augmentez l&#8217;espacement des polices les plus petites (plus difficiles \u00e0 lire).<\/li>\n<\/ul>\n<h2>3. La lisibilit\u00e9 pour plus d\u2019accessibilit\u00e9<\/h2>\n<figure id=\"attachment_25641\" aria-describedby=\"caption-attachment-25641\" style=\"width: 700px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-25641\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/03\/large-15.jpg\" alt=\"UI\" width=\"700\" height=\"275\" \/><figcaption id=\"caption-attachment-25641\" class=\"wp-caption-text\">Cr\u00e9dits&nbsp;: <a href=\"https:\/\/graphiste.com\/creativeRadhike\">creativeRadhike<\/a><\/figcaption><\/figure>\n<p>Vous l\u2019aurez compris, en UI Design la lisibilit\u00e9 doit \u00eatre au c\u0153ur de vos pr\u00e9occupations\u00a0! La typographie doit ainsi \u00eatre lisible et accessible \u00e0 tous, quelque soit le handicap (daltonisme, trouble de la vue, de l&#8217;audition, etc.) auquel fait face votre utilisateur.<\/p>\n<p>Pour ce faire, r\u00e9f\u00e9rez-vous imp\u00e9rativement aux directives d&#8217;accessibilit\u00e9 du contenu Web (WCAG).<\/p>\n<p>Quelques exemples\u00a0:<\/p>\n<ul>\n<li>La taille minimale de vos blocs de texte doit \u00eatre de 16.<\/li>\n<li>Le rapport de contraste des couleurs doit au minimum \u00eatre de 4,5\u00a0:1 entre le texte et l\u2019arri\u00e8re-plan.<\/li>\n<li>Agr\u00e9mentez vos textes d\u2019alerte avec des ic\u00f4nes d&#8217;avertissement.<\/li>\n<li>Le texte doit pouvoir \u00eatre redimensionn\u00e9 jusqu\u2019\u00e0 200% sans pour autant en affecter les fonctionnalit\u00e9s de l\u2019interface.<\/li>\n<\/ul>\n<h2>4. Le nombre de polices<\/h2>\n<blockquote><p>Attention&nbsp;: Attention \u00e0 ne pas utiliser un trop grand nombre de polices de caract\u00e8res diff\u00e9rentes dans vos interfaces. En effet, leur accumulation risque de d\u00e9t\u00e9riorer l\u2019image de votre application qui para\u00eetra b\u00e2cl\u00e9e.<\/p><\/blockquote>\n<p>Pour plus de flexibilit\u00e9 et de coh\u00e9rence, pr\u00e9f\u00e9rez donc utiliser une m\u00eame <a href=\"https:\/\/graphiste.com\/blog\/combiner-polices-caractere\">famille de police<\/a> sur toute votre interface.<\/p>\n<h2>5. Les mots et phrases reconnaissables par tous<\/h2>\n<p>Outre l\u2019esth\u00e9tique et la lisibilit\u00e9 de votre interface, la typographie permet aussi d\u2019am\u00e9liorer la compr\u00e9hension des mots utilis\u00e9s. L\u2019important est ici de transmettre des messages clairs \u00e0 vos utilisateurs. Quelques r\u00e8gles simples vous aideront ici\u00a0:<\/p>\n<ul>\n<li>\u00e9vitez le jargon, \u00e0 moins de vous adresser \u00e0 un public d\u2019experts\u00a0;<\/li>\n<li>r\u00e9digez au pr\u00e9sent\u00a0;<\/li>\n<li>restez bref et concis\u00a0;<\/li>\n<li>d\u00e9marrez vos phrases par l\u2019objectif \u00e0 atteindre et l&#8217;action qu\u2019elle demande\u00a0;<\/li>\n<li>restez coh\u00e9rent.<\/li>\n<\/ul>\n<h2>6. La mise en valeur des informations importantes<\/h2>\n<figure id=\"attachment_25639\" aria-describedby=\"caption-attachment-25639\" style=\"width: 700px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-25639\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/03\/large-12.jpg\" alt=\"UI\" width=\"700\" height=\"438\" \/><figcaption id=\"caption-attachment-25639\" class=\"wp-caption-text\">Cr\u00e9dits&nbsp;: <a href=\"https:\/\/graphiste.com\/Mathis_R\">Mathis_R<\/a><\/figcaption><\/figure>\n<p>\u00c9paisseur des caract\u00e8res, <a href=\"https:\/\/graphiste.com\/blog\/couleurs-tendances-2021\">couleur<\/a>, <a href=\"https:\/\/graphiste.com\/blog\/css-taille-texte-em\">taille de la police<\/a>\u2026 sont autant d\u2019outils \u00e0 utiliser afin de mettre en avant les textes importants.<\/p>\n<p>De fait, en utilisant une typographie plus l\u00e9g\u00e8re pour vos blocs de textes les moins importants, vous attirerez davantage l&#8217;attention sur vos textes plus dynamiques.<\/p>\n<p>Ces astuces simples permettront \u00e0 vos utilisateurs d\u2019interagir plus \u00a0rapidement avec votre interface.<\/p>\n<h2>7. La prise en charge linguistique<\/h2>\n<p>Votre interface est <a href=\"https:\/\/traduc.com\/blog\/site-contenus-multilingues\/\" target=\"_blank\" rel=\"noopener noreferrer\">multilingue<\/a>\u00a0? Il s\u2019agit l\u00e0 d\u2019une contrainte suppl\u00e9mentaire qui peut jouer consid\u00e9rablement sur le rendu de vos mises en page.<\/p>\n<p>Gardez donc bien en t\u00eate que la longueur des mots peut varier d\u2019une langue \u00e0 une autre, et cela m\u00eame si les deux langues concern\u00e9es utilisent des glyphes similaires.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-25642\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/03\/screenshot1284.jpg\" alt=\"Site web Vogue Arabia\" width=\"700\" height=\"351\" \/><\/p>\n<blockquote><p>En outre, vous devrez consid\u00e9rer l\u2019alignement de vos textes dans le cas de certaines langues utilisant des glyphes diff\u00e9rents, comme l&#8217;arabe et l&#8217;h\u00e9breu. Dans ce cas, sachez que le texte se lit de la droite vers la gauche, et non plus de la gauche vers la droite. De plus, bien que vous utilisiez la m\u00eame taille de police, les glyphes peuvent ici appara\u00eetre plus petits, n\u00e9cessitant un ajustement de l&#8217;interligne et de l&#8217;alignement.<\/p><\/blockquote>\n<h2>8. Les polices syst\u00e8me<\/h2>\n<figure id=\"attachment_25640\" aria-describedby=\"caption-attachment-25640\" style=\"width: 700px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-25640\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/03\/large-14.jpg\" alt=\"police syst\u00e8me\" width=\"700\" height=\"506\" \/><figcaption id=\"caption-attachment-25640\" class=\"wp-caption-text\">Cr\u00e9dits&nbsp;: <a href=\"https:\/\/graphiste.com\/AnaisBonnetgraphiste\">AnaisBonnetgraphiste<\/a><\/figcaption><\/figure>\n<p>Au regard des pr\u00e9c\u00e9dents point abord\u00e9s, on comprend que la typographie peut s\u2019av\u00e9rer complexe \u00e0 param\u00e9trer. Heureusement, iOS et Android proposent aujourd\u2019hui des polices syst\u00e8me natives. Celles-ci prennent alors en charge une gamme de tailles, poids, styles et langues accessibles et lisibles en toutes circonstances.<\/p>\n<p>Gr\u00e2ce \u00e0 elles, votre interface offre une lecture confortable et esth\u00e9tique dans n&#8217;importe quelle application.<\/p>\n<p>De plus, les polices syst\u00e8me b\u00e9n\u00e9ficient d\u2019une prise en charge dynamique, pour une plus grande accessibilit\u00e9 et flexibilit\u00e9. Si vous ne ma\u00eetrisez pas l\u2019art de la typographie sur le bout des doigts, remettez-vous en \u00e0 ces polices syst\u00e8me.<\/p>\n<h2>Conclusion<\/h2>\n<p>Alignement, hi\u00e9rarchie, nombre de polices\u2026 l\u2019UI Design doit consid\u00e9rer la typographie au m\u00eame titre que tous les autres \u00e9l\u00e9ments de l\u2019interface afin d\u2019offrir une exp\u00e9rience utilisateur optimal.<\/p>\n<p>Vous \u00eates \u00e0 la recherche d\u2019un professionnel pour concevoir vos interfaces\u00a0? N\u2019h\u00e9sitez pas \u00e0 jeter un \u0153il aux<a href=\"https:\/\/graphiste.com\/?source=blog-text\"> profils sp\u00e9cialis\u00e9s Graphiste.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La typographie ne se r\u00e9sume pas \u00e0 choisir simplement la police parfaite de votre projet\u00a0!\u00a0Une typo bien utilis\u00e9e permet aussi d\u2019am\u00e9liorer la lisibilit\u00e9, l&#8217;accessibilit\u00e9, la convivialit\u00e9 et la hi\u00e9rarchie de votre interface. Voici 8 principes typographiques \u00e0 conna\u00eetre en 2024 pour un UI Design optimal. 1. La hi\u00e9rarchie des \u00e9l\u00e9ments La grande majorit\u00e9 des interfaces [&hellip;]<\/p>\n","protected":false},"author":54,"featured_media":25643,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[27],"tags":[42],"class_list":["post-25636","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-creer-marque"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>UI Design : 8 principes typographiques \u00e0 conna\u00eetre en 2024 - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"La typographie ne se r\u00e9sume pas \u00e0 choisir simplement la police parfaite de votre projet\u00a0!\u00a0Une typo bien utilis\u00e9e permet aussi d\u2019am\u00e9liorer la lisibilit\u00e9,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UI Design : 8 principes typographiques \u00e0 conna\u00eetre en 2024 - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"La typographie ne se r\u00e9sume pas \u00e0 choisir simplement la police parfaite de votre projet\u00a0!\u00a0Une typo bien utilis\u00e9e permet aussi d\u2019am\u00e9liorer la lisibilit\u00e9,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Graphiste.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/graphistesfreelances\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-01T00:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-23T09:19:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/03\/typographie-ui-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t<meta property=\"og:image:height\" content=\"423\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Solenne Ricard\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:site\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Solenne Ricard\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/\"},\"author\":{\"name\":\"Solenne Ricard\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/d32851799b2f02a17a0e64f98fe5def4\"},\"headline\":\"UI Design&nbsp;: 8 principes typographiques \u00e0 conna\u00eetre en 2024\",\"datePublished\":\"2022-01-01T00:00:00+00:00\",\"dateModified\":\"2024-01-23T09:19:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/\"},\"wordCount\":983,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/03\/typographie-ui-1.jpg\",\"keywords\":[\"Cr\u00e9er votre marque\"],\"articleSection\":[\"Webdesign\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/\",\"url\":\"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/\",\"name\":\"UI Design : 8 principes typographiques \u00e0 conna\u00eetre en 2024 - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/03\/typographie-ui-1.jpg\",\"datePublished\":\"2022-01-01T00:00:00+00:00\",\"dateModified\":\"2024-01-23T09:19:43+00:00\",\"description\":\"La typographie ne se r\u00e9sume pas \u00e0 choisir simplement la police parfaite de votre projet\u00a0!\u00a0Une typo bien utilis\u00e9e permet aussi d\u2019am\u00e9liorer la lisibilit\u00e9,\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/03\/typographie-ui-1.jpg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/03\/typographie-ui-1.jpg\",\"width\":850,\"height\":423,\"caption\":\"Illustration : Pepinpixel\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/graphiste.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Webdesign\",\"item\":\"https:\/\/graphiste.com\/blog\/webdesign\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"UI Design : 8 principes typographiques \u00e0 conna\u00eetre en 2024\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/graphiste.com\/blog\/#website\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"name\":\"Graphiste.com\",\"description\":\"graphiste\",\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/graphiste.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\",\"name\":\"Graphiste.com\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"width\":1,\"height\":1,\"caption\":\"Graphiste.com\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/graphistesfreelances\",\"https:\/\/x.com\/Graphistecom\",\"https:\/\/www.linkedin.com\/company\/graphiste-com\/\",\"https:\/\/fr.pinterest.com\/Graphiste_Com\",\"https:\/\/www.instagram.com\/graphiste_com\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/d32851799b2f02a17a0e64f98fe5def4\",\"name\":\"Solenne Ricard\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/89317884380ee1cf794e2e807f66c0d7d6ccf7fe2779b34a087382d27c0f12ee?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/89317884380ee1cf794e2e807f66c0d7d6ccf7fe2779b34a087382d27c0f12ee?s=96&d=mm&r=g\",\"caption\":\"Solenne Ricard\"},\"description\":\"Dipl\u00f4m\u00e9e d'une licence d'Histoire de l'Art, Solenne propose un point de vue expert sur le graphisme et les outils cr\u00e9atifs.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/solennericard\/\"],\"url\":\"https:\/\/graphiste.com\/blog\/author\/solenne-ricard\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UI Design : 8 principes typographiques \u00e0 conna\u00eetre en 2024 - Graphiste Blog","description":"La typographie ne se r\u00e9sume pas \u00e0 choisir simplement la police parfaite de votre projet\u00a0!\u00a0Une typo bien utilis\u00e9e permet aussi d\u2019am\u00e9liorer la lisibilit\u00e9,","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/","og_locale":"fr_FR","og_type":"article","og_title":"UI Design : 8 principes typographiques \u00e0 conna\u00eetre en 2024 - Graphiste Blog","og_description":"La typographie ne se r\u00e9sume pas \u00e0 choisir simplement la police parfaite de votre projet\u00a0!\u00a0Une typo bien utilis\u00e9e permet aussi d\u2019am\u00e9liorer la lisibilit\u00e9,","og_url":"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2022-01-01T00:00:00+00:00","article_modified_time":"2024-01-23T09:19:43+00:00","og_image":[{"width":850,"height":423,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/03\/typographie-ui-1.jpg","type":"image\/jpeg"}],"author":"Solenne Ricard","twitter_card":"summary_large_image","twitter_creator":"@Graphistecom","twitter_site":"@Graphistecom","twitter_misc":{"\u00c9crit par":"Solenne Ricard","Dur\u00e9e de lecture estim\u00e9e":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/"},"author":{"name":"Solenne Ricard","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/d32851799b2f02a17a0e64f98fe5def4"},"headline":"UI Design&nbsp;: 8 principes typographiques \u00e0 conna\u00eetre en 2024","datePublished":"2022-01-01T00:00:00+00:00","dateModified":"2024-01-23T09:19:43+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/"},"wordCount":983,"commentCount":0,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/03\/typographie-ui-1.jpg","keywords":["Cr\u00e9er votre marque"],"articleSection":["Webdesign"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/","url":"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/","name":"UI Design : 8 principes typographiques \u00e0 conna\u00eetre en 2024 - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/03\/typographie-ui-1.jpg","datePublished":"2022-01-01T00:00:00+00:00","dateModified":"2024-01-23T09:19:43+00:00","description":"La typographie ne se r\u00e9sume pas \u00e0 choisir simplement la police parfaite de votre projet\u00a0!\u00a0Une typo bien utilis\u00e9e permet aussi d\u2019am\u00e9liorer la lisibilit\u00e9,","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/03\/typographie-ui-1.jpg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/03\/typographie-ui-1.jpg","width":850,"height":423,"caption":"Illustration : Pepinpixel"},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/principes-typographiques-ui-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/graphiste.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Webdesign","item":"https:\/\/graphiste.com\/blog\/webdesign\/"},{"@type":"ListItem","position":3,"name":"UI Design : 8 principes typographiques \u00e0 conna\u00eetre en 2024"}]},{"@type":"WebSite","@id":"https:\/\/graphiste.com\/blog\/#website","url":"https:\/\/graphiste.com\/blog\/","name":"Graphiste.com","description":"graphiste","publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/graphiste.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/graphiste.com\/blog\/#organization","name":"Graphiste.com","url":"https:\/\/graphiste.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","width":1,"height":1,"caption":"Graphiste.com"},"image":{"@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/graphistesfreelances","https:\/\/x.com\/Graphistecom","https:\/\/www.linkedin.com\/company\/graphiste-com\/","https:\/\/fr.pinterest.com\/Graphiste_Com","https:\/\/www.instagram.com\/graphiste_com\/"]},{"@type":"Person","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/d32851799b2f02a17a0e64f98fe5def4","name":"Solenne Ricard","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/89317884380ee1cf794e2e807f66c0d7d6ccf7fe2779b34a087382d27c0f12ee?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/89317884380ee1cf794e2e807f66c0d7d6ccf7fe2779b34a087382d27c0f12ee?s=96&d=mm&r=g","caption":"Solenne Ricard"},"description":"Dipl\u00f4m\u00e9e d'une licence d'Histoire de l'Art, Solenne propose un point de vue expert sur le graphisme et les outils cr\u00e9atifs.","sameAs":["https:\/\/www.linkedin.com\/in\/solennericard\/"],"url":"https:\/\/graphiste.com\/blog\/author\/solenne-ricard\/"}]}},"_links":{"self":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/25636","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/users\/54"}],"replies":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/comments?post=25636"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/25636\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/25643"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=25636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=25636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=25636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}