13. Le texte : Titre, Paragraphe, Éditeur de texte et typographie

Un site vitrine est d’abord fait de mots : un slogan, des titres, des descriptions de prestations, des coordonnées. Maintenant que vous savez construire des boîtes (chapitres 09 à 12), ce chapitre ouvre la partie « Contenu et style » par la matière première la plus importante, le texte : quels éléments l’écrivent, comment hiérarchiser les titres, et comment régler une typographie lisible sur tous les écrans.

13.1 — Trois outils pour écrire

Elementor propose trois éléments pour poser du texte, et le débutant hésite souvent entre eux. Le Titre (Heading) atomique écrit une ligne de titre, portée par une balise H1 à H6. Le Paragraphe (Paragraph) atomique écrit un paragraphe de texte courant, avec des mots en gras ou en italique et des liens. L’Éditeur de texte (Text Editor), widget classique, ouvre une petite fenêtre de traitement de texte capable d’enchaîner plusieurs paragraphes, des listes à puces et des citations.

La règle du support est simple. Pour tout ce qui se lit d’un coup d’œil — un titre, un sous-titre, la phrase d’accroche d’une carte —, on prend le Titre et le Paragraphe atomiques : ils sont légers, entièrement responsives, et ils acceptent les classes et les variables du chapitre 18. Pour un texte long et structuré — la page « À propos », les mentions légales, une liste d’étapes —, on prend l’Éditeur de texte, parce qu’il sait faire des listes et tenir plusieurs paragraphes dans un seul élément.

13.2 — La hiérarchie des titres, de H1 à H6

Le web connaît six niveaux de titre, de H1 (le plus important) à H6 (le plus fin). Ils forment le plan de la page, exactement comme les titres de chapitre et de section d’un rapport. Trois règles suffisent pour ne jamais se tromper.

Un seul H1 par page. Le H1 est le titre de la page, celui qui dit de quoi elle parle. Sur l’accueil de la Menuiserie Roche, c’est le slogan « Le bois, sur mesure, depuis 2009 » ; sur la page Prestations, ce sera « Escaliers, cuisines et agencements sur mesure ». Deux H1 sur une page, ce sont deux sujets annoncés : le moteur de recherche ne sait plus lequel retenir.

Un ordre logique, sans saut. Après le H1 viennent des H2 pour les grandes parties, puis des H3 pour les subdivisions de chaque H2. On ne passe pas d’un H2 à un H4 : ce serait ouvrir une sous-sous-partie sans sous-partie. Voici le plan de la page d’accueil telle que le chapitre 07 l’a laissée, une fois les balises bien choisies :

• H1 — Le bois, sur mesure, depuis 2009
• H2 — Nos prestations, puis trois H3 : Escaliers, Cuisines, Agencements
• H2 — Ils nous font confiance (témoignages)
• H2 — Parlons de votre projet (appel à devis)

Jamais une balise pour sa taille. C’est l’erreur la plus fréquente : on veut un titre plus petit et l’on choisit H4 « parce que c’est plus petit ». La balise décrit la place du titre dans le plan ; la taille se règle à part, dans l’onglet Style. Un H2 peut faire 24 px si la maquette le demande, il restera un H2 pour Google et pour la personne qui navigue avec un lecteur d’écran.

13.3 — L’élément Titre

Déposez un Titre depuis le panneau (catégorie Éléments atomiques). Son onglet Général tient en quatre champs : le texte du titre, la Balise (Tag, de H1 à H6), un Lien facultatif, et un champ ID qui donne un nom unique à l’élément — il servira aux ancres du chapitre 15. Depuis la version 3.35, le texte s’édite aussi directement sur la toile : un double-clic sur le titre ouvre la saisie en place. Pour un titre, on s’en tient au texte brut ; du gras ou de l’italique à l’intérieur d’un titre nuisent plus qu’ils n’aident.

1. Déposez un Titre dans le Flexbox « Nos prestations » de la page d’accueil, au-dessus des trois blocs.
2. Saisissez le texte Nos prestations, dans le panneau ou par double-clic sur la toile.
3. Choisissez la balise H2 : c’est une grande partie de la page, sous le H1 du bandeau.
4. Passez dans l’onglet Style, section Typographie : famille Playfair Display, taille 36 px, graisse 700, couleur anthracite #2B2B2B.
5. Vérifiez dans la Structure (Ctrl+I, Cmd+I sur Mac) que le Titre est bien l’enfant du bon Flexbox, puis enregistrez avec Ctrl+S.

13.4 — Le Paragraphe et l’Éditeur de texte

Le Paragraphe atomique

Le Paragraphe produit exactement une balise p. Son onglet Général contient le texte et un lien facultatif ; sur la toile, le double-clic permet de sélectionner quelques mots et de les passer en gras ou en italique, ou d’y poser un lien, grâce à une petite barre de mise en forme. Un Paragraphe par paragraphe : si votre texte en compte trois, déposez trois Paragraphes dans un Flexbox en colonne avec un écart de 16 px, ou passez à l’Éditeur de texte. Cette discipline paraît lourde ; elle rend en échange chaque paragraphe déplaçable, stylable et responsive séparément.

L’Éditeur de texte classique

Ce widget ouvre l’éditeur visuel de WordPress, TinyMCE, avec ses deux onglets Visuel et Texte. En mode Visuel, vous disposez des outils d’un traitement de texte simplifié : gras, italique, listes à puces et numérotées, citation, alignement, lien, couleur. En mode Texte, vous voyez le HTML et pouvez y coller un petit tableau ou un code fourni par un tiers. Le widget ajoute deux options rares ailleurs : la mise en Colonnes d’un texte long (deux ou trois colonnes de journal) et la Lettrine (Drop Cap).

C’est un widget classique : il a trois onglets (Contenu, Style, Avancé) et sa typographie de départ vient des Polices globales des Réglages du site (chapitre 19), non des variables atomiques. On l’utilise pour les textes longs ; on ne l’utilise pas pour les titres, car ses titres internes (menu déroulant « Titre 2 », « Titre 3 ») sont bien plus difficiles à styler que des éléments Titre séparés.

13.5 — La typographie dans l’onglet Style

Pour tout élément atomique, la section Typographie (Typography) de l’onglet Style rassemble les mêmes réglages. Les voici dans l’ordre où vous les rencontrez, avec ce qu’un site vitrine en fait.

La famille de police (font family). Le menu regroupe les polices système (celles déjà installées sur l’appareil du visiteur : Arial, Georgia, Verdana…), le catalogue Google Fonts et, en Pro, vos polices personnalisées. La Menuiserie Roche a choisi Playfair Display pour les titres et Source Sans 3 pour le texte : deux familles, pas plus. Chaque famille supplémentaire est un fichier de plus à télécharger.

La taille. Trois unités sont utiles. Le pixel (px) est absolu : 17 px, c’est 17 px partout. L’em se mesure par rapport à la taille de texte de l’élément parent. Le rem (root em) se mesure par rapport à la taille de base du site, 16 px par défaut dans les navigateurs : 1 rem vaut 16 px, 1.5 rem vaut 24 px. Nous recommandons le rem pour le texte courant et les titres : si un visiteur a agrandi la taille de police de son navigateur pour mieux lire, tout votre texte suit. Le pixel reste pratique pour les petits éléments (badges, légendes) et pour les valeurs que vous réglez à l’œil.

La graisse (font weight) : 400 pour le texte normal, 600 ou 700 pour les titres et les mots à faire ressortir. L’interligne (line height) s’exprime sans unité : 1.6 pour un texte courant aéré, 1.1 à 1.2 pour un grand titre sur deux lignes, sinon les lignes se retrouvent trop écartées. L’espacement des lettres (letter spacing) sert surtout aux petits textes en capitales (un léger 0.05 em les rend lisibles) ; on ne le touche pas ailleurs. La transformation (text transform) passe un texte en capitales ou en minuscules sans le retaper ; la décoration (text decoration) souligne — réservez le soulignement aux liens, sinon vos visiteurs cliqueront sur des mots inertes. L’alignement : à gauche pour tout ce qui dépasse deux lignes, centré pour un titre court ou une accroche, jamais justifié sur le web (les espaces irréguliers gênent la lecture). Enfin, la couleur du texte se règle dans la même section.

1. Sélectionnez le Paragraphe du bandeau d’accueil et ouvrez Style › Typographie.
2. Choisissez la famille Source Sans 3 dans la liste (tapez les premières lettres pour filtrer).
3. Réglez la taille : changez l’unité en rem puis saisissez 1.0625 (soit 17 px). Graisse 400, interligne 1.6.
4. Réglez la couleur sur l’anthracite #2B2B2B et l’alignement à gauche.
5. Passez en vue Mobile (Ctrl+Shift+M) : descendez la taille à 1 rem si le texte paraît trop grand. La valeur ordinateur reste inchangée (chapitre 12).

13.6 — Lisibilité : taille, longueur de ligne, contraste

Une belle police mal réglée se lit mal. Trois mesures font la différence, et toutes trois se règlent dans Elementor sans code.

La taille du corps de texte : entre 16 et 18 px sur ordinateur, jamais en dessous de 16 px sur mobile. Les navigateurs de téléphone zooment d’eux-mêmes sur les champs de texte trop petits, ce qui casse la mise en page. Le fil rouge retient 17 px, soit 1,0625 rem.

La longueur de ligne : entre 45 et 75 caractères par ligne, espaces comprises, soit environ 10 à 12 mots. Au-delà, l’œil se perd en revenant à la ligne ; c’est ce qui rend illisible un paragraphe étiré sur toute la largeur d’un écran de 1 920 px. La parade est un réglage de Largeur max (Max width) dans la section Taille de l’onglet Style : 720 px pour un texte de 17 px ; si votre version propose une unité personnalisée, 65ch (l’unité ch vaut à peu près la largeur d’un caractère) fait le même travail en s’adaptant à la police. Appliquez-la au Paragraphe lui-même ou au Flexbox qui contient le texte.

Le contraste entre le texte et son fond. La référence internationale (WCAG, niveau AA) demande un rapport d’au moins 4,5:1 pour le texte courant et 3:1 pour les grands titres. Sur le fond blanc cassé #FAF7F2 de la Menuiserie Roche, l’anthracite #2B2B2B atteint environ 13:1 : parfait pour le corps de texte. Le bois chaud #A8663C plafonne vers 4,2:1 : convenable pour un grand titre, insuffisant pour un texte de 17 px. Le vert sauge #7A9E7E descend à 2,8:1 : à réserver aux fonds, aux filets et aux éléments décoratifs, jamais à un texte. Des vérificateurs de contraste gratuits existent en ligne ; le chapitre 34 en explique l’usage.

Reste le cas du texte posé sur une photo : le contraste change d’une zone à l’autre de l’image, et un titre blanc peut devenir illisible sur un ciel clair. La solution est un voile de couleur entre la photo et le texte ; le chapitre 14 la met en œuvre sur le bandeau d’accueil.

Une échelle typographique pour un site vitrine

Plutôt que de régler chaque titre à l’instinct, fixez une fois pour toutes une échelle : quelques tailles, toujours les mêmes, qui donnent au site son rythme. Celle-ci convient à la plupart des sites de TPE ; adaptez-la à vos polices (Playfair Display, généreuse, supporte des titres un peu plus petits que la moyenne).

Les valeurs en rem supposent la base de 16 px des navigateurs. Les tailles mobiles s’appliquent en vue Mobile (chapitre 12) ; la vue Tablette hérite le plus souvent des valeurs ordinateur sans retouche.

Deux polices, une échelle, un contraste : le reste de la typographie n’est que de la constance.