{"id":265,"date":"2026-01-06T20:03:09","date_gmt":"2026-01-06T19:03:09","guid":{"rendered":"https:\/\/lmspro.fr\/typographie-css-maitriser-la-mise-en-forme-du-texte\/"},"modified":"2026-01-23T14:16:10","modified_gmt":"2026-01-23T13:16:10","slug":"typographie-css-maitriser-la-mise-en-forme-du-texte","status":"publish","type":"post","link":"https:\/\/lmspro.fr\/en\/typographie-css-maitriser-la-mise-en-forme-du-texte\/","title":{"rendered":"CSS Typography: Mastering Text Formatting"},"content":{"rendered":"<h2>Typographie CSS : Ma\u00c3\u00aetriser la Mise en Forme du Texte<\/h2>\n<p>Explorez toutes les propri\u00c3\u00a9t\u00c3\u00a9s CSS pour styliser le texte : polices, tailles, couleurs, ombres, alignement et espacement. Cr\u00c3\u00a9ez des typographies professionnelles pour vos sites web.<\/p>\n<div class='article-meta'>\n<p><strong>Niveau :<\/strong> D\u00c3\u00a9butant \u00c3\u00a0 Interm\u00c3\u00a9diaire<\/p>\n<p><strong>Dur\u00c3\u00a9e :<\/strong> 50 minutes<\/p>\n<p><strong>Public cible :<\/strong> D\u00c3\u00a9veloppeurs web, Designers, Int\u00c3\u00a9grateurs<\/p>\n<\/div>\n<h2>Objectifs p\u00c3\u00a9dagogiques<\/h2>\n<ul>\n<li>Ma\u00c3\u00aetriser les propri\u00c3\u00a9t\u00c3\u00a9s de police de caract\u00c3\u00a8res<\/li>\n<li>Comprendre les unit\u00c3\u00a9s de taille de texte<\/li>\n<li>Appliquer des effets visuels au texte<\/li>\n<li>Optimiser la lisibilit\u00c3\u00a9 du contenu<\/li>\n<\/ul>\n<div class=\"wpa-accordion wpa-accordion-flush\" id=\"article-sections-695d5c6dcca3e\">\n<div class=\"wpa-accordion-item\"><button class=\"wpa-accordion-header\" data-wpa-target=\"#article-sections-695d5c6dcca3e-item-0\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\">Familles de Polices (font-family)<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"article-sections-695d5c6dcca3e-item-0\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<p class=\"wpa-text\">La propri\u00c3\u00a9t\u00c3\u00a9 <code>font-family<\/code> d\u00c3\u00a9finit la police utilis\u00c3\u00a9e pour afficher le texte.<\/p>\n<h4>Syntaxe de base<\/h4>\n<p><code class=\"language-css\">p {<br \/>\n font-family: Arial;<br \/>\n}<\/code><\/pre>\n<h4>Pile de polices (Font Stack)<\/h4>\n<p class=\"wpa-text\">Sp\u00c3\u00a9cifiez plusieurs polices en cas de fallback :<\/p>\n<p><code class=\"language-css\">p {<br \/>\n font-family: \"Trebuchet MS\", Verdana, sans-serif;<br \/>\n}<\/code><\/pre>\n<p class=\"wpa-text\">Le navigateur essaiera chaque police dans l&rsquo;ordre jusqu&rsquo;\u00c3\u00a0 en trouver une disponible.<\/p>\n<h4>Les 5 familles g\u00c3\u00a9n\u00c3\u00a9riques<\/h4>\n<table class=\"font-table\">\n<tr>\n<th>Famille<\/th>\n<th>Description<\/th>\n<th>Exemple<\/th>\n<\/tr>\n<tr>\n<td><code>serif<\/code><\/td>\n<td>Avec empattements<\/td>\n<td style=\"font-family:serif\">Texte avec serif<\/td>\n<\/tr>\n<tr>\n<td><code>sans-serif<\/code><\/td>\n<td>Sans empattements<\/td>\n<td style=\"font-family:sans-serif\">Texte sans-serif<\/td>\n<\/tr>\n<tr>\n<td><code>monospace<\/code><\/td>\n<td>Largeur fixe<\/td>\n<td style=\"font-family:monospace\">Code monospace<\/td>\n<\/tr>\n<tr>\n<td><code>cursive<\/code><\/td>\n<td>Style \u00c3\u00a9criture<\/td>\n<td style=\"font-family:cursive\">Texte cursive<\/td>\n<\/tr>\n<tr>\n<td><code>fantasy<\/code><\/td>\n<td>D\u00c3\u00a9coratif<\/td>\n<td style=\"font-family:fantasy\">Texte fantasy<\/td>\n<\/tr>\n<\/table>\n<h4>Polices web s\u00c3\u00bbres<\/h4>\n<p class=\"wpa-text\">Ces polices sont disponibles sur presque tous les syst\u00c3\u00a8mes :<\/p>\n<ul>\n<li><strong>Sans-serif :<\/strong> Arial, Helvetica, Verdana<\/li>\n<li><strong>Serif :<\/strong> Times New Roman, Georgia<\/li>\n<li><strong>Monospace :<\/strong> Courier New<\/li>\n<\/ul>\n<div class=\"tip-box\">\n <strong>\u00f0\u0178\u2019\u00a1 Bonne pratique :<\/strong> Les noms de police avec espaces doivent \u00c3\u00aatre entre guillemets : <code>\"Trebuchet MS\"<\/code>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\"><button class=\"wpa-accordion-header\" data-wpa-target=\"#article-sections-695d5c6dcca3e-item-1\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\">Taille de Police (font-size)<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"article-sections-695d5c6dcca3e-item-1\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<p class=\"wpa-text\">La propri\u00c3\u00a9t\u00c3\u00a9 <code>font-size<\/code> contr\u00c3\u00b4le la taille du texte.<\/p>\n<h4>Unit\u00c3\u00a9s principales<\/h4>\n<ul>\n<li><strong>px<\/strong> : Pixels (unit\u00c3\u00a9 absolue)<\/li>\n<li><strong>em<\/strong> : Relatif \u00c3\u00a0 la taille du parent<\/li>\n<li><strong>rem<\/strong> : Relatif \u00c3\u00a0 la taille de l&rsquo;\u00c3\u00a9l\u00c3\u00a9ment racine (html)<\/li>\n<\/ul>\n<h4>M\u00c3\u00a9thode recommand\u00c3\u00a9e : rem<\/h4>\n<p><code class=\"language-css\">\/* Base de 10px pour faciliter les calculs *\/<br \/>\nhtml {<br \/>\n font-size: 10px;<br \/>\n}<\/p>\n<p>h1 {<br \/>\n font-size: 2.6rem; \/* = 26px *\/<br \/>\n}<\/p>\n<p>p {<br \/>\n font-size: 1.4rem; \/* = 14px *\/<br \/>\n}<\/code><\/pre>\n<h4>Comparaison em vs rem<\/h4>\n<p><code class=\"language-css\">\/* Avec em - cascade complexe *\/<br \/>\narticle { font-size: 1.5em; } \/* 24px si parent = 16px *\/<br \/>\narticle p { font-size: 0.833em; } \/* 20px relatif au 24px *\/<\/p>\n<p>\/* Avec rem - toujours relatif \u00c3\u00a0 html *\/<br \/>\narticle { font-size: 1.5rem; } \/* 15px si html = 10px *\/<br \/>\narticle p { font-size: 2rem; }  \/* 20px, simple ! *\/<\/code><\/pre>\n<div class=\"important-box\">\n <strong>Recommandation :<\/strong> Utilisez <code>rem<\/code> pour les tailles de police. C&rsquo;est plus pr\u00c3\u00a9visible et facilite le responsive design.\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\"><button class=\"wpa-accordion-header\" data-wpa-target=\"#article-sections-695d5c6dcca3e-item-2\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\">Couleur du Texte (color)<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"article-sections-695d5c6dcca3e-item-2\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<p class=\"wpa-text\">La propri\u00c3\u00a9t\u00c3\u00a9 <code>color<\/code> d\u00c3\u00a9finit la couleur du texte.<\/p>\n<h4>Formats de couleur CSS<\/h4>\n<p><code class=\"language-css\">\/* Mots-cl\u00c3\u00a9s *\/<br \/>\np { color: red; }<br \/>\np { color: rebeccapurple; }<\/p>\n<p>\/* Hexad\u00c3\u00a9cimal *\/<br \/>\np { color: #ff0000; }   \/* Rouge *\/<br \/>\np { color: #f00; }     \/* Raccourci *\/<\/p>\n<p>\/* RGB *\/<br \/>\np { color: rgb(255, 0, 0); }<\/p>\n<p>\/* RGBA (avec transparence) *\/<br \/>\np { color: rgba(255, 0, 0, 0.5); }<\/p>\n<p>\/* HSL *\/<br \/>\np { color: hsl(0, 100{4a00f6d73ff9e2f537053b7c202ea3e7e3a1709f4630047a1912e510d35e71a5}, 50{4a00f6d73ff9e2f537053b7c202ea3e7e3a1709f4630047a1912e510d35e71a5}); }<\/p>\n<p>\/* HSLA *\/<br \/>\np { color: hsla(0, 100{4a00f6d73ff9e2f537053b7c202ea3e7e3a1709f4630047a1912e510d35e71a5}, 50{4a00f6d73ff9e2f537053b7c202ea3e7e3a1709f4630047a1912e510d35e71a5}, 0.5); }<\/code><\/pre>\n<h4>Exemple pratique<\/h4>\n<p><code class=\"language-css\">body {<br \/>\n color: #333; \/* Gris fonc\u00c3\u00a9 - meilleure lisibilit\u00c3\u00a9 que noir pur *\/<br \/>\n}<\/p>\n<p>a {<br \/>\n color: #0066cc; \/* Bleu pour les liens *\/<br \/>\n}<\/p>\n<p>.error {<br \/>\n color: #cc0000; \/* Rouge pour les erreurs *\/<br \/>\n}<\/p>\n<p>.success {<br \/>\n color: #008800; \/* Vert pour le succ\u00c3\u00a8s *\/<br \/>\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\"><button class=\"wpa-accordion-header\" data-wpa-target=\"#article-sections-695d5c6dcca3e-item-3\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\">Style, Graisse et D\u00c3\u00a9coration<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"article-sections-695d5c6dcca3e-item-3\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<h4>font-style : Italique<\/h4>\n<p><code class=\"language-css\">p {<br \/>\n font-style: normal;  \/* Par d\u00c3\u00a9faut *\/<br \/>\n font-style: italic;  \/* Italique *\/<br \/>\n font-style: oblique; \/* Inclin\u00c3\u00a9 artificiellement *\/<br \/>\n}<\/code><\/pre>\n<h4>font-weight : Graisse<\/h4>\n<p><code class=\"language-css\">p {<br \/>\n font-weight: normal;  \/* 400 *\/<br \/>\n font-weight: bold;   \/* 700 *\/<br \/>\n font-weight: lighter; \/* Plus l\u00c3\u00a9ger que parent *\/<br \/>\n font-weight: bolder;  \/* Plus gras que parent *\/<br \/>\n font-weight: 100;   \/* Ultra-l\u00c3\u00a9ger *\/<br \/>\n font-weight: 900;   \/* Ultra-gras *\/<br \/>\n}<\/code><\/pre>\n<h4>text-transform : Casse<\/h4>\n<p><code class=\"language-css\">p {<br \/>\n text-transform: none;    \/* Pas de transformation *\/<br \/>\n text-transform: uppercase; \/* MAJUSCULES *\/<br \/>\n text-transform: lowercase; \/* minuscules *\/<br \/>\n text-transform: capitalize; \/* Premi\u00c3\u00a8re Lettre *\/<br \/>\n}<\/code><\/pre>\n<h4>text-decoration : D\u00c3\u00a9corations<\/h4>\n<p><code class=\"language-css\">a {<br \/>\n text-decoration: none;     \/* Aucune *\/<br \/>\n text-decoration: underline;  \/* Soulign\u00c3\u00a9 *\/<br \/>\n text-decoration: overline;   \/* Ligne au-dessus *\/<br \/>\n text-decoration: line-through; \/* Barr\u00c3\u00a9 *\/<br \/>\n}<\/p>\n<p>\/* Style avanc\u00c3\u00a9 *\/<br \/>\na {<br \/>\n text-decoration: underline wavy red;<br \/>\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\"><button class=\"wpa-accordion-header\" data-wpa-target=\"#article-sections-695d5c6dcca3e-item-4\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\">Ombres de Texte (text-shadow)<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"article-sections-695d5c6dcca3e-item-4\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<p class=\"wpa-text\">La propri\u00c3\u00a9t\u00c3\u00a9 <code>text-shadow<\/code> ajoute des ombres au texte.<\/p>\n<h4>Syntaxe<\/h4>\n<p><code class=\"language-css\">text-shadow: d\u00c3\u00a9calage-x d\u00c3\u00a9calage-y flou couleur;<\/code><\/pre>\n<h4>Exemple simple<\/h4>\n<p><code class=\"language-css\">h1 {<br \/>\n text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.5);<br \/>\n}<\/code><\/pre>\n<p class=\"wpa-text\">Param\u00c3\u00a8tres :<\/p>\n<ul>\n<li><code>4px<\/code> : D\u00c3\u00a9calage horizontal (positif = droite)<\/li>\n<li><code>4px<\/code> : D\u00c3\u00a9calage vertical (positif = bas)<\/li>\n<li><code>5px<\/code> : Rayon de flou<\/li>\n<li><code>rgba(...)<\/code> : Couleur de l&rsquo;ombre<\/li>\n<\/ul>\n<h4>Ombres multiples<\/h4>\n<p><code class=\"language-css\">h1 {<br \/>\n text-shadow:<br \/>\n  -1px -1px 1px #aaa,<br \/>\n  0px 4px 1px rgba(0, 0, 0, 0.5),<br \/>\n  4px 4px 5px rgba(0, 0, 0, 0.7),<br \/>\n  0px 0px 7px rgba(0, 0, 0, 0.4);<br \/>\n}<\/code><\/pre>\n<h4>Effets cr\u00c3\u00a9atifs<\/h4>\n<p><code class=\"language-css\">\/* Effet n\u00c3\u00a9on *\/<br \/>\n.neon {<br \/>\n color: #fff;<br \/>\n text-shadow:<br \/>\n  0 0 5px #fff,<br \/>\n  0 0 10px #fff,<br \/>\n  0 0 20px #0ff,<br \/>\n  0 0 30px #0ff;<br \/>\n}<\/p>\n<p>\/* Effet relief *\/<br \/>\n.emboss {<br \/>\n color: #ccc;<br \/>\n text-shadow:<br \/>\n  -1px -1px 0 #fff,<br \/>\n  1px 1px 0 #333;<br \/>\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\"><button class=\"wpa-accordion-header\" data-wpa-target=\"#article-sections-695d5c6dcca3e-item-5\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\">Alignement et Espacement<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"article-sections-695d5c6dcca3e-item-5\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<h4>text-align : Alignement horizontal<\/h4>\n<p><code class=\"language-css\">p {<br \/>\n text-align: left;   \/* Gauche (d\u00c3\u00a9faut) *\/<br \/>\n text-align: right;  \/* Droite *\/<br \/>\n text-align: center;  \/* Centr\u00c3\u00a9 *\/<br \/>\n text-align: justify; \/* Justifi\u00c3\u00a9 *\/<br \/>\n}<\/code><\/pre>\n<h4>line-height : Hauteur de ligne<\/h4>\n<p><code class=\"language-css\">p {<br \/>\n line-height: 1.5;  \/* 1.5x la taille de police *\/<br \/>\n line-height: 24px;  \/* Valeur fixe *\/<br \/>\n line-height: 150{4a00f6d73ff9e2f537053b7c202ea3e7e3a1709f4630047a1912e510d35e71a5};  \/* Pourcentage *\/<br \/>\n}<\/code><\/pre>\n<div class=\"tip-box\">\n <strong>\u00f0\u0178\u2019\u00a1 Recommandation :<\/strong> Une hauteur de ligne entre 1.5 et 2 am\u00c3\u00a9liore significativement la lisibilit\u00c3\u00a9.\n<\/div>\n<h4>letter-spacing et word-spacing<\/h4>\n<p><code class=\"language-css\">p {<br \/>\n letter-spacing: 2px; \/* Espace entre lettres *\/<br \/>\n word-spacing: 4px;  \/* Espace entre mots *\/<br \/>\n}<\/p>\n<p>\/* Premier vers - style sp\u00c3\u00a9cial *\/<br \/>\np::first-line {<br \/>\n letter-spacing: 2px;<br \/>\n word-spacing: 4px;<br \/>\n}<\/code><\/pre>\n<h4>text-indent : Indentation<\/h4>\n<p><code class=\"language-css\">p {<br \/>\n text-indent: 2em; \/* Retrait de la premi\u00c3\u00a8re ligne *\/<br \/>\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\"><button class=\"wpa-accordion-header\" data-wpa-target=\"#article-sections-695d5c6dcca3e-item-6\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\">Propri\u00c3\u00a9t\u00c3\u00a9 Raccourcie font<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"article-sections-695d5c6dcca3e-item-6\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<p class=\"wpa-text\">La propri\u00c3\u00a9t\u00c3\u00a9 <code>font<\/code> permet de combiner plusieurs propri\u00c3\u00a9t\u00c3\u00a9s en une seule ligne.<\/p>\n<h4>Syntaxe<\/h4>\n<p><code class=\"language-css\">font: [style] [variant] [weight] [stretch] size[\/line-height] family;<\/code><\/pre>\n<h4>Exemples<\/h4>\n<p><code class=\"language-css\">\/* Complet *\/<br \/>\nbody {<br \/>\n font: italic normal bold normal 16px\/1.5 Helvetica, Arial, sans-serif;<br \/>\n}<\/p>\n<p>\/* Minimum requis (size + family) *\/<br \/>\np {<br \/>\n font: 16px Arial;<br \/>\n}<\/p>\n<p>\/* Avec line-height *\/<br \/>\nh1 {<br \/>\n font: bold 2em\/1.2 Georgia, serif;<br \/>\n}<\/code><\/pre>\n<div class=\"warning-box\">\n <strong>\u00e2\u0161\u00a0\u00ef\u00b8\u008f Attention :<\/strong> <code>font-size<\/code> et <code>font-family<\/code> sont obligatoires. Les propri\u00c3\u00a9t\u00c3\u00a9s omises seront r\u00c3\u00a9initialis\u00c3\u00a9es \u00c3\u00a0 leur valeur par d\u00c3\u00a9faut.\n<\/div>\n<h4>\u00c3\u2030quivalent en propri\u00c3\u00a9t\u00c3\u00a9s s\u00c3\u00a9par\u00c3\u00a9es<\/h4>\n<p><code class=\"language-css\">\/* Version raccourcie *\/<br \/>\nfont: italic bold 16px\/1.5 Arial, sans-serif;<\/p>\n<p>\/* \u00c3\u2030quivalent d\u00c3\u00a9velopp\u00c3\u00a9 *\/<br \/>\nfont-style: italic;<br \/>\nfont-variant: normal;<br \/>\nfont-weight: bold;<br \/>\nfont-stretch: normal;<br \/>\nfont-size: 16px;<br \/>\nline-height: 1.5;<br \/>\nfont-family: Arial, sans-serif;<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\"><button class=\"wpa-accordion-header\" data-wpa-target=\"#article-sections-695d5c6dcca3e-item-7\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\">Exercice : Styliser un Article de Blog<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"article-sections-695d5c6dcca3e-item-7\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<h4>HTML<\/h4>\n<p><code class=\"language-html\">&lt;article&gt;<br \/>\n &lt;h1&gt;Le Guide Ultime de la Typographie Web&lt;\/h1&gt;<br \/>\n &lt;p class=\"meta\"&gt;Par Jean Dupont | 15 janvier 2024&lt;\/p&gt;<br \/>\n &lt;p class=\"intro\"&gt;<br \/>\n  La typographie est l'art de rendre le texte non seulement lisible,<br \/>\n  mais aussi attrayant et expressif.<br \/>\n &lt;\/p&gt;<br \/>\n &lt;h2&gt;Pourquoi la typographie compte&lt;\/h2&gt;<br \/>\n &lt;p&gt;<br \/>\n  Une bonne typographie am\u00c3\u00a9liore la &lt;strong&gt;lisibilit\u00c3\u00a9&lt;\/strong&gt;,<br \/>\n  renforce l'&lt;em&gt;identit\u00c3\u00a9 visuelle&lt;\/em&gt; et guide le lecteur.<br \/>\n &lt;\/p&gt;<br \/>\n&lt;\/article&gt;<\/code><\/pre>\n<h4>CSS Complet<\/h4>\n<p><code class=\"language-css\">\/* Base *\/<br \/>\nhtml {<br \/>\n font-size: 10px;<br \/>\n}<\/p>\n<p>body {<br \/>\n font-family: 'Georgia', serif;<br \/>\n color: #333;<br \/>\n line-height: 1.6;<br \/>\n max-width: 800px;<br \/>\n margin: 0 auto;<br \/>\n padding: 2rem;<br \/>\n}<\/p>\n<p>\/* Titres *\/<br \/>\nh1 {<br \/>\n font-size: 3.2rem;<br \/>\n font-weight: bold;<br \/>\n line-height: 1.2;<br \/>\n color: #1a1a1a;<br \/>\n text-shadow: 1px 1px 2px rgba(0,0,0,0.1);<br \/>\n margin-bottom: 0.5rem;<br \/>\n}<\/p>\n<p>h2 {<br \/>\n font-size: 2.4rem;<br \/>\n font-weight: normal;<br \/>\n color: #444;<br \/>\n border-bottom: 2px solid #eee;<br \/>\n padding-bottom: 0.5rem;<br \/>\n}<\/p>\n<p>\/* M\u00c3\u00a9tadonn\u00c3\u00a9es *\/<br \/>\n.meta {<br \/>\n font-size: 1.2rem;<br \/>\n color: #888;<br \/>\n font-style: italic;<br \/>\n text-transform: uppercase;<br \/>\n letter-spacing: 1px;<br \/>\n}<\/p>\n<p>\/* Introduction *\/<br \/>\n.intro {<br \/>\n font-size: 1.8rem;<br \/>\n font-weight: 300;<br \/>\n color: #555;<br \/>\n border-left: 4px solid #0066cc;<br \/>\n padding-left: 1.5rem;<br \/>\n margin: 2rem 0;<br \/>\n}<\/p>\n<p>\/* Paragraphes *\/<br \/>\np {<br \/>\n font-size: 1.6rem;<br \/>\n margin-bottom: 1.5rem;<br \/>\n}<\/p>\n<p>strong {<br \/>\n font-weight: bold;<br \/>\n color: #000;<br \/>\n}<\/p>\n<p>em {<br \/>\n font-style: italic;<br \/>\n color: #0066cc;<br \/>\n}<\/code><\/pre>\n<div class=\"success-box\">\n <strong>\u00e2\u0153\u2026 R\u00c3\u00a9sultat :<\/strong> Un article \u00c3\u00a9l\u00c3\u00a9gant avec une hi\u00c3\u00a9rarchie visuelle claire, une excellente lisibilit\u00c3\u00a9 et une identit\u00c3\u00a9 typographique professionnelle.\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"quiz-block-1\" class=\"quiz-container\" data-quiz-json=\"https:\/\/lmspro.fr\/wp-content\/plugins\/generate-article-endpoint\/quiz-data\/en\/quiz-typographie-css-mise-en-forme-texte.json\" aria-label=\"Interactive Quiz\"><div class=\"quiz-loading\" role=\"status\" aria-live=\"polite\"><span class=\"quiz-sr-only\">Loading quiz...<\/span><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Typographie CSS : Ma\u00c3\u00aetriser la Mise en Forme du Texte Explorez toutes les propri\u00c3\u00a9t\u00c3\u00a9s CSS pour styliser le texte : polices, tailles, couleurs, ombres, alignement et espacement. Cr\u00c3\u00a9ez des typographies professionnelles pour vos sites web. Niveau : D\u00c3\u00a9butant \u00c3\u00a0 Interm\u00c3\u00a9diaire Dur\u00c3\u00a9e : 50 minutes Public cible : D\u00c3\u00a9veloppeurs web, Designers, Int\u00c3\u00a9grateurs Objectifs p\u00c3\u00a9dagogiques Ma\u00c3\u00aetriser les &#8230; <a href=\"https:\/\/lmspro.fr\/en\/typographie-css-maitriser-la-mise-en-forme-du-texte\/\" class=\"more-link\">Read More<span class=\"screen-reader-text\"> \u00ab\u00a0Typographie CSS : Ma\u00eetriser la Mise en Forme du Texte\u00a0\u00bb<\/span> &raquo;<\/a><\/p>","protected":false},"author":1,"featured_media":266,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30,90],"tags":[26,69,67,70,68,66],"class_list":["post-265","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-module-1-fondamentaux-techniques-du-web","category-texte-semantique","tag-css","tag-font-family","tag-polices","tag-text-shadow","tag-texte","tag-typographie"],"_links":{"self":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/265","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/comments?post=265"}],"version-history":[{"count":1,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/265\/revisions"}],"predecessor-version":[{"id":469,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/265\/revisions\/469"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/media\/266"}],"wp:attachment":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/media?parent=265"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/categories?post=265"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/tags?post=265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}