theme.json<\/code> aide les d\u00e9veloppeurs \u00e0 cr\u00e9er des th\u00e8mes WordPress qui en tirent parti.<\/p>\nCet article explore la typographie WordPress \u00e0 la fois pour FSE et theme.json<\/code>. Cependant, la discussion inclut \u00e9galement des contextes cl\u00e9s tels que la technologie que vous utilisez, les consid\u00e9rations techniques \u00e0 prendre en compte, et l’\u00e9volution de la fa\u00e7on dont nous utilisons les polices de caract\u00e8res dans le design.<\/p>\n<\/div><\/kinsta-auto-toc>\nLa typographie sur le web : un bref historique<\/h2>\n
Si vous vous penchez sur les premi\u00e8res conceptions de sites web<\/a>, vous constaterez que, malgr\u00e9 la diversit\u00e9 des mises en page, les polices de caract\u00e8res ont toujours \u00e9t\u00e9 pr\u00e9sent\u00e9es de la m\u00eame mani\u00e8re. Cela s’explique en partie par la disponibilit\u00e9 et en partie par la n\u00e9cessit\u00e9. En bref, sans la technologie dont nous disposons aujourd’hui, les mots sur le web ne peuvent utiliser que les polices disponibles sur votre ordinateur.<\/p>\nUn \u00ab internaute \u00bb du milieu ou de la fin des ann\u00e9es 90 ne disposait que d’une poign\u00e9e de polices de caract\u00e8res pr\u00e9visibles : Times New Roman, Arial, Helvetica, Georgia et Verdana. Les deux derni\u00e8res sont des commandes de Microsoft qui fonctionnent bien sur le web, quelle que soit l’\u00e9poque.<\/p>\n![\"Comparaison](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/verdana-georgia.png\")
Sp\u00e9cimens des polices Verdana et Georgia.<\/figcaption><\/figure>\nCette s\u00e9lection primitive est coh\u00e9rente et fiable, mais manque de flexibilit\u00e9. Des services tels que Google Fonts et Adobe Fonts<\/a> utilisent le format de fichier WOFF pour vous donner acc\u00e8s \u00e0 une biblioth\u00e8que de milliers de polices, avec un processus d’int\u00e9gration simple.<\/p>\n![\"Le](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/google-fonts.png\")
L’interface principale de Google Fonts.<\/figcaption><\/figure>\nCela vous permet d’am\u00e9liorer la lisibilit\u00e9, de cr\u00e9er des designs originaux et d’adapter l’exp\u00e9rience utilisateur (UX) de votre site. Parmi les inconv\u00e9nients, citons les probl\u00e8mes de performance potentiels (tels que la modification de la pr\u00e9sentation du contenu<\/a>), la d\u00e9pendance \u00e0 l’\u00e9gard de services tiers pour l’affichage de l’\u00e9l\u00e9ment le plus important de votre site, ainsi que les probl\u00e8mes de confidentialit\u00e9.<\/p>\nC’est pourquoi de nombreux concepteurs de sites web renoncent aux biblioth\u00e8ques de polices et reconsid\u00e8rent l’utilisation des polices syst\u00e8me<\/a>. Le traitement plus rapide et le contr\u00f4le que vous avez sur l’application d’une \u00ab pile de polices syst\u00e8me \u00bb qui donne la priorit\u00e9 aux polices de caract\u00e8res natives et utilise \u00e9galement des options de repli est une approche solide.<\/p>\nWordPress et la typographie<\/h3>\n
WordPress met fortement l’accent sur la typographie pour vous aider \u00e0 cr\u00e9er un contenu attrayant et lisible. Tout au long de son histoire, les th\u00e8mes par d\u00e9faut<\/a> de WordPress ont tous utilis\u00e9 des paires de polices qui ont trouv\u00e9 un \u00e9quilibre entre l’esth\u00e9tique et la fonctionnalit\u00e9.<\/p>\nLes th\u00e8mes par d\u00e9faut actuels utilisent des piles de polices pour une pr\u00e9sentation propre, moderne et performante. Les th\u00e8mes par d\u00e9faut plus anciens utilisent des combinaisons telles que Noto Sans et Noto Serif (pour Twenty Fifteen<\/a>) et Montserrat et Merriweather (pour Twenty Sixteen<\/a>).<\/p>\nPour mettre en valeur ce \u00ab cercle de vie \u00bb typographique, Twenty Sixteen utilise Helvetica et Georgia comme options de repli. Le th\u00e8me par d\u00e9faut de Twenty Ten<\/a> n’utilise que Helvetica, Arial et Georgia :<\/p>\n![\"L'aper\u00e7u](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/twenty-ten.png\")
La page de d\u00e9monstration de Twenty Ten sur WordPress.org.<\/figcaption><\/figure>\nSi ces choix donnent le ton du design WordPress dans chaque th\u00e8me, ils peuvent aussi vous inciter \u00e0 pr\u00eater une attention particuli\u00e8re \u00e0 la fa\u00e7on dont vous utilisez la typographie – ce que le FSE de WordPress vous aide \u00e0 faire.<\/p>\n
Une introduction rapide \u00e0 l’\u00e9dition compl\u00e8te du site et au theme.json<\/h2>\n
FSE<\/a> et theme.json<\/code> sont au c\u0153ur de la gestion de la typographie dans WordPress, il est donc essentiel de les comprendre. FSE s’appuie sur l’\u00e9diteur de blocs et ajoute plus de fonctionnalit\u00e9s pour devenir l’\u00e9diteur de site.<\/p>\n![\"L'interface](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/site-editor.png\")
L’interface de l’\u00e9diteur de site WordPress ressemble beaucoup \u00e0 celle de l’\u00e9diteur de blocs, mais avec plus de possibilit\u00e9s de personnalisation.<\/figcaption><\/figure>\nCela permet d’unifier les options de conception de votre site de plusieurs fa\u00e7ons :<\/p>\n
\n- Vous utilisez l’approche d’\u00e9dition des blocs pour l’ensemble du site, et pas seulement pour votre contenu.<\/li>\n
- Une biblioth\u00e8que de mod\u00e8les fait partie de l’installation, de sorte que vous pouvez les modifier \u00e0 l’aide des m\u00eames outils que votre contenu.<\/li>\n
- La stylisation se fait \u00e9galement dans l’\u00e9diteur de site et offre un sch\u00e9ma de param\u00e9trage global.<\/li>\n
- L’\u00e9dition du site ne n\u00e9cessite aucun code pour mettre en \u0153uvre les options disponibles. Cela permet de combler le foss\u00e9 entre le d\u00e9veloppement et la conception de l’utilisateur final.<\/li>\n<\/ul>\n
Vous pouvez consid\u00e9rer le fichier theme.json<\/code> comme une version de d\u00e9veloppement de FSE. Vous devez avoir des connaissances en JavaScript Object Notation (JSON) pour travailler avec le fichier, mais cela est \u00e0 la port\u00e9e de la plupart des propri\u00e9taires de sites. Il s’agit d’un fichier de configuration central pour la gestion de vos styles et r\u00e9glages globaux.<\/p>\n![\"Une](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/theme-json.png\")
Un fichier theme.json pr\u00e9sent\u00e9 dans un \u00e9diteur de code.<\/figcaption><\/figure>\nChaque r\u00e9glage utilise une paire cl\u00e9\/valeur de option:value<\/code>, et vous pouvez l’impl\u00e9menter de plusieurs mani\u00e8res :<\/p>\n\n- D\u00e9finir des palettes de couleurs globales.<\/li>\n
- Configurer les familles et les tailles de polices.<\/li>\n
- Configurer des styles sp\u00e9cifiques aux blocs.<\/li>\n
- Gestion des pr\u00e9f\u00e9rences en mati\u00e8re d’espacement et de mise en page.<\/li>\n<\/ul>\n
L’utilisation de theme.json<\/code> vous permet de cr\u00e9er des th\u00e8mes plus coh\u00e9rents et personnalisables sans avoir recours \u00e0 des feuilles de style CSS personnalis\u00e9es<\/a> (bien que cela soit \u00e9galement possible). L’adaptabilit\u00e9 et la flexibilit\u00e9 de theme.json<\/code> en font un \u00e9l\u00e9ment cl\u00e9 du d\u00e9veloppement de th\u00e8mes pour WordPress. L’approche optimale consiste \u00e0 utiliser ces deux \u00e9l\u00e9ments de diff\u00e9rentes mani\u00e8res pour la conception de votre th\u00e8me, et la typographie ne fait pas exception \u00e0 la r\u00e8gle.<\/p>\nConfigurer la typographie dans l’\u00e9diteur de site WordPress<\/h2>\n
Si vous savez comment utiliser l’\u00e9diteur de blocs, vous pouvez \u00e9galement utiliser l’\u00e9diteur de site. Dans WordPress, acc\u00e9dez \u00e0 l’\u00e9cran Apparence <\/strong>> \u00c9diteur<\/strong>. L’\u00e9cran d’accueil de l’\u00e9diteur de site s’affiche :<\/p>\n![\"L'\u00e9cran](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/site-editor-home.png\")
L’\u00e9cran d’accueil de l’\u00e9diteur de site.<\/figcaption><\/figure>\nL’\u00e9cran Styles<\/strong>, dans la partie gauche de la navigation, vous offre des options de conception globales qui incluent des changements de typographie :<\/p>\n![\"Une](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/styles-options.gif\")
Diff\u00e9rents styles pr\u00e9d\u00e9finis dans l’\u00e9diteur de site WordPress.<\/figcaption><\/figure>\nPour la plupart des cas d’utilisation, les r\u00e9glages individuels pour les diff\u00e9rents aspects de la typographie vous apporteront plus de valeur. Il y a deux petites ic\u00f4nes en haut de l’\u00e9cran Styles<\/strong> qui ouvrent d’autres options : le Livre des styles et l’ic\u00f4ne crayon Modifier les styles<\/strong>.<\/p>\n![\"Une](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/styles-sidebar-icons.png\")
Les ic\u00f4nes d’\u00e9dition des styles dans l’\u00e9diteur de site.<\/figcaption><\/figure>\nEn outre, vous pouvez d\u00e9finir des options de typographie au niveau des \u00e9l\u00e9ments et pour chaque bloc.<\/p>\n
La biblioth\u00e8que de polices<\/h3>\n
L’\u00e9cran Modifier les styles <\/strong>> Typographie<\/strong> affiche la biblioth\u00e8que de polices, bien qu’elle ne porte pas ce nom explicite dans l’\u00e9diteur de site. Elle vous permet de g\u00e9rer les polices et les caract\u00e8res de plusieurs fa\u00e7ons :<\/p>\n\n- Vous pouvez t\u00e9l\u00e9verser et g\u00e9rer des polices de caract\u00e8res personnalis\u00e9es.<\/li>\n
- Vous pouvez utiliser les polices Google Fonts directement dans WordPress.<\/li>\n
- Cr\u00e9ez des collections de polices<\/a> en utilisant PHP.<\/li>\n<\/ul>\n
Pour acc\u00e9der \u00e0 la biblioth\u00e8que de polices \u00e0 partir de la section Typographie dans la colonne lat\u00e9rale de l’\u00e9diteur de site, cliquez sur l’ic\u00f4ne G\u00e9rer les polices<\/strong>:<\/p>\n![\"Le](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/manage-fonts-icon.png\")
L’ic\u00f4ne G\u00e9rer les polices<\/strong> dans l’\u00e9diteur de site de WordPress.<\/figcaption><\/figure>\nIci, l’onglet Biblioth\u00e8que<\/strong> vous montre les polices de caract\u00e8res enregistr\u00e9es pour votre th\u00e8me et indique celles qui sont actives :<\/p>\n![\"L'interface](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/font-library-dialog.png\")
L’interface de la biblioth\u00e8que de polices de caract\u00e8res de WordPress.<\/figcaption><\/figure>\nEn cliquant sur l’une d’entre elles, vous pouvez activer ou d\u00e9sactiver des polices individuelles :<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/active-fonts.png\")
Les polices actives dans la biblioth\u00e8que de polices de l’\u00e9diteur de site.<\/figcaption><\/figure>\nDans l’onglet T\u00e9l\u00e9verser<\/strong>, vous utilisez une bo\u00eete de dialogue de t\u00e9l\u00e9versement par glisser-d\u00e9poser pour installer vos propres polices aux formats TTF, WOFF, WOFF2 et OTF.<\/p>\nL’onglet Installer les polices<\/strong> se connecte \u00e0 Google Fonts, ce qui vous permet d’exploiter cette biblioth\u00e8que dans votre th\u00e8me. Notez que cette approche permet de t\u00e9l\u00e9charger et d’afficher les polices \u00e0 partir de votre site, et non d’un CDN de Google<\/a>:<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/google-fonts-library.png\")
La biblioth\u00e8que Google Fonts dans l’\u00e9diteur de site WordPress.<\/figcaption><\/figure>\nS\u00e9lectionnez ici les polices que vous souhaitez installer dans la liste compl\u00e8te, puis cliquez sur le bouton Installer<\/strong>. Une fois que la notification de r\u00e9ussite s’affiche, ces polices apparaissent dans l’onglet Biblioth\u00e8que <\/strong>:<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/installed-fonts.png\")
Les polices install\u00e9es pour une instance de WordPress.<\/figcaption><\/figure>\nCela vous permet d’utiliser les polices comme n’importe quelle autre sur votre site. Il ne vous reste plus qu’\u00e0 les personnaliser en fonction de vos besoins.<\/p>\n
Le cahier de style<\/h3>\n
L’un des dangers du choix et de la configuration des polices de caract\u00e8res est que vous ne savez pas \u00e0 quoi elles ressembleront en combinaison avec les sch\u00e9mas de couleurs, les mises en page et les formats. Le cahier de style est inestimable, car il vous permet de pr\u00e9visualiser vos r\u00e9glages de typographie dans diff\u00e9rents \u00e9l\u00e9ments.<\/p>\n![\"L'interface](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/style-book.png\")
Le livre de style de l’\u00e9diteur de site.<\/figcaption><\/figure>\nEn cliquant sur l’ic\u00f4ne de l’\u0153il, vous ouvrirez le cahier de style, qui comporte cinq onglets :<\/p>\n
\n- Texte <\/strong>: Cet onglet vous permet de travailler avec des paragraphes, des titres, des listes et d’autres \u00e9l\u00e9ments ax\u00e9s sur le texte.<\/li>\n
- M\u00e9dias <\/strong>: Ici, vous pouvez ajuster les images, les vid\u00e9os et les pr\u00e9sentations audio.<\/li>\n
- Conception <\/strong>: Cette section regroupe les facettes structurelles de la conception, telles que les colonnes, les s\u00e9parateurs et les boutons.<\/li>\n
- Widgets <\/strong>: Cet \u00e9cran comporte deux \u00e9l\u00e9ments : les g\u00e9n\u00e9rations dynamiques, telles que les listes d’archives et de commentaires. Vous pouvez \u00e9galement travailler avec la barre de recherche, les ic\u00f4nes de r\u00e9seaux sociaux et les nuages d’\u00e9tiquettes.<\/li>\n
- Th\u00e8me <\/strong>: Cet \u00e9cran se concentre sur les \u00e9l\u00e9ments de l’en-t\u00eate de votre site, tels que le titre, le slogan, la navigation et le logo.<\/li>\n<\/ul>\n
Si vous cliquez sur un \u00e9l\u00e9ment dans le cahier de style, vous disposez de plusieurs options dans la colonne lat\u00e9rale. Vous travaillez ici avec les r\u00e9glages de typographie de chaque bloc plut\u00f4t qu’avec des \u00e9l\u00e9ments sp\u00e9cifiques :<\/p>\n![\"Le](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/style-book-editing.png\")
Vous avez toute latitude pour modifier la typographie directement \u00e0 partir du cahier de style.<\/figcaption><\/figure>\nVous pouvez acc\u00e9der aux m\u00eames \u00e9crans via la section Styles <\/strong>> Blocs <\/strong>de la page d’accueil de l’\u00c9diteur de site. Quoi qu’il en soit, les options que vous voyez vous permettent de personnaliser la typographie (et d’autres \u00e9l\u00e9ments) de chaque bloc dans les moindres d\u00e9tails.<\/p>\nR\u00e9glage des options de typographie dans l’\u00e9diteur de site<\/h3>\n
Pour tous les blocs et \u00e9l\u00e9ments, vous disposez des m\u00eames options de base. Voici un aper\u00e7u de chaque option dans le panneau.<\/p>\n
Type et taille de la police<\/h4>\n
Le menu d\u00e9roulant Police<\/strong> est simple : choisissez la police que vous souhaitez appliquer \u00e0 l’\u00e9l\u00e9ment ou au bloc sp\u00e9cifique :<\/p>\n![\"L'interface](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/font-drop-down.png\")
Choix d’une police \u00e0 partir de la s\u00e9lection disponible dans l’onglet Typographie.<\/figcaption><\/figure>\nLes pr\u00e9-r\u00e9glages de taille<\/strong> sont les moins personnalisables dans l’\u00c9diteur de site. Vous choisissez une taille dans une fourchette allant de Petit \u00e0 Tr\u00e8s Grand :<\/p>\n![\"Panneau](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/size-presets.png\")
WordPress propose des pr\u00e9-r\u00e9glages de taille de police dans l’\u00e9diteur de site.<\/figcaption><\/figure>\nSi vous \u00e9ditez theme.json<\/code>, vous pouvez changer ces valeurs pr\u00e9d\u00e9finies – mais pas \u00e0 partir de l’\u00e9diteur du site. Le bouton D\u00e9finir une taille<\/strong> personnalis\u00e9e vous permet de d\u00e9finir une taille personnalis\u00e9e \u00e0 l’aide d’un ensemble d’unit\u00e9s de dimensionnement :<\/p>\n![\"L'interface](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/font-size-custom.png\")
Choix d’une taille et d’une unit\u00e9 de police personnalis\u00e9es.<\/figcaption><\/figure>\nIl existe d’autres moyens de r\u00e9gler la typographie dans l’\u00e9diteur de site, y compris des m\u00e9thodes pour lesquelles vous utilisez g\u00e9n\u00e9ralement les feuilles de style CSS.<\/p>\n
Apparence, hauteur de ligne et espacement des lettres<\/h4>\n
Le menu d\u00e9roulant Apparence<\/strong> semble simple : choisissez un poids de police dans une longue liste et il s’appliquera \u00e0 votre texte. Cependant, vous ne disposerez pas toujours de toutes les polices disponibles pour chaque poids.<\/p>\n![\"Le](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/appearance-drop-down.png\")
Le menu d\u00e9roulant Apparence dans l’\u00e9diteur de site WordPress.<\/figcaption><\/figure>\nNos tests montrent que WordPress ne filtre pas cette liste pour n’afficher que les polices disponibles. De plus, il appliquera une \u00ab correspondance la plus proche \u00bb si vous s\u00e9lectionnez un poids sans police correspondante. Par exemple, nous utilisons Cardo Normal, Cardo Bold et Cardo Bold Italic pour notre site d’exemple. En choisissant Semi Bold, Bold, Extra Bold ou Black, vous n’utilisez que Cardo Bold :<\/p>\n![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/bold-appearance.gif\")
Modifier l’apparence du texte dans l’\u00e9diteur de site WordPress.<\/figcaption><\/figure>\nLa hauteur de ligne n’utilise pas de pr\u00e9-r\u00e9glages et \u00e9quilibre votre choix de police, l’apparence et la taille. Cette valeur met plus d’espace entre chaque ligne et c’est souvent une impl\u00e9mentation pratique lorsque le texte semble agglutin\u00e9 :<\/p>\n![\"GIF](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/line-height.gif\")
Modifier la hauteur de ligne dans l’\u00e9diteur de site WordPress.<\/figcaption><\/figure>\nL’espacement des lettres est similaire et suit la coutume CSS qui consiste \u00e0 s’ajouter \u00e0 l’espacement naturel existant :<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/letter-spacing.png\")
Vous pouvez pousser l’espacement des lettres trop loin pour qu’il soit utilisable.<\/figcaption><\/figure>\nComme pour le dimensionnement personnalis\u00e9 des polices, vous pouvez s\u00e9lectionner diff\u00e9rentes unit\u00e9s de mesure. Le choix d’une valeur relative est souvent pr\u00e9f\u00e9rable. WordPress d\u00e9finit l’espacement des lettres avec une valeur CSS par d\u00e9faut de \u00ab normal \u00bb Cela laisse le navigateur choisir la valeur et, d’apr\u00e8s notre exp\u00e9rience, c’est l’id\u00e9al.<\/p>\n
Il est courant d’utiliser de petites valeurs positives d’espacement des lettres – souvent pas plus de 0,12rem\/em – et pratiquement pas d’espacement n\u00e9gatif.<\/p>\n
La derni\u00e8re s\u00e9rie de choix – la casse des lettres – vous permet de choisir de mettre le texte en majuscules, en minuscules ou en majuscules de phrase. Vous pouvez \u00e9galement supprimer la casse. Cette option est tr\u00e8s utile pour la coh\u00e9rence des caract\u00e8res, car vous n’avez pas besoin d’utiliser une casse sp\u00e9cifique lorsque vous cr\u00e9ez du contenu.<\/p>\n
Comment utiliser theme.json pour d\u00e9finir la typographie de votre th\u00e8me WordPress ?<\/h2>\n
L’\u00e9diteur de site est id\u00e9al pour les utilisateurs du site qui n’ont pas de connaissances techniques. Le fichier theme.json<\/code> vous permet de vous assurer que l’\u00e9diteur de site donne aux utilisateurs ce dont ils ont besoin pour personnaliser leurs sites. C’est le fichier de configuration qui est la base de d\u00e9veloppement de votre th\u00e8me.<\/p>\nNous n’entrerons pas dans la structure et le formatage de l’ensemble du fichier theme.json <\/code>, mais nous verrons comment d\u00e9finir, param\u00e9trer et appliquer la typographie \u00e0 l’int\u00e9rieur.<\/p>\nComprendre la structure du fichier theme.json et d\u00e9finir les r\u00e9glages globaux<\/h3>\n
Vous utilisez JSON pour d\u00e9finir tous les \u00e9l\u00e9ments de theme.json<\/code>, y compris la typographie. L’\u00e9l\u00e9ment typography<\/code> s’imbrique dans l’objet settings<\/code> de ce fichier. \u00c0 partir de l\u00e0, vous imbriquez d’autres \u00e9l\u00e9ments, propri\u00e9t\u00e9s et objets pour construire la typographie de votre site :<\/p>\n{\n \"version\": 3,\n \"settings\": {\n \"typography\": {\n \"fontFamilies\": [\n {\n \"fontFamily\": \"-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif\",\n \"slug\": \"system-font\",\n \"name\": \"System Font\"\n }\n ],\n \"fontSizes\": [\n {\n \"slug\": \"small\",\n \"size\": \"13px\",\n \"name\": \"Small\"\n },\n {\n \"slug\": \"medium\",\n \"size\": \"20px\",\n \"name\": \"Medium\"\n }\n ]\n }\n }\n}<\/code><\/pre>\nTous ces \u00e9l\u00e9ments suivent un sch\u00e9ma similaire. Les r\u00e9glages par d\u00e9faut – et les plus faciles \u00e0 comprendre – sont les param\u00e8tres globaux. Ceux-ci s’imbriquent de mani\u00e8re simple, mais vous pouvez \u00e9galement d\u00e9finir des r\u00e9glages de typographie pour des blocs individuels :<\/p>\n
\"styles\": {\n \"blocks\": {\n \"core\/paragraph\": {\n \"typography\": {\n \"fontFamily\": \"var(--wp--preset--font-family--primary)\",\n \"fontSize\": \"var(--wp--preset--font-size--medium)\",\n \"lineHeight\": \"1.5\"\n }\n },\n \"core\/heading\": {\n \"typography\": {\n \"fontFamily\": \"var(--wp--preset--font-family--secondary)\",\n \"fontWeight\": \"700\"\n }\n }\n }\n}<\/code><\/pre>\nPour cela, vous utilisez la propri\u00e9t\u00e9 blocks<\/code> et un espace de noms sp\u00e9cifique pour chaque bloc que vous souhaitez cibler. Bien que cela ajoute deux niveaux d’imbrication suppl\u00e9mentaires, il n’y a pas d’alternative \u00e0 cette approche. Quoi qu’il en soit, vous disposez d’un grand nombre de propri\u00e9t\u00e9s avec lesquelles vous pouvez jouer.<\/p>\nEnregistrement des polices<\/h3>\n
Vous disposez du m\u00eame niveau de personnalisation<\/a> de la typographie que dans l’interface de l’\u00e9diteur de site, voire plus dans certains cas. Au niveau de base, vous imbriquez votre pile de polices dans la propri\u00e9t\u00e9 fontFamilies<\/code>, puis vous lui donnez un nom et un slug :<\/p>\n\nfontFamily<\/code> correspond \u00e0 la valeur CSS font-family<\/code> et sera la pile de polices de caract\u00e8res que vous souhaitez utiliser dans votre th\u00e8me.<\/li>\nname<\/code> est ce que vous voyez dans l’\u00e9diteur de site lorsque vous s\u00e9lectionnez une police, de sorte qu’elle sera lisible par l’homme.<\/li>\nslug<\/code> ajoute \u00e0 une propri\u00e9t\u00e9 CSS personnalis\u00e9e en vue d’une utilisation ult\u00e9rieure.<\/li>\n<\/ul>\nPour les polices syst\u00e8me, c’est tr\u00e8s simple :<\/p>\n
\u2026\n \"typography\": {\n \"fontFamilies\": [\n {\n \"name\": \"Primary\",\n \"slug\": \"primary\",\n \"fontFamily\": \"Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif\"\n },\n {\n \"name\": \"Secondary\",\n \"slug\": \"secondary\",\n \"fontFamily\": \"system-ui, sans-serif\"\n }<\/code><\/pre>\nPour enregistrer des polices web personnalis\u00e9es, vous devez utiliser la propri\u00e9t\u00e9 fontFace<\/code> et d\u00e9finir certains attributs :<\/p>\n\u2026\n\"name\": \"Secondary\",\n\"slug\": \"secondary\",\n\"fontFamily\": \"'Open Sans', sans-serif\",\n \"fontFace\": [\n {\n \"fontFamily\": \"Open Sans\",\n \"fontWeight\": \"300 800\", \/\/ This is a range of font weight values.\n \"fontStyle\": \"normal\", \/\/ This has to be a valid CSS font-style value.\n \"fontStretch\": \"normal\", \/\/ This also needs to be a valid CSS font-stretch value.\n \"src\": [ \"file:.\/assets\/fonts\/open-sans.woff2\" ] \/\/ This is an array of URLs for custom fonts, and can support multiple formats.\n },\n\u2026<\/code><\/pre>\nUne fois les polices enregistr\u00e9es, vous pouvez les s\u00e9lectionner dans les diff\u00e9rents menus d\u00e9roulants de l’\u00e9diteur de site.<\/p>\n
Notez qu’il existe plusieurs fa\u00e7ons d’enregistrer des polices de caract\u00e8res pour votre th\u00e8me. Vous disposez de la biblioth\u00e8que de polices dans l’interface de l’\u00e9diteur de site, de la mise en file d’attente PHP<\/a> typique et de l’extension Create Block Theme<\/a> :<\/p>\n![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/create-block-theme.png\")
L’image d’en-t\u00eate de Create Block Theme de WordPress.org.<\/figcaption><\/figure>\nIl s’agit d’un mod\u00e8le de base pour la construction d’un th\u00e8me, mais il vous permet \u00e9galement d’enregistrer et de d\u00e9finir la typographie. Une fois que vous avez enregistr\u00e9 les polices de la mani\u00e8re qui vous convient le mieux (nous recommandons la biblioth\u00e8que de polices), vous pouvez commencer \u00e0 vous int\u00e9resser au dimensionnement.<\/p>\n
D\u00e9finition de la taille des polices et des pr\u00e9-r\u00e9glages dans theme.json<\/h3>\n
Une autre t\u00e2che essentielle de la typographie consiste \u00e0 d\u00e9finir la taille des polices. Cette fonction utilise la propri\u00e9t\u00e9 fontSizes<\/code> et vous permet de d\u00e9finir des pr\u00e9-r\u00e9glages pour l’\u00e9diteur de site :<\/p>\n\"settings\": {\n \"typography\": {\n \"fontSizes\": [\n {\n \"slug\": \"small\",\n \"size\": \"12px\",\n \"name\": \"Small\"\n },\n {\n \"slug\": \"x-large\",\n \"size\": \"32px\",\n \"name\": \"Extra Large\"\n }\n ]\n }\n}<\/code><\/pre>\nComme pour les autres r\u00e9glages de typographie, WordPress g\u00e9n\u00e8re une propri\u00e9t\u00e9 CSS personnalis\u00e9e pour chaque pr\u00e9r\u00e9glage en utilisant l’extension que vous avez fournie :<\/p>\n
body {\n--wp--preset--font-size--small: 12px;\n--wp--preset--font-size--x-large: 32px;\n}<\/code><\/pre>\nWordPress d\u00e9sactive la typographie fluide par d\u00e9faut, mais vous pouvez l’activer en utilisant des valeurs bool\u00e9ennes. C’est une option que vous pouvez d\u00e9finir \u00e0 un niveau global..<\/p>\n
{\n \"version\": 2,\n \"settings\": {\n \"typography\": {\n \"fluid\": true\n }\n }\n}<\/code><\/pre>\n…ou pour chaque pr\u00e9-r\u00e9glage et taille que vous d\u00e9finissez :<\/p>\n
{\n \"name\": \"Medium\",\n \"size\": \"1.25rem\",\n \"slug\": \"md\",\n \"fluid\": {\n \"min\": \"1rem\",\n \"max\": \"1.5rem\"\n }\n},<\/code><\/pre>\nLes valeurs min<\/code> et max<\/code> vous permettent de d\u00e9terminer la plage d’extensibilit\u00e9 pour chaque taille de police fluide que vous d\u00e9finissez.<\/p>\nMise en \u0153uvre de fonctions typographiques avanc\u00e9es<\/h3>\n
Le site theme.json<\/code> offre une gamme compl\u00e8te d’options, \u00e0 l’instar de ce que vous pouvez trouver dans l’\u00c9diteur de site. Cela vous permet de personnaliser la typographie de votre site en fonction d’un ensemble de valeurs par d\u00e9faut adapt\u00e9es \u00e0 votre th\u00e8me :<\/p>\n\"styles\": {\n \"typography\": {\n \"letterSpacing\": \"0.02em\",\n \"textTransform\": \"uppercase\",\n \"textDecoration\": \"underline\",\n \"lineHeight\": \"1.55rem\",\n \"fontStyle\": \"normal\"\n }\n}<\/code><\/pre>\nVous pouvez choisir d’activer ou de d\u00e9sactiver<\/a> ces options. Chaque option prend une valeur bool\u00e9enne, ce qui signifie que vous disposez \u00e9galement d’options de personnalisation pour l’\u00e9diteur de site. Vous pouvez effectuer quelques personnalisations qui vont au-del\u00e0 des possibilit\u00e9s offertes par l’\u00e9diteur de site :<\/p>\n\ncustomFontSize<\/code> est activ\u00e9 par d\u00e9faut et permet aux utilisateurs de saisir des tailles de police personnalis\u00e9es – mais vous pouvez le d\u00e9sactiver si vous souhaitez contr\u00f4ler \u00e9troitement les options disponibles.<\/li>\ndropCap<\/code> est activ\u00e9 par d\u00e9faut, mais si vous l’activez, l’utilisateur a la possibilit\u00e9 d’activer les majuscules pour la lettre initiale de tous les blocs du paragraphe.<\/li>\ntextColumns<\/code> active l’option \u00ab colonnes \u00bb pour tout texte \u00e0 l’int\u00e9rieur d’un bloc ; cette option est d\u00e9sactiv\u00e9e par d\u00e9faut.<\/li>\nwritingMode<\/code> permet de modifier l’orientation du texte dans l’\u00e9diteur de site. Vous pouvez donner aux utilisateurs le choix entre un texte horizontal et un texte vertical.<\/li>\n<\/ul>\nLa port\u00e9e de theme.json<\/code> signifie que vous devriez y travailler en premier, en particulier lors de la cr\u00e9ation d’un th\u00e8me. Les options de l’\u00e9diteur de site vous permettront, \u00e0 vous ou \u00e0 vos utilisateurs, d’affiner la typographie de WordPress.<\/p>\nComment impl\u00e9menter la typographie \u00e0 l’aide de theme.json : un exemple pratique<\/h2>\n
FSE rend la conception et le d\u00e9veloppement avec WordPress plus facile que jamais. De plus, le processus g\u00e9n\u00e9ral de s\u00e9lection et d’impl\u00e9mentation de ces polices de caract\u00e8res est en partie plus simple. Cela est d\u00fb en partie aux tendances en mati\u00e8re de design, mais les outils existent pour combler les lacunes lorsque vous n’avez pas de graphiste disponible pour vous aider.<\/p>\n
Nous pouvons commencer par vos s\u00e9lections de polices de caract\u00e8res principales.<\/p>\n
<\/div><\/kinsta-auto-toc>\n1. Associez des polices de caract\u00e8res compl\u00e9mentaires<\/h3>\n
Ce n’est pas pour rien que le choix des polices<\/a> et des caract\u00e8res fait l’objet d’une \u00e9tude approfondie. C’est parce qu’il s’agit d’une t\u00e2che d\u00e9licate. Par exemple, vous devez tenir compte de l’image de marque du site, de son objectif et de ce que vous voulez transmettre.<\/p>\nToutefois, gr\u00e2ce aux tendances actuelles en mati\u00e8re de conception, le travail est beaucoup plus simple. En effet, votre corps de texte peut utiliser des polices syst\u00e8me, en particulier la police de caract\u00e8res principale du syst\u00e8me d’exploitation (OS). La seule t\u00e2che qui vous incombe est de choisir une police compl\u00e9mentaire.<\/p>\n
Il ne s’agit pas d’un tutoriel sur l’association de polices de caract\u00e8res, mais nous avons quelques conseils \u00e0 vous donner :<\/p>\n
\n- Les caract\u00e8res OS pour le corps du texte sont g\u00e9n\u00e9ralement sans empattement. Vous devez donc rechercher une police avec empattement ou une autre police sans empattement qui soit diff\u00e9rente, unique et qui se d\u00e9marque.<\/li>\n
- Restez simple et envisagez peut-\u00eatre de n’utiliser la police OS que si elle s’int\u00e8gre dans la conception.<\/li>\n
- Testez diff\u00e9rentes combinaisons afin de d\u00e9terminer les polices qui s’accordent le mieux (et celles qui ne s’accordent pas).<\/li>\n<\/ul>\n
Playfair Display<\/a>, une police Google<\/a> avec empattement, est un bon exemple de combinaison de polices pour un syst\u00e8me :<\/p>\n![\"Le](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/playfair-display.png\")
La page de sp\u00e9cimen de Google Fonts pour Playfair Display.<\/figcaption><\/figure>\nAvec une paire de polices, vous devez tenir compte de leur taille, non seulement sur la page, mais aussi l’une par rapport \u00e0 l’autre.<\/p>\n
2. Trouvez la bonne taille absolue et relative<\/h3>\n
Le choix de la taille des polices est \u00e9galement crucial, car une mauvaise taille absolue peut ruiner votre UX\/UI. C’est aussi un domaine dans lequel vous voudrez peut-\u00eatre vous en tenir aux valeurs par d\u00e9faut. Cependant, nous vous encourageons \u00e0 exp\u00e9rimenter, car chaque paire aura son propre \u00ab espace \u00bb pour les polices de caract\u00e8res.<\/p>\n
Typescale<\/a> est un excellent outil qui peut vous aider \u00e0 cr\u00e9er la bonne typographie WordPress, quels que soient vos besoins :<\/p>\n![\"L'interface](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/typescale-site.png\")
Le site Typescale.<\/figcaption><\/figure>\nL’un des meilleurs aspects de l’outil est le choix de l’\u00e9chelle. Il fait essentiellement le travail pour vous en choisissant des tailles de police compl\u00e9mentaires. Nous choisissons ici l’\u00e9chelle Major Third, avec un facteur de 1,2 et une taille de base de 16 px :<\/p>\n![\"Une](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/font-sizing-scale.png\")
Les options de mise \u00e0 l’\u00e9chelle des polices dans Typeface.<\/figcaption><\/figure>\nDans le panneau du milieu, vous verrez les tailles obtenues pour chaque titre et chaque paragraphe et vous pourrez choisir parmi un certain nombre d’unit\u00e9s de mesure. Notez que Typescale vous permet \u00e9galement de modifier l’espacement des lettres, la hauteur de ligne, le poids de la police, etc. : tous ces \u00e9l\u00e9ments sont personnalisables \u00e0 l’adresse theme.json<\/code>.<\/p>\n3. Application des valeurs par d\u00e9faut dans theme.json<\/h3>\n
Une fois que vous avez les bonnes polices de caract\u00e8res et les bonnes tailles, vous pouvez les appliquer dans votre fichier theme.json<\/code>. Voici un exemple de ce \u00e0 quoi ressemble un fichier theme.json<\/code> typique :<\/p>\n{\n \"version\": 3,\n \"settings\": {\n \"typography\": {\n \"fontFamilies\": [\n {\n \"fontFamily\": \"-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif\",\n \"slug\": \"ubuntu-sans\",\n \"name\": \"Ubuntu Sans\"\n },\n {\n \"fontFamily\": \"\"Playfair Display\", serif\",\n \"slug\": \"playfair\",\n \"name\": \"Playfair Display\"\n }\n ],\n \"fontSizes\": [\n {\n \"slug\": \"small\",\n \"size\": \"13px\",\n \"name\": \"Small\"\n },\n {\n \"slug\": \"medium\",\n \"size\": \"16px\",\n \"name\": \"Medium\"\n },\n {\n \"slug\": \"large\",\n \"size\": \"20px\",\n \"name\": \"Large\"\n },\n {\n \"slug\": \"x-large\",\n \"size\": \"25px\",\n \"name\": \"Extra Large\"\n },\n {\n \"slug\": \"huge\",\n \"size\": \"31px\",\n \"name\": \"Huge\"\n }\n ]\n }\n },\n \"styles\": {\n \"typography\": {\n \"fontFamily\": \"var(--wp--preset--font-family--system)\",\n \"fontSize\": \"var(--wp--preset--font-size--medium)\",\n \"lineHeight\": \"1.8\"\n },\n \"blocks\": {\n \"core\/paragraph\": {\n \"typography\": {\n \"fontSize\": \"var(--wp--preset--font-size--medium)\"\n }\n },\n \"core\/heading\": {\n \"typography\": {\n \"fontFamily\": \"var(--wp--preset--font-family--playfair)\",\n \"fontWeight\": \"700\"\n }\n },\n \"core\/post-title\": {\n \"typography\": {\n \"fontSize\": \"var(--wp--preset--font-size--huge)\"\n }\n }\n }\n }\n}<\/code><\/pre>\nVous pouvez \u00e9galement appliquer ces polices de caract\u00e8res \u00e0 n’importe quel bloc, et m\u00eame penser \u00e0 styliser chaque titre d’une mani\u00e8re unique. Cherchez \u00e0 cr\u00e9er un syst\u00e8me de typographie WordPress coh\u00e9rent et hi\u00e9rarchique qui constituera la base du design de votre th\u00e8me. Cela garantira un aspect coh\u00e9rent sur l’ensemble de votre site, tandis que l’\u00e9diteur de site vous offrira une plus grande flexibilit\u00e9 et une meilleure personnalisation.<\/p>\n
Le r\u00f4le de Kinsta dans le processus de d\u00e9veloppement de votre th\u00e8me WordPress<\/h2>\n
L’h\u00e9bergement haute performance de Kinsta offre de nombreuses possibilit\u00e9s pour vous aider \u00e0 g\u00e9rer un site web efficace et rapide. Cependant, il offre \u00e9galement des outils de d\u00e9veloppement robustes, y compris DevKinsta<\/a>, un environnement de d\u00e9veloppement local qui fonctionne sur des conteneurs Docker<\/a>.<\/p>\n![\"Illustration](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/devkinsta-home.png\")
Le logo DevKinsta.<\/figcaption><\/figure>\nIl est important de s’assurer que la typographie de votre site WordPress fonctionne avant de le mettre en ligne. C’est l\u00e0 que les environnements de staging de Kinsta seront essentiels. En particulier, vous utiliserez souvent la fonction de pouss\u00e9e s\u00e9lective<\/a>. Cela vous permet de pousser des fichiers et des dossiers sp\u00e9cifiques – n’importe quelle ressource que vous souhaitez – plut\u00f4t que de tout pousser en m\u00eame temps.<\/p>\n![\"L'interface](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/selective-push.png\")
L’outil de pouss\u00e9e s\u00e9lective de Kinsta.<\/figcaption><\/figure>\n