Texte de la vidéo :
Bonjour à tous. Alors aujourd’hui, nous allons parler de typographie, de police de caractère et de taille. Alors oui, je sais, vous allez me dire : « La taille n’a pas beaucoup d’importance », mais dans ce cas précis, oui. Bon, je sais, typographie, c’est pas un terme qui a l’air très excitant, mais croyez-moi, pour le succès de votre site web, c’est quelque chose d’essentiel. En plus, les règles que je vous ai dictées ici sont relativement simples et rapides à assimiler. Donc, il y a vraiment pas de quoi se prendre la tête.
Alors première règle de base concernant les polices de caractère : pas plus de deux polices de caractère pour votre site web. Alors moi, je vous avoue personnellement, j’utilise parfois une seule police de caractère pour l’ensemble de mon site web. Mais pour l’exemple, pour le tuto ici, nous allons utiliser deux polices de caractère. Nous allons donc avoir une police de caractère dédiée au titre, ce qu’on nomme les H1, H2, H3 — titre 1, titre 2, titre 3 — et nous allons également avoir une autre police de caractère pour tout ce qui est contenu ou paragraphe.
Pour vous montrer rapidement en quoi consistent les titres H1, H2, H3 et les paragraphes, nous allons voir un petit peu ici à partir d’un article de mon blog sur le site toptutorweb.com. Nous voici donc sur un article de blog. Regardez ici en haut : vous avez le titre principal, le titre de l’article, le titre H1. Je vous rappelle : un seul titre H1 par article et par page. C’est un indicateur important pour Google. Donc pensez à placer des mots-clés afin d’expliquer à Google de quoi va parler votre article.
Ensuite, nous avons une photo. Et lorsque nous descendons, nous avons à ce moment-là l’article. Dans cet article, il y a effectivement tout le contenu, mais ce contenu est chapitré. Nous avons ici, par exemple, un titre H2 : « Quelle longueur pour un article de blog avec un contenu ou un petit paragraphe ? ». Nous avons un autre titre H2 : « L’essentiel à retenir ». De nouveau un paragraphe. Ici, nous avons un autre titre H2 avec de nouveau un paragraphe. Ici, nous avons un titre H3, donc un sous-titre de ce titre H2. Donc le sous-titre H3. Ce qui compte vraiment pour Google, là à ce moment-là, nous avons un ensemble de paragraphes de contenu ici, 3, 4, 5, 6, 7. Et ensuite, nous avons de nouveau un H2, un titre 2, avec du contenu. De nouveau un titre H2, de nouveau du contenu. Et ensuite, nous arrivons ici en bas de l’article dans lequel nous allons avoir un dernier H2 : « Conclusion » et un autre H2 : « Glossaire ».
Donc vraiment, votre site est bien séquencé. Généralement, un article, c’est avant tout un titre H1, et ensuite des titres H2, et éventuellement, occasionnellement, un titre H3. Voyons concrètement sur le créateur de site Dustinger comment cela se présente.
Nous sommes de retour sur le site que nous avions créé ensemble, le fameux site pour la créatrice de bijoux. Et au niveau de la police de caractère, nous allons faire directement des réglages par défaut. Vous allez voir, ça va vous simplifier la vie et ça va vous permettre d’avoir une certaine uniformité, par exemple, au niveau de vos articles.
Alors on va commencer avec les polices de caractère. Au niveau d’un site web, je vous ai dit, je vous conseille deux polices de caractère maximum pour votre site web. Pour le choix de ces polices de caractère, nous allons ici sur la gauche. Vous avez « style du site web », vous cliquez sur le bouton. Vous avez quatre options possibles : couleur, police, bouton, animation. Ce qui va nous intéresser ici, ce sont les polices de caractère. Je sélectionne donc « police ».
Et ici, dans le cadre bleu, vous avez les polices par défaut qui ont été sélectionnées lors de la création, lorsque l’intelligence artificielle a créé votre site web. Donc cette intelligence artificielle a choisi, au niveau des titres, du Roboto, et pour tout ce qui est paragraphe et contenu, elle a choisi la police de caractère Lato. Vous avez plusieurs options qui sont proposées ici également, donc vous pouvez modifier. On a bien les titres qui sont en Roboto, et ici le contenu, le paragraphe, qui est avec la police de caractère Lato. Vous pourriez choisir éventuellement Poppins, mais regardez ici : vous avez en gras Poppins. Ça veut dire que tout ce qui est titre est en Poppins, police de caractère Poppins, mais également les textes de paragraphe sont également en Poppins. Donc ici, nous avons une seule police de caractère pour l’ensemble du site.
Je sélectionne Poppins, je clique sur réinitialiser, et voilà : tout est passé en Poppins. C’est la seule police de caractère qui est présente sur votre site. Ou vous pouvez dire : « Ben non, ça ne me convient pas. Je voudrais, par exemple, les titres en Grotesque et les textes de paragraphe en Montserrat. » Vous sélectionnez, et voilà : vous avez les titres qui sont passés en Grotesque, et vous avez automatiquement le contenu qui est passé en Montserrat.
Alors personnellement, moi, je remonte. Je vais resélectionner Roboto et Lato. Pourquoi ? Parce que Roboto me convient parfaitement au niveau des titres. Par contre, au niveau des paragraphes, au niveau du contenu, le Lato, je n’aime pas trop. Je voudrais une autre police de caractère. Donc je clique tout simplement ici sur « personnaliser la typographie ». J’arrive sur un nouveau menu. Il y a « Titre », « Titre Roboto » : ça me convient parfaitement. Où je pourrais sélectionner et dire : « Non, je veux une autre police de caractère », mais je vais laisser actuellement le Roboto.
Par contre, au niveau des paragraphes et du contenu, le Lato ne me convient pas. Donc je sélectionne Lato, je clique sur la petite flèche ici, Lato. Et dans le cadre blanc ici, je vais taper Tahoma. Voilà, il propose également du Tahoma. Je sélectionne donc. Regardez automatiquement ici mon texte est passé en Tahoma. Au niveau texte, vous avez largement le choix, il y a de quoi faire, hein ? Mais personnellement, je reste en Tahoma.
Donc au niveau du contenu, le Tahoma, c’est ma police de caractère. Et ici, nous avons trois paragraphes : paragraphe 1. Là, j’ai du Tahoma à 18 pixels. Ça me convient parfaitement pour le paragraphe 2. En fait, je n’utilise jamais du paragraphe 2. Tous mes contenus sont systématiquement en paragraphe 1, 18 pixels. Alors éventuellement, vous pourriez décider à certains moments que dans votre texte il puisse apparaître, je sais pas, une citation, et par exemple à ce moment-là, vous décidez que la citation soit écrite en plus petit, par exemple en 16 pixels. Idem pour le paragraphe 3. Là, on tombe à 14 pixels. Mais dites-vous une chose : généralement, le contenu, ce sera toujours le paragraphe 1, 18 pixels, avec la police de caractère que vous aurez choisie. Donc le contenu paragraphe 1 par défaut sera à 18 pixels.
Je peux fermer momentanément le style du site web, et je vais carrément créer un article histoire de voir un petit peu ce que ça donne et trouver la bonne dimension pour mes futurs titres. Alors pour créer un article, je vais tout simplement aller ici sur « menu du site ». Je vais ajouter une page. Je vais tout simplement mettre une page vide. Vous voyez ici, il y a plein de modèles qui sont disponibles, mais on va prendre une page vide. Cette nouvelle page vide vient d’apparaître dans le menu. « Nouvelle page vide » — on va changer le nom. Je vais taper, par exemple, « Typo », et voilà le nom a été changé dans le menu. On a bien « Tipo ». Je clique sur sauvegarder. On peut rajouter image sociale, mot de passe, mais dans le cadre de notre tutoriel, ça n’a aucune importance. Donc je clique sur sauvegarder. Je peux fermer le menu du site, et nous sommes ici sur la nouvelle page. Donc j’ai créé une page vide.
On a donc ici l’entête avec le menu, le logo, les réseaux sociaux. On a ici le pied de page. On va donc glisser entre les deux une section. Donc je me place juste entre les deux, et regardez : on a un bouton « ajouter une section ». Je sélectionne. Pour cette section, toujours le même topo. On peut rajouter plein de choses : des services, des catégories de produits, formulaires de contact… Et à chaque fois, vous avez des modèles disponibles. Vous choisissez le modèle que vous désirez. Ici, on va juste ajouter une section vide. Voilà, la section est rajoutée. Je pourrais rajouter une section en dessous et dire, par exemple : « J’ai besoin d’un formulaire de contact ». Je choisis, par exemple, ce formulaire de contact. Non, celui-là, ce formulaire de contact. Et voilà. Regardez, j’ai ma section vide ici, et ici j’ai une section formulaire de contact. On va travailler ici avec la section vide.
Je veux donc rédiger un article. Je vais d’abord cliquer sur le plus, je vais mettre texte, je relâche. Alors au niveau du texte, ce que je vais mettre, mais c’est d’abord le titre de l’article : « 10 bonnes raisons de posséder un site web ». Je vais agrandir, c’est un titre. Je vais le mettre ici. Regardez un petit peu tous les repères qui s’affichent pour vous aider. C’est très bien. Je vais maintenant remonter mon titre, et je vais également… Je vais cliquer dans modifier le texte. On a bien du Roboto. C’est un titre, mais pour l’instant, c’est beaucoup trop grand. Mais rassurez-vous, on va tout modéliser dans un instant. Ce qui m’intéresse, c’est de le centrer. Voilà, il est centré.
Ensuite, maintenant que j’ai le titre de l’article, je vais cliquer sur le plus et je vais rajouter, par exemple, une image. Je glisse une image. Je peux fermer ceci. Je vais agrandir l’image pour que ça prenne toute la taille au niveau de la page. Alors cette image ne me convient pas, une image mise par défaut. Donc modifier l’image, remplacer l’image. Je vais prendre cette image qui existe déjà par défaut ici, celle qu’on a déjà mise en page d’accueil. C’est juste pour l’exemple. Voilà, sélectionner. Au niveau du style, je pourrais décider de réinitialiser les proportions. C’est très bien. Je mets pas d’action au niveau de la forme. Allez, je vais mettre une forme comme ça. Et je peux fermer pour l’instant.
Alors là, je manque de place. Regardez au niveau de la section. J’ai besoin de placer du texte en dessous. Donc je vais ici sur le petit curseur hauteur de la section et j’agrandis ma section. Bon, j’ai besoin de l’agrandir encore plus. OK. Je vais maintenant placer tout mon article. Je clique sur plus, texte, je relâche, j’agrandis de chaque côté ici. Je le monte, modifier le texte. Je supprime ceci, et je colle mon article. Coller.
Alors l’article est bien sélectionné. L’article fait toute la largeur, c’est très bien. Par contre, la section est un peu trop grande. Donc je clique ici, je réduis la taille de ma section. Voilà, ce qui me permet d’avoir mon formulaire de contact qui apparaît juste en dessous. Et maintenant, je sélectionne un petit peu tout mon texte. La couleur, ça me convient parfaitement. Maintenant, au niveau du style, au niveau du style, il m’a mis un paragraphe numéro 2. Et je vous ai dit : moi, le contenu, je le veux que ce soit en paragraphe 1. Donc il soit automatiquement mis à 18 pixels. Je clique sur paragraphe 1, et boum ! Tout mon contenu automatiquement, regardez, il est passé en Tahoma 18 pixels. Tahoma 18 pixels. Par contre, je voudrais qu’il soit justifié. Regardez ici, alignement du texte, je clique sur justifier. Regardez bien ici à droite… Boum ! Voilà, c’est quand même beaucoup plus esthétique.
Donc voilà l’article en question. Tout le contenu était placé. Par contre, regardez ici : « Être visible en ligne », « Toucher un plus large public », « Être crédible et professionnel »… Tout ça, ça pourrait devenir des titres 2. Donc on a déjà notre titre 1. Ici, on a maintenant ici je sélectionne « Être visible en ligne » et je clique tout simplement ici sur titre 2. Par contre, regardez-moi ça ici. Celui-ci, modifier le texte. Je vais le mettre en titre 1. Alors vous avez vu tout de suite le problème. Regardez la taille des titres. Ils sont beaucoup trop grands.
Donc quand je clique sur titre 1, titre 2 ou titre 3, je voudrais que ces titres soient directement à la bonne taille. Pour ce faire, je vais donc sélectionner ici, modifier le texte. Je sélectionne donc mon titre ici, titre 2. Et le titre 2, ben il est beaucoup trop grand. Alors je vais le réduire. Alors je vais le réduire, par exemple, à… on va par exemple le mettre à 32. 32, c’est pas mal. Ça donne pas mal. Donc 32, ça me convient parfaitement. Mais évidemment, j’ai pas envie à chaque fois de sélectionner, de mettre un titre 2, de devoir retourner ici et de passer à 32. Je voudrais que tout soit mémorisé.
Pour ce faire, je vais donc dans style de texte, modifier. Je tombe directement ici au niveau de mes titres, Roboto. Et là, nous sommes sur le titre 2. Donc je dis voilà : je veux que mes titres 2 soient à 32 pixels. De cette manière, il a mémorisé dorénavant. Avant tous mes titres 2 seront à 32 pixels. Et tant que j’y suis, ben je vais modifier directement le titre 3. Titre 3 par défaut est à 48. Non, c’est beaucoup, beaucoup trop grand. Si le titre 2 est à 32 pixels, je vais mettre celui-ci… il propose 24 pixels. Non, euh, je vais le placer à 28 pixels. Donc là, ici, dans le 48, je tape 28. Super. Donc titre 2, 32 ; titre 3, 28 pixels. Titre 4, on va mettre à 24 pixels. Est-ce que j’ai un… oui, j’ai un 24 pixels ici. Très bien. Et puis les titres 5 et titre 6, je ne les utilise jamais. Donc à la rigueur, je me soucie fort peu. Je vais également les mettre à 24 pixels. Mais ce que j’utilise toujours, ce sont les titres 1, titres 2 et parfois le titre 3.
Par contre, on a regardé ici le titre 1, c’est un peu catastrophique. Alors titre 1, on est à 80 pixels. C’est beaucoup trop grand. 48, ça me paraît excessif également. Je vais le mettre à 36. Donc je sélectionne, je clique sur le 48, je tape 36, je le sélectionne, et voilà. Comme ça, automatiquement, tous mes titres 1 seront à 36 pixels. Je peux fermer ceci pour l’instant. Le titre a été modifié. Je peux du coup remonter la photo. Je peux également remonter mon article.
Nous sommes donc ici, « Être visible », modifier le texte. Voilà, « Être visible », et je vais le mettre en titre 2. Je vais également mettre en titre 2 pour celui-ci : « Être crédible et professionnel », titre 2. Fidéliser vos clients. Tout simplement, vous cliquez ici, titre 2. À partir du moment où vous avez formaté automatiquement vos titres et vos paragraphes, il suffit d’aller ici et de sélectionner le modèle que vous avez préformaté juste à l’instant ici dans les réglages de site de side web. Donc on fait ça avec le 5, avec le 6, avec le 7. On va jusqu’au 10. Titre 2. Et à la rigueur ici, conclusion, mais je pourrais le mettre en titre 3.
Vous avez vu, c’est relativement simple, hein ? C’est comme ça qu’on utilise tout simplement les réglages par défaut que vous allez créer, générer, choisir vous-même votre police de caractère et choisir la taille qu’auront chacun de vos titres, chacun de vos paragraphes.
Nous avons donc terminé les réglages des polices de caractère sur la version ordinateur. Mais nous pouvons également le faire pour la partie mobile. C’est exactement le même concept. On fait ça très rapidement. Donc ici en haut, on est bien sur le créateur de site Hostinger, version web. Et on va cliquer sur la partie mobile. Nous avons la version mobile. Et regardez au niveau téléphone : ben les titres, ils sont beaucoup trop grands. Idem ici, les titres sont trop grands. À la rigueur, même le texte est un peu trop grand.
Alors ce que nous allons faire, ça va être très rapide. On va sélectionner, par exemple, le titre ici, modifier le texte. On est sur le titre 1, mais version téléphone. Je clique sur la petite flèche. Donc pour l’instant, c’est du 44. C’est trop grand. Je clique sur modifier. On est bien sur le Roboto. On est bien à du 44 pixels pour le titre 1. Je sélectionne, je vais descendre à 24. C’est un peu petit. 32. 32, ça me paraît déjà meilleur. Donc OK pour le titre 1. Je valide Roboto 32 pixels. Je vais remonter mon image.
Ensuite, je remonte mon article. Au niveau de l’article, je reste dans modifier le texte. Il est descendu tout en bas. On retourne dans le style, on retourne dans modifier. Là, on est bien sur les parties paragraphe. On est bien sur le paragraphe numéro 1. On est bien à 18 pixels. Mais c’est un peu trop grand. Je vais réduire, par exemple, à 16 pixels. Parfait. 16 pixels, c’est vraiment très bien. On va faire en même temps le paragraphe numéro 2, 16 pixels, et paragraphe numéro 3, je vais également le mettre à 16 pixels. Le réglage est fait.
Maintenant, on va s’occuper des titres 2. Donc le titre 2 ici, je clique sur la petite flèche, je clique sur modifier. Là, le titre 2 est à 36 pixels. C’est de trop. On va le mettre à 24 pixels. Ça a l’air pas mal, 24 pixels. Ça me plaît bien. Je vais en profiter pour faire également le titre 3. Titre 3, je vais passer à 22 pixels. Sélectionner le titre 4, je vais le passer à 20 pixels. Je mets 20. Je sélectionne titre 5, je vais le mettre à 18 pixels. Et le titre 6, je vais le mettre carrément à 16 pixels. OK. Tous les réglages sont faits. Je peux fermer. Je vérifie, et regardez automatiquement, donc par exemple ici pour les titres 2, ils sont tous passés en 24 pixels. Et ici, j’ai mon titre 1 qui est passé. Donc je le sélectionne, titre 1, qui est passé à 32 pixels. Donc dorénavant, tous les autres articles que je vais écrire, lorsqu’ils vont être sur la version ordinateur, ils vont être systématiquement mis à Roboto 36 pixels, par exemple pour le titre 1. Et si je vais sur la partie mobile, tous mes titres 1 vont être systématiquement mis en Roboto, mais cette fois-ci en 32 pixels. Donc il va bien mémoriser les tailles que vous allez choisir selon que vous êtes sur la version mobile ou selon vous êtes sur la version ordinateur.
Et ce qui est bien, c’est que le prochain article que vous allez écrire, vous n’aurez plus besoin de faire tous ces réglages. Vous allez tous les faire en version ordinateur. Et quand vous allez passer sur la version mobile, eh bien automatiquement toutes les tailles de police de caractère vont s’adapter selon la version mobile. Vous n’aurez plus besoin de travailler. Vous faites juste vos articles sur l’ordinateur, et automatiquement ils vont être adaptés pour la version mobile selon les réglages qu’on a fait ensemble.
Maintenant, nous retournons sur la page d’accueil. Et comme vous le voyez ici, vous pouvez éventuellement personnaliser certains de vos titres. Là, on a Dokuso. Je sélectionne, modifier le texte, et vous voyez au niveau du style, c’est pas un titre 1, 2, 3, 4, 5, 6 ou un paragraphe. C’est tout simplement marqué personnalisé. Donc j’ai choisi ma police de caractère. Je garde le Roboto, mais par contre, j’ai personnalisé la taille. Je l’ai mis à 72. Où j’aurais pu dire : « Non, je veux que ce soit un titre 1 », et là, mais je remets en blanc, et là il me le met en Roboto 36. Mais c’est vrai que pour la page d’accueil, 36 est un peu petit. Là, je dis : « Non, je vais le mettre carrément en 72 », et là, je quitte le titre H1, et il me l’a mis en personnalisé.
Même chose ici pour les bijoux. Il a mis style personnalisé. Et bien sûr, il m’a passé en Roboto 64. Donc comme vous l’avez compris, au niveau des polices de caractère et au niveau des tailles, que ce soit les titres ou les contenus, vous pouvez décider vous-même les formater à l’avance. Et bien sûr, vous n’êtes pas fixé par les préformatages. Vous pouvez personnaliser chacun des titres et chacun des contenus que vous rajoutez, que ce soit en page d’accueil ou que ce soit sur une autre page. Mais au moins, par exemple, pour la rédaction des articles, vous avez tout qui est préformaté. Et ça veut dire que tous vos articles auront la même taille au niveau des polices de caractère. De l’uniformité, c’est quand même important. Lorsque les gens vont visiter votre site web, qu’ils reconnaissent automatiquement votre petite touche personnelle. C’est chaque fois la même police de caractère, c’est chaque fois la même taille au niveau des titres, avec toujours la photo placée au même endroit.
Si vous commencez à modifier les polices de caractère, les tailles, les emplacements et autres à chacun de vos articles et à chacune de vos pages, ça va commencer à poser des problèmes, et ça manque totalement de professionnalisme.
Si vous avez des questions, comme d’habitude, vous n’hésitez pas en bas dans les commentaires. On se retrouve très bientôt pour un nouveau tutoriel. Et d’ici là, je vous souhaite bien sûr le meilleur qui soit. Allez, bye-bye !
