19 bibliothèques/plugins JS pour la typographie


La typographie fait partie intégrante de la conception des sites web. La typographie et les polices que vous utilisez jouent un rôle énorme dans de multiples aspects de la conception d’un site web. Elles influent sur des facteurs tels que la lisibilité, l’expérience de l’utilisateur et même la longueur perçue d’un article ou d’une page. Il est très important que les concepteurs de sites web utilisent la bonne typographie pour transmettre correctement l’objectif du site web et son contenu.

Comme pour presque tous les aspects de la conception de sites web, il existe plusieurs outils pour vous aider à être plus efficace. La typographie n’est pas différente.

Dans cet article, nous examinerons 20 bibliothèques/plugins JS pour la typographie afin de vous aider à créer des pages web impressionnantes. Certains de ces outils traitent même des choses redoutables comme les veuves et les orphelins.

1. FlowType.js

FlowType est un plugin jquery réactif qui vous aide à redimensionner automatiquement la taille des polices en fonction de la largeur d’un élément spécifique. Pour que la typographie d’un site web soit lisible, il doit y avoir environ 45 à 75 caractères par ligne. Pour la plupart des écrans ne comportant que des requêtes de médias CSS, cela peut être difficile à réaliser. Flowtype ajuste la taille de la police pour garantir un nombre de caractères parfait par ligne, quel que soit le type d’écran ou de navigateur utilisé par le lecteur.

flowtype

2. Blast.js

Blast.js vous permet de faire : animation typographique, juxtaposition, stylisme, recherche et analyse. L’outil vous permet de séparer le texte pour permettre la manipulation typographique. Il intègre des délimiteurs de caractères, de mots, de phrases et d’éléments. Blast permet également de faire correspondre des phrases et des expressions régulières personnalisées.

blast

3. Textillate.js

Textillate.js est un simple plugin pour créer des animations de texte CSS3. Le plugin combine différentes bibliothèques pour aider à appliquer des animations CSS3 à n’importe quel texte. Pour l’utiliser, il vous suffit d’ajouter textillate.js et ses dépendances à votre projet.

textillate

4. Widowtamer.js

Veuve.js est un plugin JavaScript qui corrigerait automatiquement les veuves de la typographie sur vos pages web. Le plugin est conçu pour ne fonctionner qu’avec des sites réactifs.

widowtamer

5. jQuery WidowFix

JQuery WidowFix est un plugin jQuery pour vous aider à réparer les veuves. Il les corrige en ajoutant un espace insécable entre les deux derniers mots. L’outil est léger et facile à utiliser.

widowfix

6. Texte de la dalle

Texte de la dalle est un plugin jQuery pour vous aider à créer de grands titres en gras. Vous pouvez également redimensionner la largeur de votre fenêtre de manière à ce que, quelle que soit la taille de la fenêtre, les combinaisons de mots de votre titre restent sur la même ligne.

slabtext

7. Kerning.js

Kerning.js est un simple script jQuery qui vous permet d’adapter automatiquement votre type de site web à de véritables règles CSS. Il n’a aucune dépendance, de sorte que lorsque vous l’ajoutez à votre page web et que vous ajoutez quelques règles CSS, votre page sera automatiquement embellie.

kerning

8. Lettrage.js

Lettre.js est un plugin jQuery pour la typographie radicale du web. Le plugin vous offre un contrôle complet jusqu’à la lettre. Parmi les choses qui peuvent facilement être faites avec Lettering.js, on trouve le Kerning Type, la conception éditoriale et le code gérable.

lettering

9. Réagir au gradient de texte

Réagir au gradient de texte est un plugin sympa qui vous permet d’ajouter des dégradés de texte à votre site. Il s’agit d’un composant React qui crée des gradients de texte avec le CSS. Le composant détectera si un fond d’écran est disponible et appliquera alors le dégradé sur le texte.

textgradient

10. Dactylographié.js

Dactylographié .js est une bibliothèque JavaScript qui permet de taper des phrases dans un navigateur, de les supprimer et de passer à la chaîne suivante. L’outil est assez facile à utiliser et vous pouvez créer un nombre illimité de chaînes de caractères. La bibliothèque est idéale pour raconter des histoires.

typed

11. FitText

FitText est un plugin jQuery utilisé pour gonfler le type de toile. Le plugin met automatiquement à l’échelle le texte de manière à ce qu’il remplisse la largeur d’un élément parent. Le plugin garantit que la mise en page n’est pas rompue, quel que soit le type de navigateur que vous utilisez.

fittext

12. TypeButter

TypeButter est le crénage optique pour le web. Ce plugin vous permet de créer des textes de belle facture. Le crénage optique vous permet également de Kern vos titres et supprime les espaces entre les caractères qui rendent le texte difficile à lire. Il vous suffit d’installer le plugin pour que vos polices perdent des espaces inutiles.

typebutter

13. Font-To-Width

Font-To-Width est un script qui permet aux textes de tenir dans leur contenant. Au lieu de mettre à l’échelle la taille de la police pour que le texte s’y adapte, Font-To-Width choisit une largeur ou une variante de largeur et permet ensuite d’ajuster les lettres et les mots selon les besoins. Notez que ce script est fait pour les titres ou les courts textes. Il n’est pas conçu pour les corps de texte de plusieurs lignes. Il fonctionne également mieux dans les navigateurs qui prennent en charge l’espacement des sous-pixels comme Chrome. Les navigateurs qui arrondissent les espaces à des valeurs entières présenteront des erreurs d’arrondi.

fonttowidth

14. Police Flex

Font Flex est un plugin jQuery pour les tailles de police dynamiques. Le plugin rend votre texte flexible et adaptable à n’importe quel écran. L’extension jQuery, légère, est destinée à être utilisée avec des mises en page CSS réactives ou adaptatives.

fontflex

15. TextTailor.js

TextTailor.js est un plugin jQuery qui permet au texte de remplir la hauteur de l’élément parent ou de le tronquer lorsqu’il ne correspond pas. Il fonctionne parfaitement avec les messages qui comportent des images et des polices fixes.

texttailor

16. Type Rendering Mix

Avec Type Rendering MixVous pouvez réduire la taille de la police pour les navigateurs qui utilisent Core Text pour le rendu du texte. Il vous permet également de désactiver les polices Web lorsqu’aucun anticrénelage n’est appliqué. Vous pouvez également désactiver les polices web si leur rendu est mauvais avec certains rasterizers de texte.

typerenderingmix

17. Textualiseur

Textualizer est un plugin jQuery qui permet d’effectuer des transitions entre des flous de texte tout en animant chaque personnage. Lorsque le texte est en transition, tout caractère commun au prochain flou est laissé à l’écran et déplacé dans sa nouvelle position. Certains des effets qu’il produit sont le glisser-Gauche, le glisser-Haut, le fondu-enchaîné et l’aléatoire.

textualizer

18. Jumble

Jumble est un plugin jQuery qui ajoute des couleurs à vos titres et les anime également. Vous pouvez paramétrer le mélange des couleurs en fonction de la luminosité et de la teinte de saturation. Vous disposez également d’une bonne gamme de couleurs que vous pouvez mélanger.

pêle-mêle

19. Arctext.js

Arctext.js est un plugin jQuery qui vous permet de courber du texte en utilisant CSS3 & jQuery. Vous pouvez courber du texte jusqu’à un rayon de 300, changer la direction du texte, créer des lettres sans rotation, et définir ou animer du texte. Le plugin calculera la rotation correcte de chaque lettre et la répartira sur l’arc du rayon fixé.

arctext

Explorer la typographie avec différentes bibliothèques/plugins JS

En tant que développeur web, vous devez disposer d’un arsenal d’outils pour être efficace et tirer le meilleur parti de vos conceptions web.

S’en remettre uniquement à vos compétences peut rendre la typographie sur le web difficile à contourner. Lorsque vous utilisez les bibliothèques/plugins JS pour la typographie, vous avez le contrôle sur l’apparence, la sensation et la fonction de votre texte. Vous pouvez facilement vous attaquer aux veuves et aux orphelins, ajouter des effets spéciaux et créer un UX convivial.