Catégories
Astuces et Design

19 bibliothèques / plugins JS pour la typographie

La typographie fait partie intégrante de la conception d'un site Web. La typographie et les polices que vous utilisez jouent un rôle énorme dans plusieurs aspects de la conception d'un site Web. Elle affecte des facteurs tels que la lisibilité, l'expérience 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 se familiarisent avec la typographie pour transmettre correctement l'objectif du site Web et son contenu.

Comme pour presque toutes les parties de la conception Web, plusieurs outils sont disponibles pour vous rendre plus efficace. La typographie n'est pas différente.

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

1. FlowType.js

FlowType est un plugin jquery réactif qui vous aide à redimensionner automatiquement la taille de la police en fonction de la largeur d'un élément spécifique. Pour que la typographie du site Web soit lisible, il doit y avoir environ 45 à 75 caractères par ligne. Pour la plupart des écrans avec uniquement des requêtes multimédia CSS, cela peut être difficile à réaliser. Flowtype ajuste la taille de votre 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 "width =" 1856 "height =" 1280 "srcset =" https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/flowtype.png 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/04 / flowtype-300x207.png 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/flowtype-768x530.png 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/04/flowtype-1024x706.png 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

2. Blast.js

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

blast "width =" 1856 "height =" 1280 "srcset =" https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/blast.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/04 / blast-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/blast-768x530.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/04/blast-1024x706.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

3. Textillate.js

Textillate.js est un plugin simple 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 "width =" 1856 "height =" 1280 "srcset =" https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/textillate.png 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/04 / textillate-300x207.png 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/textillate-768x530.png 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/04/textillate-1024x706.png 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

4. Widowtamer.js

Widowtamer.js est un plugin JavaScript qui corrigerait automatiquement les veuves de typographie sur vos pages Web. Le plugin est conçu pour fonctionner uniquement avec des sites réactifs.

widowtamer "width =" 1856 "height =" 1280 "srcset =" https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/widowtamer.png 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/04 / widowtamer-300x207.png 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/widowtamer-768x530.png 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/04/widowtamer-1024x706.png 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

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 "width =" 1856 "height =" 1280 "srcset =" https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/widowfix.png 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/04 / widowfix-300x207.png 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/widowfix-768x530.png 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/04/widowfix-1024x706.png 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

6. Texte de la dalle

Slab Text est un plugin jQuery pour vous aider à créer de gros titres audacieux. Vous pouvez également redimensionner la largeur de votre fenêtre d'affichage afin que, quelle que soit la taille de la fenêtre d'affichage, les combinaisons de mots dans votre titre restent sur la même ligne.

slabtext "width =" 1856 "height =" 1280 "srcset =" https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/slabtext.png 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/04 / slabtext-300x207.png 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/slabtext-768x530.png 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/04/slabtext-1024x706.png 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

7. Kerning.js

Kerning.js est un simple script jQuery qui vous permet de faire évoluer automatiquement votre type Web avec de vraies règles CSS. Il est livré sans dépendances, donc lorsque vous l'ajoutez à votre page Web et ajoutez des règles CSS, votre page sera automatiquement embellie.

crénage "width =" 1856 "height =" 1279 "srcset =" https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/kerning.png 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/04 / kerning-300x207.png 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/kerning-768x529.png 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/04/kerning-1024x706.png 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

8. Lettering.js

Lettering.js est un plugin jQuery pour la typographie Web radicale. Le plugin vous offre un contrôle complet à la lettre. Certaines des choses qui peuvent facilement être effectuées avec Lettering.js sont le type de crénage, la conception éditoriale et le code gérable.

lettrage "width =" 1856 "height =" 1280 "srcset =" https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/lettering.png 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/04 / lettering-300x207.png 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/lettering-768x530.png 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/04/lettering-1024x706.png 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

9. Réaction du dégradé de texte

React Text Gradient 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 dégradés de texte avec CSS. Le composant détectera si un clip d'arrière-plan du site Web est disponible et appliquera ensuite le dégradé sur le texte.

textgradient "width =" 1856 "height =" 1280 "srcset =" https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/textgradient.png 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/04 / textgradient-300x207.png 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/textgradient-768x530.png 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/04/textgradient-1024x706.png 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

10. Typed.js

Typed.js est une bibliothèque JavaScript qui tape des phrases dans un navigateur, les supprime et passe à la chaîne suivante. L'outil est assez facile à utiliser et vous pouvez créer un nombre illimité de chaînes. La bibliothèque est idéale pour raconter des histoires.

tapé "width =" 1856 "height =" 1280 "srcset =" https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/typed.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/04 / typed-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/typed-768x530.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/04/typed-1024x706.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

11. FitText

FitText est un plugin jQuery utilisé pour gonfler le type web. Le plugin redimensionne automatiquement le texte afin qu'il remplisse la largeur d'un élément parent. Le plugin garantit que la mise en page de la page n'est pas rompue, quel que soit le type de navigateur que vous utilisez.

fittext "width =" 1856 "height =" 1280 "srcset =" https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/fittext.png 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/04 / fittext-300x207.png 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/fittext-768x530.png 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/04/fittext-1024x706.png 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

12. TypeButter

TypeButter est un crénage optique pour le Web. Ce plugin vous permet de créer des textes magnifiquement conçus. Typebutter vous permet également de créner vos titres et de supprimer les espaces entre les caractères qui rendent le texte difficile à lire. Tout ce que vous devez faire est d'installer le plugin et vos polices perdraient un espacement inutile.

typebutter "width =" 1856 "height =" 1280 "srcset =" https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/typebutter.png 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/04 / typebutter-300x207.png 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/typebutter-768x530.png 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/04/typebutter-1024x706.png 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

13. Font-To-Width

Font-To-Width est un script qui permet aux textes de tenir dans leurs conteneurs. Au lieu de mettre à l'échelle la taille de la police pour adapter le texte, Font-To-Width choisit une variante de largeur ou de largeur, puis permet des ajustements de lettres et de mots selon les besoins. Notez que ce script est conçu pour les titres ou les courts textes. Il n'est pas destiné à un corps de texte sur 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 en valeurs entières afficheront des erreurs d'arrondi.

fonttowidth "width =" 1856 "height =" 1280 "srcset =" https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/fonttowidth.png 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/04 / fonttowidth-300x207.png 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/fonttowidth-768x530.png 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/04/fonttowidth-1024x706.png 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

14. Font 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 légère jQuery est destinée à être utilisée avec des mises en page CSS réactives ou adaptatives.

fontflex "width =" 1856 "height =" 1280 "srcset =" https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/fontflex.png 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/04 / fontflex-300x207.png 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/fontflex-768x530.png 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/04/fontflex-1024x706.png 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

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 convient pas. Il fonctionne parfaitement avec les publications contenant des images et des polices fixes.

texttailor "width =" 1856 "height =" 1280 "srcset =" https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/texttailor.png 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/04 / texttailor-300x207.png 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/texttailor-768x530.png 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/04/texttailor-1024x706.png 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

16. Type Rendering Mix

Avec Type Rendering Mix, vous pouvez réduire le poids de la police pour les navigateurs qui utilisent Core Text pour rendre le texte. Il vous permet également de désactiver les polices Web lorsqu'aucun anti-aliasing n'est appliqué. Vous pouvez également désactiver les polices Web si elles s'affichent mal avec certains rastérisateurs de texte.

typerenderingmix "width =" 1856 "height =" 1280 "srcset =" https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/typerenderingmix.png 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/04 / typerenderingmix-300x207.png 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/typerenderingmix-768x530.png 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/04/typerenderingmix-1024x706.png 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

17. Textualizer

Textualizer est un plugin jQuery qui transite par des textes de texte tout en animant chaque personnage. Lorsque le texte est en transition, tout caractère commun au texte de présentation suivant est laissé à l'écran et déplacé vers sa nouvelle position. Certains de ses effets sont slideLeft, slideTop, fadeIn et random.

textualizer "width =" 1856 "height =" 1280 "srcset =" https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/textualizer.png 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/04 / textualizer-300x207.png 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/textualizer-768x530.png 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/04/textualizer-1024x706.png 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

18. Jumble

Jumble est un plugin jQuery qui ajoute des couleurs à vos titres et les anime également. Vous pouvez définir des paramètres pour la lecture aléatoire 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 "width =" 1856 "height =" 1280 "srcset =" https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/jumble.png 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/04 / jumble-300x207.png 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/jumble-768x530.png 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/04/jumble-1024x706.png 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

19. Arctext.js

Arctext.js est un plugin jQuery qui vous permet de courber du texte à l'aide de CSS3 & jQuery. Vous pouvez courber le texte jusqu'à un rayon de 300, changer la direction du texte, créer des lettres non pivotées et définir ou animer du texte. Le plugin calculera la bonne rotation de chaque lettre et la répartira sur l'arc du rayon défini.

arctext "width =" 1856 "height =" 1280 "srcset =" https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/arctext.png 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/04 / arctext-300x207.png 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/04/arctext-768x530.png 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/04/arctext-1024x706.png 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p class=

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'appuyer uniquement sur vos compétences peut rendre la typographie Web difficile à contourner. Lorsque vous utilisez les bibliothèques / plugins JS pour la typographie, vous contrôlez l'apparence, la convivialité et la fonction de votre texte. Vous pouvez facilement vous attaquer aux veuves et aux orphelins, ajouter des effets spéciaux et créer une UX conviviale.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *