Régler vos couleurs, vos polices et vos échelles

Les couleurs, les polices et les échelles de votre site se règlent une fois et servent sur toutes vos pages. Cet article vous apprend à régler les couleurs système et vos couleurs de marque, à installer vos polices, à créer vos valeurs d’échelle et à nettoyer l’inventaire.

Avant de commencer

• L’écran Design system se trouve dans le menu Apparence. Il est réservé aux administrateurs du site.
• Les couleurs de marque, les tailles, les espacements et les arrondis se créent depuis l’éditeur. Les créer ou les modifier est réservé aux administrateurs du site, comme l’écran Design system. Les autres rôles choisissent parmi les valeurs existantes.
• Chaque changement s’enregistre dès que vous le faites. Il arrive en ligne à la prochaine publication du site.
• Pour poser d’un coup une palette et des polices toutes prêtes, passez par le catalogue de design.

Trouver chaque réglage

Une valeur que vous réutilisez se crée dans l’éditeur, sur le bloc qui s’en sert. Les couleurs à rôle fixe et les polices restent sur l’écran Design system.

Choisir le mode clair ou sombre

En tête des couleurs de l’écran Design system, le menu Modes clair et sombre règle le mode que votre site montre.

Changer de choix enregistre et recharge l’écran. Une valeur sombre que l’écran ne montre plus reste enregistrée : vous la retrouvez en repassant sur Les deux.

Régler les couleurs système

Les couleurs système ont un rôle fixe dans le produit. Leur nom ne change pas mais vous choisissez leur valeur. Elles se rangent en quatre cartes.

1. Dans le menu de l’administration, ouvrez Apparence puis Design system.
2. Descendez jusqu’à la carte de la couleur, par exemple Marque.
3. Cliquez sur la pastille de la couleur et choisissez une nouvelle valeur. Le message Enregistré. s’affiche.

Changer la primaire met à jour d’un coup les boutons principaux, les liens et les onglets de tout le site. Aucune page n’est à reprendre.

La référence sombre doit rester très sombre et la claire très claire. Sinon l’écran refuse la valeur avec La base sombre doit être très sombre. ou La base claire doit être très claire.

Donner une valeur pour le mode sombre

Quand le site montre les deux modes, chaque couleur de marque et chaque état a un second champ, par exemple Primaire en mode sombre. Sans réglage de votre part, votre site calcule une version plus claire de la même teinte qui se lit sur le fond sombre.

Pour la remplacer, choisissez une autre valeur dans ce champ. Si vous changez la couleur sans toucher à ce champ, la version sombre se recalcule. Les références et les neutres n’en ont pas. En mode sombre, la claire et la sombre de chaque paire échangent leurs places.

Créer une couleur de marque

Une couleur de marque se crée dans l’éditeur depuis le sélecteur de couleur d’un bloc. Elle rejoint la palette de tous les blocs du site.

1. Dans l’éditeur, sélectionnez un bloc puis ouvrez l’onglet Styles de la colonne de droite.
2. Dans le panneau Couleurs, cliquez sur la pastille du texte, du lien ou du fond. Le sélecteur s’ouvre sur les sections Système et Thème.
3. Cliquez sur la couleur affichée en haut, puis réglez-la sous Personnaliser la couleur.
4. À côté de Thème, cliquez sur Ajouter une couleur. Un formulaire s’ouvre.
5. Facultatif : donnez un Nom à la couleur, par exemple « Vert sauge ».
6. Facultatif : activez Ajouter une valeur pour le mode sombre et choisissez la Couleur en mode sombre.
7. Cliquez sur Enregistrer. La couleur s’applique au bloc et apparaît sous Thème.

Pour modifier une couleur, choisissez-la puis cliquez sur Modifier la couleur. Le formulaire affiche Vos changements s’appliqueront à tous les blocs qui s’en servent. Le nom d’une couleur système ne se modifie pas.

Lire le verdict de contraste

Sous le sélecteur, la ligne Contraste … :1. donne le rapport entre la couleur et celle de vos deux références qui s’y lit le mieux. C’est le meilleur résultat possible avec cette couleur.

Le verdict informe sans bloquer. Pour le contraste entre le texte et le fond d’un bloc, voyez Colorer un bloc.

Installer une police

Une police installée est hébergée sur votre site. Aucune adresse IP de visiteur n’est envoyée à Google. Seuls les jeux de caractères latins sont gardés.

Une typographie du catalogue de design installe ses polices de la même façon. Toutes les polices comptent dans l’espace de votre offre.

Depuis Google Fonts

1. Sur l’écran Design system, cliquez sur Parcourir Google Fonts.
2. Tapez un nom dans Chercher une police…, ou choisissez une catégorie dans Toutes les catégories.
3. Facultatif : tapez une phrase de votre site dans le champ d’aperçu pour la voir dans chaque police.
4. À côté de la famille, cliquez sur Installer. Pour un seul style, ouvrez la liste … styles et installez ce style. La police rejoint les Polices actives.

La case Variables seulement est cochée à l’ouverture. Une police variable porte toutes ses graisses dans un seul fichier. Vos pages chargent moins de fichiers.

Depuis un fichier .woff2

1. Cliquez sur Envoyer une police. Le panneau Envoyer une police à vous s’ouvre.
2. Déposez le fichier dans Fichier de police (.woff2).
3. Saisissez le Nom de la famille. Donnez le même nom à tous les fichiers d’une même police.
4. Choisissez la Graisse et le Style, Normal ou Italique.
5. Pour une police variable, indiquez le haut de sa plage de graisses dans Jusqu’à (police variable). Sinon, laissez Graisse unique.
6. Cliquez sur Installer. Le message Installée : suivi du nom de la police s’affiche.

Le contenu du fichier est vérifié. Un fichier qui n’est pas une police .woff2 est refusé avec Seuls les fichiers .woff2 sont acceptés.

Depuis une adresse Google Fonts

1. Sur fonts.google.com, choisissez vos polices puis cliquez sur Get embed code puis sur l’onglet @import.
2. Copiez l’adresse, qui commence par https://fonts.googleapis.com/css2?, ou toute la ligne @import.
3. Sur l’écran Design system, cliquez sur Importer depuis une adresse, collez l’adresse dans Adresse Google Fonts puis cliquez sur Importer.

Le message Import réussi. donne le nombre de polices actives. Une adresse non reconnue affiche Aucune adresse Google Fonts valide trouvée.

Choisir la police de recours

Sous Polices actives, chaque famille a une liste de recours. La police de recours s’affiche pendant le chargement de votre police et quand elle ne se charge pas. Le choix s’enregistre aussitôt.

Utiliser une police installée

Installer une police ne change rien à vos pages. Les styles du produit utilisent trois jetons de police, des emplacements nommés qu’une typographie du catalogue remplit.

Pour mettre une police installée sur tous vos titres sans passer par le catalogue, choisissez-la dans le réglage Police d’un titre. Mettez à jour son style, par exemple Titre 1. Enregistrer le style d’un bloc détaille la mise à jour d’un style.

Pour supprimer une police, cliquez sur Supprimer à côté de sa famille, sous Polices actives. Le jeton qu’elle tenait se vide.

Créer une taille, un espacement ou un arrondi

Les tailles de texte, les espacements et les arrondis se désignent par leur valeur, par exemple 16px. Votre site reçoit au départ trois échelles.

1. Dans l’éditeur, sélectionnez un bloc et ouvrez le panneau du réglage, par exemple Typographie.
2. À côté du réglage, par exemple Taille du texte, cliquez sur le +.
3. Saisissez la valeur et choisissez son unité, px, em ou rem.
4. Cliquez sur Enregistrer. La valeur s’applique au bloc et rejoint la liste de tous les blocs.

Une taille de texte peut être Fluide : elle demande un Minimum, une taille Préférée et un Maximum. Elle grandit avec l’écran entre ses deux bornes.

Dans une même échelle, deux valeurs identiques sont refusées avec … existe déjà. Choisissez plutôt cette valeur. 1rem et 16px comptent comme deux valeurs différentes : la première suit la taille de texte choisie par le visiteur, la seconde non.

Pour modifier une valeur sur tout le site, sélectionnez-la puis cliquez sur le crayon Modifier. La modification s’applique à chaque bloc qui s’en sert.

Nettoyer l’inventaire

En bas de l’écran Design system, la carte Entrées du design system liste tout ce que votre site réutilise. Elle compte les couleurs, les tailles, les espacements, les arrondis, les ombres, les dégradés, les polices et les styles de bloc.

Pour voir les Contenus, les Styles enregistrés et les Ombres qui se servent d’une entrée, cliquez sur sa ligne. Retirez l’entrée des styles qui l’utilisent, puis supprimez-la.

Voir aussi

• Adopter un design du catalogue
• Voir vos réglages dans l’aperçu du design
• Mettre en forme un texte
• Colorer un bloc