Comprendre la typographie 10 Outils et ressources utiles

Dans mon dernier article sur la compréhension de la typographie, j'avais décrit les aspects de la conception de la typographie et comment les manipuler pour améliorer la présentation de votre site Web et améliorer l'expérience de l'utilisateur. Dans cet article, je liste 10 de mes outils préférés pour la typographie sur le Web.

Celles-ci peuvent vous aider à créer des grilles HTML et des zones de contenu, à créer des styles CSS, à générer des noms de police et à une foule d’autres éléments intéressants. Découvrez quelques-uns des liens ci-dessous et assurez-vous de nous faire part de vos opinions dans la zone de discussion après publication..

Lecture recommandée: Comprendre la typographie: écrire pour le Web

Matrice de polices

Ce guide en ligne a été posté par le blog de design 24ways. Il comporte un tableau matriciel de toutes les polices Web standard que vous trouverez par défaut chez différents fournisseurs de logiciels. Les titres populaires incluent les programmes Windows, Mac OS X, Microsoft Office et Adobe Creative Suite..

Contrôle du contraste des couleurs

Le contraste des couleurs est souvent un problème lorsque vous vous aventurez en dehors du modèle standard noir et blanc. Lorsque vous trouvez une correspondance, vous avez l'impression d'être à la perfection. Pourtant, un choix de couleurs médiocre semble très mauvais et aura une influence négative sur la conception globale. Ce petit outil Web peut vous aider à choisir un ensemble de couleurs qui s’harmoniseront pour toute disposition de style..

HTML-Ipsum

Avez-vous besoin d'un outil Lorem Ipsum capable de faire plus que simplement afficher du texte? Ce générateur HTML en ligne créera des blocs de code pour les éléments de page les plus courants. Certains exemples incluent des listes non ordonnées, des listes de définitions, des formulaires Web, des tableaux et de nombreuses autres solutions..

Typechart

Typechart est l'un de mes outils favoris en tant que développeur CSS. Je cherche souvent à faire correspondre une police spécifique de mon système à un projet Web, mais je n'ai tout simplement pas le temps de parcourir toute ma collection. Cet outil génial vous permet de parcourir les choix populaires de familles de polices et même de télécharger le code CSS approprié.!

PX-to-EM.com

À moins que vous ne réinitialisiez la taille de texte du navigateur par défaut, vous aurez probablement des problèmes pour faire correspondre les pixels avec des pixels. Cette application intégrée au navigateur fournit à la fois un tableau de conversion et une interface utilisateur permettant à px d’em. C’est certes un outil très simple, mais il offre un guide pratique avec des fonctionnalités très simples, et vous ne pouvez pas battre l’étiquette de prix gratuite..

CSS Type Set

Je ne recommande pas de rester avec CSS Type Set trop longtemps car c'est vraiment un outil pour débutant. Il vous permet de générer du code CSS en fonction des propriétés de police sélectionnées. Bien que très utile au début, il finit par devenir une béquille sur laquelle s'appuyer. Et vous ne serez pas en mesure de maîtriser vous-même les propriétés CSS. Mais si vous avez besoin de gagner du temps sur un projet, cet outil ne peut pas être négligé..

retournement typique

Voici un exemple vraiment unique de bibliothèque d'aperçu de polices. Le basculement typique inclut une poignée de polices natives de votre système d'exploitation. Il analyse automatiquement votre répertoire de polices pour choisir les solutions les plus sécurisées pour le Web. Vous pouvez les comparer côte à côte et choisir facilement vos options préférées. Ceci est un autre bon gain de temps que vous marquez et ne pensez pas avant la dernière minute..

Grille typographique

On parle beaucoup de conception autour de la grille en HTML et CSS. Vous comprenez probablement le concept de fonctionnement des grilles, et mesurer un site web en pixels n’est pas différent. Ce tutoriel sur les grilles de CSS-Tricks s'apparente davantage à un effort guidé pour présenter les bases de la typographie à l'ère numérique. C'est un sujet beaucoup plus avancé dans le domaine de la conception Web. Mais si vous avez un peu de patience, je vous recommande de passer en revue les détails pour voir comment ces propriétés de la grille peuvent réellement affecter votre mise en page..

WhatTheFont!

Nous avons tous trouvé un logo ou une image avec des polices super cool et non identifiables. WhatTheFont fait des tournées sur Internet depuis quelques années et reste l'un de mes favoris. Vous choisissez une image à télécharger et leur script analysera le texte dans l'image pour faire correspondre toutes les polices de caractères similaires. L'application vous connectera même à des produits externes où vous pourrez acheter chaque police à votre convenance.

Calculatrice de ligne de base / hauteur de ligne

Enfin un outil très puissant pour générer des propriétés de hauteur de ligne et de rythme. Entrez simplement des valeurs pour la taille de la police de base et la hauteur de ligne, ou incluez votre propre code CSS personnalisé sur le côté. L'application générera des aperçus dans quelques styles différents afin que vous puissiez avoir une idée de l'apparence de ces propriétés sur votre propre site web..