Comment rendre votre type plus attrayant sur le Web
Il n'est pas rare qu'un concepteur dans le monde d'aujourd'hui ne prête pas attention à la configuration du type, en particulier avec les paramètres par défaut très pratiques des balises de titre et des polices Web sécurisées que l'on trouve universellement sur le Web.
En tant que concepteurs interactifs, nous sommes en mesure de prendre un peu plus de temps en matière de typographie que les résultats montreraient un design unique et bien pensé, contrairement à une création «à la chaîne».
Il y a de fortes chances que la majorité des créateurs et designers que vous admirez présentent de bons exemples de typographie.
Je vais vous montrer quelques étapes à suivre pour peaufiner le type de set afin de le rendre plus attrayant que les scénarios par défaut de tags H1 24px avec 13px définis dans Times New Roman.
Ne vous contentez pas des paramètres par défaut, tout le monde le fait.
Nous avons ici l'apparence si commune d'un titre avec une partie du corps à suivre. Cela ne vous attire pas exactement ou ne se distingue pas de tous les autres échantillons comme ça, non? Ainsi, pour rendre l'échantillon de texte plus attrayant, nous allons d'abord apporter quelques modifications à notre sélection de polices.
Choisissez une police qui aura plus de poids visuel avec votre titre
Bien que la sélection des polices ne soit pas exactement une "typographie", elle est en fait un composant par excellence pour aider le type sur une page à se distinguer des autres éléments. Avec l'apparition de @ font-face, les concepteurs disposent de quantités énormes de choix partout.
Ici, j'ai utilisé une police Extra Condensed Gothic Style qui peut facilement être trouvée sur un site de polices libre comme FontSquirrel.com. Si nous nous arrêtons et que nous y réfléchissons, le nom "Condensed" devrait signifier quelque chose, car il est en fait plus dense que le membre de famille de style livre normal, qui est exactement ce que nous voulons d'un titre: quelque chose qui attire l'utilisateur et se distingue vraiment de la copie du corps. Cela réussit certainement à attirer votre attention mieux que l'original, mais nous pouvons faire certaines choses pour améliorer le texte.
Rendre plus attrayant avec deux lignes de CSS
Le changement immédiat est dans les lettres; ils sont tous capitalisés maintenant, mais ils ont maintenant un crénage négatif entre chacune des lettres (une technique issue de la conception des journaux).
Ces deux caractéristiques peuvent facilement être réalisées via CSS, { text-transform: Uppercase; et espacement des lettres: -Xpx; }. En faisant évoluer ces deux lignes de codage, il en résulte une amélioration majeure du poids visuel, en particulier par rapport à l'original.
Entraînez-vous aux derniers petits réglages
À l'étape suivante, la police utilisée dans le paragraphe du corps a en fait été remplacée par un sans-empattement plus propre, qui complète mieux le texte du titre. Nous nous rapprochons d'un design beaucoup plus attrayant, mais nous pouvons apporter quelques modifications pour le nettoyer encore plus.
Comme l'indiquent les indicateurs verts, il existe des marges inégales et ce que les typographes aiment appeler un "orphelin". Ce qui est un seul mot qui tombe à la dernière ligne du paragraphe. Cela crée un poids très inégal visuellement par rapport au reste du texte, et ce problème peut être résolu facilement en reformulant légèrement le texte.
En ce qui concerne les marges, il n’ya pas de règle selon laquelle tout doit être égal. Cependant, si vous commencez une jeune carrière dans la conception de sites Web, il est recommandé d'avoir des marges égales jusqu'à ce que vous ayez appris et appris des techniques qui vous permettent de dépasser les limites de la composition et d'atteindre votre objectif.
Après avoir créé un canevas visuel plus équilibré en supprimant l'orphelin et en ajustant les marges, vous pouvez voir le résultat final, un échantillon de type bien défini qui est confortable là où il se trouve.
Quels sont vos meilleurs conseils pour la typographie Web? Faites le nous savoir dans les commentaires!