15 outils de typographie en ligne que tous les concepteurs devraient connaître
La typographie est à la base de toute conception, car la lecture est l’une des tâches les plus élémentaires du Web. La typographie que vous choisissez a un impact sur plusieurs aspects d’un site Web, notamment lisibilité, humeur et expérience globale de l'utilisateur. Il est essentiel pour les concepteurs et les développeurs de connaître les principes de base de la typographie à créer des dessins agréables et lisibles.
Nous avons déjà parlé des outils de couplage des polices et, aujourd’hui, nous allons partager avec vous des outils permettant de créer une meilleure expérience de lecture sur les sites Web que vous créez et / ou concevez..
Voici les plugins, les outils en ligne et les scripts qui vous aideront à créer des titres impressionnants et texte lisible propre.
Plaque signalétique
Il ne fera pas de choix de conception pour vous, mais définira le bon balisage avec un style pour les modèles typographiques courants. Il peut également vous donner des conseils sur la manière de styliser correctement la copie de texte..
Check-out: Démo | Documentation
Gutenberg
Gutenberg est un kit de démarrage de typographie flexible et facile à utiliser destiné aux développeurs et aux concepteurs. Cela vous aidera à définir la taille du type de base, la hauteur de ligne et la largeur maximale. Gutenberg est un projet open-source, alors n'hésitez pas à y contribuer, à l'adapter et à le modifier.
Check-out: Démo | Documentation
Lettering.js
Lettering.js est un plugin jQuery qui vous permet de contrôler le type de crénage. Il vous permet d’obtenir facilement une conception éditoriale et de gérer le code. Le site Web propose d’excellents exemples de typographie réalisés avec ce plugin pour vous inspirer.
Check-out: Démo | Documentation
Typebase.css
Typebase.css est une feuille de style de typographie personnalisable. Il contient à la fois saas et moins de versions et est facilement modifiable dans des projets Web modernes.
Check-out: Démo | Documentation
FitText
FitText est un plugin qui rendra la taille des polices de votre site Web flexible. Cela vous aidera à réaliser des titres modulables pour diverses résolutions d'écran; autrement dit, rendez votre typographie sensible. C'est fait pour afficher du texte énorme seulement.
Check-out: Démo | Documentation
Kerning.js
Kerning.js vous aide à transformer, redimensionner et modifier automatiquement votre typographie avec CSS. Il est facile de commencer avec Kerning.js.
Check-out: Démo | Documentation
Typesettings.css
Typesettings.css est votre terrain de jeu pour créer des blogs ou des projets Web minimalistes. Tous les styles de typographie utilisés ici sont inspirés des bases de la conception graphique..
Check-out: Démo | Documentation
Sac à dos
Avec Rucksack, vous pouvez produire une typographie fluide étonnante grâce à une nouvelle propriété sensible à la taille de la police. Créer une typographie responsive est rendu extrêmement facile.
Check-out: Démo | Documentation
FlowType.JS
La typographie la plus lisible contient entre 45 et 75 caractères par ligne, mais trouver cet équilibre est une tâche ardue pour les développeurs. FlowType.JS modifie la taille de la police, puis la hauteur de ligne en fonction de la largeur d'un élément spécifique.
Check-out: Démo | Documentation
Blast.js
Blast.js vous aidera à séparer les textes pour faciliter la manipulation de la typographie. Il contient 4 délimiteurs intégrés: caractère, mot, phrase et élément. Il peut également correspondre à des expressions et des phrases personnalisées.
Check-out: Démo | Documentation
slabText
slabText est un script simple qui divise les titres en lignes pour remplir parfaitement l'espace horizontal disponible. Le script calcule un nombre idéal de caractères à définir dans chaque ligne en divisant la largeur disponible par la taille de la police en pixels..
Check-out: Démo | Documentation
Échelle de type
Avec l'échelle de type, vous pouvez prévisualiser et choisir la bonne échelle de type pour votre projet. Il n'y a pas de règles - il suffit de jouer avec la taille de la police, son échelle et différentes polices Web..
Check-out: Démo | Documentation
Typographique
Typographic vous aide à rendre la typographie sensible. Tout ce que vous avez à faire est de sélectionner quelques polices, de définir quelques paramètres et d'obtenir une belle typographie réactive.
Check-out: Démo | Documentation
Typi
Typi est un mélange Saas que vous pouvez utiliser pour créer facilement une typographie réactive. Il crée une taille de police et des hauteurs de ligne pour HTML et d'autres éléments. Typi a aussi une fonction de rythme vertical pour calculer la hauteur des lignes.
Check-out: Documentation
Lining.js
Avec le plugin Lining.js, vous aurez un contrôle total sur la typographie Web. Il est pris en charge sur les navigateurs les plus populaires tels que Safari, Google Chrome, Opera et Mozilla Firefox..
Check-out: Démo | Documentation
Bonus: 2 outils supplémentaires!
Etat du type de Web
State of the Web Type est un site Web offrant des données à jour sur la prise en charge du type et des fonctionnalités sur le Web. Vous pouvez utiliser la recherche ou des catégories, telles que le crénage, l'espacement des majuscules, le chargement de polices CSS, etc. pour trouver exactement ce dont vous avez besoin..
Typographe
Typograph est un plugin Web et de croquis génial qui vous permet de mettre des espaces insécables après les mots d'une lettre, de relier le nombre et l'unité. Il supprime également les doubles espaces, les entrées, les points et autres fautes de frappe, vous permettant ainsi d'obtenir une typographie nette et belle, facile à lire..
Check-out: Documentation
