Hier, nous avons publié un article décrivant huit conseils simples et utiles pour Kerning Type. Cela portait principalement sur les bases du crénage: ce que c'est, comment ça marche, les paires de lettres à surveiller, etc.
Aujourd'hui, nous poursuivons sur cette question en expliquant comment utiliser Lettering.js pour kerniser votre type Web. Ne t'inquiète pas, c'est beaucoup plus facile que vous ne le pensez!
Kerning Web Type: Une bataille perdue
La typographie sur le Web a parcouru un long chemin ces dernières années. Auparavant, il n'y avait qu'une poignée de «coffre-fort». polices utilisées sur un site Web donné. De nos jours, avec des options telles que Typekit et Google Web Fonts, vous pouvez obtenir du texte inter-navigateurs, en direct et entièrement sélectionnable en utilisant des centaines de polices différentes.
En conséquence, les concepteurs Web sont tombés en flagrant délit de typage et n'en ont jamais assez. Malheureusement, avec tous les progrès réalisés avec l'intégration de polices via CSS, il reste un ingrédient clé dans la boîte à outils du typographe: le crénage.
Il est presque impossible de structurer des titres bien conçus sans contrôle du crénage. Il existe en fait quelques options d'espacement dans votre arsenal CSS, mais elles sont vraiment inefficaces pour le crénage. Voyons brièvement comment cela fonctionne.
L'espacement des lettres
Si vous Google? CSS Kerning?, Vous obtenez un tas d'articles qui vous informent que l'application? Lettre-espacement? à un sélecteur donné vous permet de kern votre type. Ceci est en réalité inexact. Voici une image de l'article d'hier qui illustre ce que je veux dire.
Comme vous pouvez le constater, le crénage affecte l'espacement entre deux lettres spécifiques, le suivi affecte la quantité uniforme d'espacement entre toutes les lettres et l'interlignage affecte l'espacement vertical entre les lignes. Gardant cela à l’esprit, examinons l’effet de l ’« espacement des lettres ». la propriété a du texte.
Comme vous pouvez le voir, le? Espacement des lettres? la propriété affecte clairement le suivi, pas le crénage. L’application d’une valeur donnée d’espacement des lettres modifie l’espacement entre chaque lettre du mot, de la ligne ou du paragraphe.
Utilisation de l'espacement des lettres pour Kern
Pour être juste, l'énoncé de la section précédente est un peu simplifié. En réalité, la propriété d'espacement des lettres s'applique à toutes les lettres ciblées par votre sélecteur. Pour cette raison, le? H2? les sélecteurs affectent tout ce qui est dans l'en-tête.
Si nous voulons vraiment être méchants, nous pourrions ajouter du balisage supplémentaire pour obtenir un véritable crénage avec un espacement des lettres. Cela impliquerait l'utilisation de spans dans votre code HTML.
De toute évidence, cette méthode est plutôt indésirable en raison de la majoration supplémentaire. Cela est particulièrement vrai si vous devez créer plusieurs lettres. Les résultats sont désastreux pour la lisibilité de votre code.
Espacement des mots
Une autre propriété CSS qui traite de l'espacement des textes est? Espacement des mots.? Encore une fois, c’est une propriété sympa, mais cela ne nous aide pas beaucoup dans notre quête de kern. Cela fait exactement ce que cela ressemble: ajuste la taille de l'espace entre vos mots.
Rencontrez Lettering.js
Comme vous pouvez le constater, les solutions de crénage CSS actuelles sont assez nulles. Autant que je sache, il n'y a vraiment pas de bonne façon de s'y prendre sans gâcher sérieusement votre balisage.
Heureusement, il existe une extension jQuery gratuite appelée? Lettering.js? cela ouvre une tonne d'options pour dénommer facilement la typographie Web.
Qu'est ce que ça fait?
Lettering.js n'a pas été créé uniquement dans l'optique du crénage, mais constitue plutôt un outil permettant de cibler facilement des lettres, des mots ou des lignes dans votre code CSS. Cela ouvre la possibilité pour de nombreux effets différents, y compris le crénage!
Comme vous pouvez l’imaginer, une fois que vous êtes en mesure de cibler facilement des lettres spécifiques en CSS, vous pouvez utiliser des marges ou d’autres propriétés de présentation pour positionner et mettre en forme le style souhaité. Lettres Kern, appliquer différentes couleurs et rotations; devenir fou!
Comment ça marche?
Pour utiliser Lettering.js, arrêtez-vous d'abord par GitHub et récupérez le téléchargement gratuit. Assurez-vous également d'inclure la dernière version de jQuery.
Ensuite, décidez ce que vous voulez cibler. Dans la plupart des cas, il s'agira d'un titre ou d'un autre petit texte important. Vous ne voulez presque jamais cerner un paragraphe entier!
Disons que nous voulons cibler un? H2? Comme dans les exemples précédents, voici notre balise HTML non-sensée:
Pourquoi ai-je utilisé une phrase aussi absurde? Parce que le crénage par défaut pour ce titre est une épave de train. Jetez un oeil à la façon dont le navigateur rend ce type.
Comme vous pouvez le constater, avec un exemple aussi déplorable, il est clair que nous avons au moins parfois besoin d’une solution pour les ajustements de crénage. Heureusement, nous avons notre arme secrète.
Pour tirer parti du pouvoir de Lettering.js. insérez simplement l'extrait de code suivant dans votre code. Vous avez seulement besoin de changer le? H2? partie si vous voulez cibler autre chose.
Avec cela en place, la magie JavaScript suit son cours et transforme essentiellement notre code épuré en quelque chose de plus semblable à la laideur que nous avons vue avec le truc de l'espacement des lettres. Cependant, gardez à l'esprit que notre code source HTML est transformé uniquement lorsque l'utilisateur charge la page, notre fichier source réel reste exempt de toutes les balises span. Cependant, lorsque la page est chargée, elle se transforme en ceci:
Cette étape est tout ce que Lettering.js prend en charge pour nous. Armés de ces noms de classes, nous pouvons maintenant faire ce que nous voulons avec chaque lettre en CSS.
Kerning
En passant à notre CSS, nous pouvons facilement cibler l’une des classes générées automatiquement par Lettering.js.Par exemple, disons que nous voulons travailler sur le fichier? AV? appariement des lettres. Pour ce faire, nous comptons sur le? V? (la 11ème lettre) et déplacez-le avec le code suivant.
Notez que vous pouvez toujours utiliser la propriété d’espacement des lettres si vous estimez que c’est plus correct, dans ce cas, vous cibleriez le type? A? au lieu de la? V? bien que.
Quoi qu'il en soit, avec très peu de travail, nous avons obtenu l'effet que nous souhaitons!
Rendre Kerning encore plus facile avec Kern.js
Lettering.js est incroyablement facile à implémenter et à utiliser, mais le crénage peut encore devenir un peu fastidieux, car vous devez constamment ajuster votre code, puis actualiser votre aperçu pour voir s'il est trop, trop peu ou pas. Heureusement, nous pouvons utiliser un autre outil gratuit pour nous aider.
Kern.js n'est pas une bibliothèque ou une extension, mais plutôt une application Web qui nous permet de taper visuellement le type de kern comme dans Photoshop ou Illustrator.
Pour utiliser cet outil, passez sur le site Kern.js et installez le bookmarklet. Ensuite, ouvrez votre page Web de test dans votre navigateur et cliquez sur le bookmarklet. À partir de là, tout ce qui a été appliqué avec Lettering.js deviendra interactif, ce qui signifie que vous pouvez simplement cliquer et faire glisser toutes vos lettres pour les mettre en place.
Une fois que vous avez terminé, cliquez sur? Terminer la modification? et le CSS nécessaire sera automatiquement généré. Il suffit de copier et coller ceci dans votre code et vous êtes prêt à partir!
Avantages et inconvénients
De toute évidence, cette méthode de crénage de type Web n’est pas sans défauts. C’est cependant la meilleure solution que j’ai trouvée, alors si vous savez quelque chose de mieux, laissez un commentaire ci-dessous. En attendant, je vous recommande de vérifier Lettering.js et Kerning.js pour vos besoins de crénage Web.
Les avantages ici sont clairs, vous obtenez une solution extrêmement simple et facile à mettre en œuvre pour la typographie en direct sur Internet. Le texte reste parfaitement sélectionnable et vous n'avez pas à brouiller votre balisage HTML avec un tas de balises span méchantes. Ils sont ajoutés, mais après coup, votre code reste propre.
Il y a aussi plusieurs inconvénients. Pour commencer, il s’agit d’une solution JavaScript, de sorte qu’il est évident que cela ne fonctionnera pas pour les utilisateurs avec JavaScript désactivé. La partie intéressante à ce sujet est que ces utilisateurs obtiendraient essentiellement la même expérience qu’ils auraient eu si vous aviez complètement ignoré cette méthode! Donc, essentiellement, ils ne sont vraiment pas dehors. De toute évidence, l'utilisation de JavaScript comporte également de très légères conséquences en termes de vitesse.
Le plus gros inconvénient est que vous vous retrouvez avec une bonne quantité de CSS peu commodes. Toutefois, si vous souhaitez styliser des lettres individuelles, vous ne pouvez vraiment rien faire de plus. Dans mon exemple, voici le code résultant de l'utilisation de Kern.js pour déplacer manuellement un tas de choses. Pour être honnête, ce n'est vraiment pas si grave!
Conclusion
En résumé, le crénage sur le Web est nul. Contrairement à la croyance populaire, le? Espacement des lettres? La propriété CSS à elle seule est vraiment plus orientée vers le suivi que le crénage, vous devez vraiment nous en débarrasser au format HTML.
Lettering.js peut également être implémenté en moins d’une minute et offre une grande flexibilité quant à la manière dont vous croyez votre type. Vous pouvez même utiliser Kern.js pour kerniser votre type dans une interface visuelle, exactement comme si vous utilisiez un logiciel graphique!
Si vous avez cherché un meilleur moyen de dactylographier en direct sur le Web, essayez cette solution et dites-nous ce que vous pensez dans les commentaires.