Typographies : Le guide pour bien démarrer sur Showit (en 2023)
Voyons aujourd’hui l’essentiel de ce que vous avez besoin de savoir pour bien commencer à utiliser vos typographies Showit.
Je vous rassure tout de suite, cela n’a rien de compliqué.
La meilleure partie ?
Pour rendre cet article le plus visuel possible, j’ai intégré beaucoup de captures d’écran.
Nous allons parcourir tous les points importants concernant les typographies sur Showit. Et si à la fin de cet article, vous avez encore des questions, vous pourrez me les poser en commentaire.
C’est parti !
Les définitions
Commençons par les définitions, histoire d’être sur la même longueur d’ondes dès le début.
Typographie
Une typographie, c’est le résultat du choix de vos polices de caractères, les fontes, l’espace entre les lettres, entre les lignes, la graisse, etc.
L’ensemble de vos typographies vous permet de présenter le texte de manière à refléter votre personnalité de marque.
Polices (en anglais font family ou typeface)
Une police, c’est un ensemble de toutes les lettres et signes qui composent un assortiment de caractères d’imprimerie de même famille. Elle peut contenir plusieurs déclinaisons qui se différencient par la graisse (Extra light, Light, Bold, Regular, etc) et/ou le style (Italique, Romain, etc)
Exemple : Poppins, Arial, Time New Roman
Les fontes (en anglais fonts)
En revanche, une fonte de caractères est un ensemble de glyphes (représentations visuelles d’un caractère), de même style, corps et graisse.
C’est le terme “Font” que vous retrouvez dans Showit. Et effectivement, ce sont des fontes de caractère.
Exemple : Typographie des titres H1 (Title dans Showit)
Maintenant que vous avez le vocabulaire de base, voyons maintenant comment utiliser vos typographies dans Showit.
Typographies Showit : Choisir la bonne licence pour les polices de votre site Showit
Il existe plusieurs types de licences. Chacun donne droit à un usage en particulier.
Pour votre propre site web, vous pouvez prendre une licence incluant le droit d’utilisation sur un site web.
Le prix des licences web varie en fonction du nombre de pages vues du site web dans le mois. Vous devez penser à rester conforme à la capacité de vos licences.
Note : Aux designers qui passent par là : attention, une licence web n’est pas suffisante pour l’utilisation de la police sur un template Showit.
Attention aux polices gratuites
Plusieurs polices de caractère sont gratuites, mais la gratuité ne s’applique pas toujours à tous les usages. Vous verrez par exemple des polices gratuites pour un usage personnel, mais n’incluant pas un usage commercial.
Polices présentes sur les templates Showit
Lorsque vous achetez des templates, ceux-ci peuvent parfois utiliser des typographies comprenant des polices payantes. Vous devez vous assurer que le designer a bien la licence adéquate pour l’utilisation sur un template.
Si ce n’est pas le cas, et que vous souhaitez conserver ces typographies sur votre site, vous devrez acheter la licence pour utiliser les fontes associées.
Si vous achetez votre template sur mon site, ou sur la boutique officielle de Showit, vous pouvez être tranquille, les templates ont la bonne licence. Vous pouvez les utiliser sur votre site sans avoir à l’acheter.
Attention : La licence du template ne vous donne pas le droit d’utiliser les polices en dehors de Showit. Pour cela, vous devrez chercher un autre licence.
Enregistrer ses typographie sur Showit
Pour enregistrer des typographies par défaut, et garder une cohérence visuelle, Showit donne la possibilité de sauvegarder des “Styles de texte”.
Vous pouvez définir une typographie pour les éléments suivants :
- Title : Ce type de texte désigne le titre principal d’une page. En HTML cela correspond à une balise H1.
- Heading : Ce type de texte est utilisé pour un titre de section. Il correspond à une balise HTML H2.
- Subheading : Ce type de texte est utilisé pour les sous-titre de section. Il correspond à une balise HTML H3.
Paragraph : Celui-là se passe de traduction. Il correspond à une balise HTML p (comme paragraphe)
Comment définir les typographies par défaut dans Showit
- Cliquez sur “Design settings” sur l’onglet site, en haut à Gauche de l’écran.
- Modifier tour à tour les propriétés des quatre styles de texte (Title, Heading, Subheading, Paragraph)
Typographies Showit : Comment ajouter des polices sur mon site
Pour pouvoir utiliser une police sur un site Showit, elle doit déjà être présente sur la plateforme.
Par défaut, Showit inclut toutes les polices Google. Vous pouvez donc les ajouter directement à votre site web sans avoir à les importer.
Pour toute police autre que les polices Google, vous devez d’abord les importer dans votre bibliothèque avant de pouvoir les utiliser sur votre site web. Je vous montre plus bas comment procéder.
La bibliothèque Showit
Vous pouvez accéder à votre bibliothèque de fichiers Showit depuis n’importe lequel de vos projets, car elle est unique pour chaque compte Showit.
Avec le temps, vous risquez d’avoir beaucoup de fichiers sur votre compte Showit. Pour cela, je recommande d’avoir un répertoire dédié pour vos polices d’écriture.
Créer un répertoire dans sa bibliothèque de fichier Showit
- Cliquer sur “Media Library” sur l’onget “Site” en haut à gauche de l’écran
Cliquer sur “Add New Folder”. Puis dans l’onglet qui s’affiche, ajouter le nom du dossier (par exemple Typos, ou Fonts). Cliquer sur “Add”
Le format de fichier pour importer une typographie dans Showit
Pour importer une police dans Showit, vous devez l’avoir au format .woff.
Définition : Le Web Open Font Format (WOFF) est un format de police de caractère comprimée pour un usage sur les sites web. Le format utilise la compression zlib, ce qui permet d’avoir une réduction de taille de fichier de plus de 40 %.
4.3. Importer des polices externes sur votre compte Showit
Pour importer des polices autres que les polices Google sur votre site, procédez comme suit.
- Ouvrir votre application Showit.
- Cliquer sur la librairie “Media Library”.
- Sélectionner le répertoire dans lequel vous souhaitez importer votre police.
Le répertoire sélectionné s’affiche en bleu.
Vous pouvez glisser-déposer votre fichier ou cliquer sur le bouton “Upload Files”.
Note : Dans un répertoire vide vous avez également le bouton “Choose Files to Upload”
Comment ajouter une police Google à votre site Showit
- Cliquez sur “Design settings” sur l’onglet site, en haut à Gauche de l’écran.
- Dans la fenêtre qui s’ouvre, cliquez sur l’onglet “Fonts”.
- Choisir la police dans la liste déroulante “Font Name”.
- Choisir la fonte dans la liste déroulante “Style”
- Cliquer sur “Add Google Font”.
La liste des fontes actives sur le site est affichée à gauche.
- Cliquer sur le bouton “Save” pour enregistrer les changements.
Comment ajouter une police externe à votre site Showit
- Choisir la fonte dans la liste déroulante “Library WOFF” (elle doit être dans votre bibliothèque pour s’afficher ici).
- Renseigner un nom clair pour la reconnaitre.
- Cocher la case pour confirmer que vous avez une licence pour utiliser cette police.
- Cliquer sur “Add Custom Font”.
- La liste des fontes actives sur le site est affichée à gauche.
- Cliquer sur le bouton “Save”.
Note : Changer le format d’un fichier de police.
Si vous avez une police dans un un autre format que .woff, vous pouvez utiliser une application ou un outil en ligne. Vous pouvez par exemple utilisé le site https://convertio.co/fr/ pour avoir le format de fichier souhaité.
Comment supprimer une police de son site Showit
- Cliquez sur “Design settings” sur l’onglet site, en haut à Gauche de l’écran.
- Aller sur l’onglet “Fonts”
- Dans la liste de gauche, cliquer sur la petite croix correspondant à la fonte que vous souhaitez supprimer.
- Cliquer sur le bouton “Save”
Les bonnes pratiques concernant l’usage de typographies dans Showit
Voici quelques bonnes pratiques à retenir :
- N’utilisez sur Showit que des polices pour lesquelles vous avez la licence adéquate.
- Ne conservez pas de fontes non utilisées sur votre site.
- Ne laissez pas de texte sans fonte affectée.
- Hiérarchiser vos typographies avec les types de textes.
- Utilisez des polices web safe (qui s’affichent sur tous les navigateurs et appareils).
- Vérifiez la lisibilité sur tous les appareils.
Comment appliquer une typographie sur un texte Showit
Pour appliquer une fonte à un texte Showit, vous devez changer sa propriété “Font”.
Dans l’exemple ci-dessous, on a appliqué la fonte “Arial Bold”.
Vous pouvez également appliquer un des quatre styles (typographies) par défaut. Chaque Style correspond à un ensemble de paramètres de style, dont la fonte utilisée.
FAQ - Les typographies Showit
Pour l’heure, il n’est pas possible d’utiliser les polices Adobe sur Showit. Vous pouvez utiliser librement les 100+ polices Google disponibles ou importer des polices, en vérifiant que vous avez la bonne licence.
Le format de fichier requis pour importer des polices sur Showit est .woff.
Il existe de nombreux sites pour se procurer des polices pour votre site Showit. Les plus connus sont Creative Market, Envato Element, DaFont, et Font Squirel (ce dernier est 100% gratuit).
Pour importer des polices sur Showit, vous devez aller dans votre bibliothèque et importer les fichiers woff. Il est recommandé de créer un dossier dédié aux fichiers des fontes.
Vous pouvez ajouter à votre site web autant de polices que vous souhaitez. Il est tout de même recommandé de ne pas garder des fontes non utilisées, pour ne pas alourdir votre site inutilement.
Conclusion
Grâce à ce post “Typographies : le guide pour bien démarrer sur Showit en 2023”, vous n’avez plus besoin de faire mille recherches sur Google.
Vous avez tout au même endroit.
Vous savez comment ajouter des polices Google sur Showit.
Comment ajouter des polices custom sur Showit.
Quel format est requis.
Comment convertir des formats de police en .woff
Quelle licence il vous faut.
Etc.
Maintenant, j’aimerais avoir votre avis.
Êtes-vous plutôt team Google Fonts ou polices “custom” ?
Dites-le-moi en commentaire.
Commentaires