15 outils, bibliothèques et cadres de typographie Web utiles

Faire face à la typographie sur le web a été vraiment bizarre. Chaque navigateur a son propre algorithme pour rendre les polices ce qui pourrait conduire à des divergences inattendues. Vous ne pouvez utiliser que quelques propriétés CSS pour contrôler certaines polices, telles que le crénage, le lissage des polices, la création de lettres DropCaps, etc. De plus, nous devons faire face à de nombreux problèmes de mise en page en ce qui concerne les polices..

La bonne nouvelle est qu'il existe des ressources que vous pouvez utiliser pour prendre le volant en ce qui concerne la typographie de sites Web. Voici 15 outils web, bibliothèques et frameworks vous pouvez utiliser à cette fin.

Plus sur Hongkiat:

9 plugins WordPress pour faire plus avec vos polices
20 meilleurs plugins de typographie WordPress pour améliorer la lisibilité
Icônes d'interface utilisateur de meilleure qualité et plus claires avec les polices Web

TypeRendu

En un mot, TypeRendu fonctionne de manière similaire à Modernizr, sauf qu’il identifie uniquement le moteur de navigateur pour le rendu des polices. Cette bibliothèque ajoute des classes personnalisées basées sur ses découvertes, qui peuvent être utilisées pour appliquer des règles de style spécifiques pour le rendu de type..

KerningJS

Le crénage n'est pas encore personnalisable pour une utilisation sur le Web - police de caractères le support est encore médiocre pour le moment - mais une nouvelle propriété standard nous arrive. KerningJS est une bibliothèque Javascript qui vous donne quelques nouvelles propriétés pour un meilleur contrôle du crénage, par exemple -lettre-kern.

 #heading -letter-kern: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;

Gardez à l'esprit que l'exemple ci-dessus est non standard et ne s'applique qu'avec KerningJS..

DropcapJS

Bien que la création d'un dropcap soit réalisable avec les normes CSS actuelles, le résultat n'est pas encore parfait. Parfois, c'est carrément indésirable. DropcapJS, développé par Adobe Web Platform, a pour mission de permettre au concepteur web d'appliquer facilement un dropcap parfait.

DoublureJS

DoublureJS est une bibliothèque JavaScript qui ajoute le ligne classe dans chaque ligne de votre paragraphe. Cela vous permet de styler la ligne séparément. Il simule l'idée de :: nth-line (), :: nième-dernière ligne () et ::dernière ligne pseudo-classes qui ne sont pas encore présentes dans CSS. Voici un exemple de style de la première ligne d'un paragraphe avec LiningJS:

 p .line [premier] font-weight: 600; text-transform: majuscule;

En outre, LiningJS prend également en charge le flux de paragraphes en chinois.

SoulignéJS

SoulignéJS est une bibliothèque JavaScript qui améliore le soulignement du texte. Regardez la démo pour voir ce que je veux dire, veillez à survoler les lignes. Comparez la démo avec la sortie soulignée du CSS actuel texte-décoration standard et vous seriez probablement fan de underlineJS aussi.

Type de flux

Ce plugin ajustera dynamiquement la taille de la police en fonction d'une largeur de wrapper spécifique. Type de flux vous aide à appliquer un nombre idéal de caractères par ligne, quelle que soit la largeur de l'écran. La bibliothèque est livrée avec des options permettant de définir la largeur d'écran minimale / maximale, la taille de police minimale / maximale et le rapport de police..

HatchShow

HatchShow étend la taille d'une police pour remplir toute la largeur de son conteneur. Le plugin fonctionne immédiatement avec l'algorithme; en un mot, il mesure la largeur du conteneur et la longueur du caractère de police et ajoute la taille appropriée de la police.

GridLover

GridLover est un excellent outil pour générer des styles de base pour la disposition de la typographie (taille, hauteur de ligne et marge) avec une interface utilisateur de curseur simple. Il génère les styles dans SCSS, LESS et Stylus afin que vous puissiez l’inclure immédiatement dans votre projet, quel que soit le préprocesseur CSS que vous utilisez..

TypeScale

TypeScale est un outil en ligne qui vous aidera à déterminer facilement la taille de police adaptée à votre site Web. L'outil fournit une interface graphique intuitive simple pour insérer la taille, l'échelle et la famille de police de base que vous souhaitez utiliser. Les résultats seront visualisés pour vous afin que vous puissiez jouer avec la balance, pour obtenir la bonne valeur. Il suffit de saisir le CSS une fois que vous avez terminé.

Échelle modulaire

Échelle modulaire est un outil permettant de générer une mise à l'échelle idéale des polices pour le corps et le titre du texte. Il génère dans Sass qui doit être utilisé avec sa bibliothèque Sass. Alternativement, vous pouvez utiliser JavaScript .

Largeur de police

Largeur de police (FTW) est une bibliothèque Javascript qui adapte une police à son conteneur de largeur. Il déterminera la taille de la police ainsi que l’espacement des mots requis pour la police. Si vous voulez faire un joli titre, c'est la bibliothèque que vous voudrez peut-être essayer.

FFFFallback

FFFFallback, un outil pratique qui vous permet de trouver la meilleure pile de polices qui se dégradera avec élégance. L'outil se présente sous la forme d'un bookmarklet, qui analysera la famille de polices de votre page et suggérera un ensemble de polices à utiliser comme solution de secours..

Paire de polices

Google Font est l’une des bibliothèques de polices Web les plus utilisées par des millions de personnes et héberge plus de 500 familles de polices.. Paire de polices est une collection de polices Google couplées, dans lesquelles vous pouvez facilement trouver une combinaison variée entre les familles de polices et les caractères typographiques. La paire de polices permet de choisir un peu moins les combinaisons de polices.

TypeSettings

TypeSettings est un ensemble de règles CSS permettant de définir une échelle de police, un rythme vertical et un ratio réactif de typographie appropriés. Les options TypeSettings sont disponibles dans Sass et Stylus, ce qui vous permet de répondre aux besoins de votre projet en ajustant les variables..

Plaque signalétique

Plaque signalétique est probablement l’un des kits de démarrage les plus complets pour la mise en place de la typographie. La plaque-type est livrée avec une poignée de styles typographiques de base qui traitent la mise à l'échelle, les couleurs minuscules, les majuscules, l'insertion, la mise en retrait, la césure, le bloc, le bloc de code et bien plus.

Maintenant lu: Vitrine de conceptions Web avec une belle typographie