Donc, vous aimez la typographie, qui n'aime pas ces jours-ci? La question qui se pose est la suivante: à quel point êtes-vous bâclé lorsqu’il s’agit d’implémenter le type dans vos conceptions?
Aujourd'hui, nous vous présentons quelques astuces simples et utiles en matière de typographie que tous ceux qui travaillent avec ce type doivent connaître. Que vous soyez un expert ou un débutant, lisez ce qui suit pour savoir si vous êtes coupable de l'un de ces pièges.
Don't: laissez Photoshop Kern votre texte
Ce principe est celui de la typographie 101. Photoshop est un excellent outil, mais il, ainsi que tous les autres logiciels dotés d'un outil de type, ne fait pas le poids face à ces scopes insensés implantés à l'avant de votre visage (vos yeux).
Le logiciel utilise un algorithme pour trouver la "meilleure estimation". pour savoir comment une section de la typographie devrait être kerned. Dans certaines applications, vous pouvez choisir entre plusieurs versions de cela. Par exemple, Photoshop et Illustrator vous permettent de choisir entre un? Métriques? et un? optique? mode.
C’est une option intéressante que vous devriez expérimenter fréquemment pour différents blocs de texte. Je n'ai pas trouvé qu'une des options fonctionne mieux dans 100% des cas, cela dépend vraiment des lettres et de la police utilisée.
Une autre chose à garder à l'esprit est que des polices de caractères différentes nécessiteront des besoins de crénage différents. Pour tester le crénage dans une police, je tape souvent le mot majuscule? LAVA? afin que je puisse avoir une idée de certaines des zones problématiques typiques.
Do: Kern manuellement
Les modes de crénage automatiques multiples sont agréables, mais pour un texte vraiment important, il est toujours préférable de le regarder dans les yeux.
N'oubliez pas que j'ai dit: "Texte vraiment important". Si vous travaillez avec des paragraphes de grande taille, il est plus intéressant de modifier le texte en majuscule que les paires de crénage individuelles. Bien sûr, vous pouvez entrer et cerner chaque mot manuellement, mais ce serait un exercice insensé. Toutefois, si vous créez un logo, cela vaut la peine de prendre du temps supplémentaire pour vous assurer que chaque lettre est parfaitement placée.
Ne pas: utiliser le soulignement par défaut
J'ai déjà mentionné à quelques reprises dans Design Shack que, bien que je sois favorable à l'utilisation de lignes pour ajouter un intérêt visuel à un dessin, je ne suis certainement pas un fan de la fonction de soulignement par défaut de la plupart des applications.
Le texte de l'exemple ci-dessus a été créé à l'aide de la commande Text Underline de Photoshop. Comme vous pouvez le constater, c’est terriblement gênant, surtout lorsque combiné avec des descendeurs.
Faire: faire preuve de créativité avec soulignés
Tout comme le crénage, les soulignements sont souvent meilleurs lorsqu'ils sont traités manuellement. Lorsque vous dessinez un trait, vous avez le contrôle complet de la personnalisation. Vous pouvez modifier l’épaisseur du trait, créer un double trait, étendre le soulignement au-delà du mot ou même transformer la ligne en formes intéressantes.
Un truc que j'utilise assez souvent avec des soulignements est de créer un petit cran pour les descendeurs, comme le montre le deuxième exemple ci-dessus. Ce n'est en aucun cas une règle qui souligne ne peut pas croiser les descendeurs, je préfère simplement son apparence lorsque vous évitez la réunion des deux.
À ne pas faire: utilisez des polices de caractères pour la copie de corps
Ceci est une erreur classique que les nouveaux designers et non-designers commettent constamment. Les polices sont un moyen facile d’apporter du plaisir et de la personnalité à un dessin. La tentation d’utiliser des polices de caractères intéressantes est presque insupportable.
Le problème est que beaucoup de gens ne savent pas comment implémenter correctement une police d'aspect unique. Prenez ce qui suit par exemple.
Ici, j'ai utilisé la police très populaire Lobster d’une manière que j’ai vue sur de vrais sites Web. Le problème doit être évident, le paragraphe peut sembler compliqué, mais il vous faut une éternité pour le lire.
De plus, il y a un manque de contraste entre le titre et la copie du corps. Bien sûr, ils sont de tailles différentes, mais il est tout aussi important de prendre en compte l'audace.
À faire: Utiliser des polices de caractères Orntate pour les titres
Dans l'exemple ci-dessous, j'ai résolu le problème. Nous continuons à utiliser notre police de caractères folle, mais au lieu de submerger le lecteur, nous sommes plus sélectifs.
Notez que nos deux éléments de texte contrastent très bien maintenant. Le titre est gros, le paragraphe est petit. Le titre est en gras, le paragraphe est mince. Le titre est fantaisie, le paragraphe est simple. Les différences vont encore et encore.
La clé ici est que les éléments de design attrayants sont appréciés à petites doses. Utilisez une police créative dans un titre et je penserai que vous êtes un bon designer, utilisez-la partout et je penserai que vous n'avez aucune idée de ce que vous faites.
A ne pas faire: utiliser Cufon pour remplacer le texte
C’est un débat sur lequel j’ai déjà écrit et sur lequel, malgré le recul, je tiens fermement ma position. Je pensais que Cufon était une excellente solution, mais les pratiques modernes ont vraiment évolué vers le CSS.
Cufon a de gros inconvénients. Pour commencer, c'est un script de remplacement de texte basé sur JavaScript. Certes, je suis un grand fan de JavaScript pour à peu près tout, mais je ne suis pas sûr que ce soit nécessaire ici lorsque CSS dispose d'une solution solide (bien que j'utilise Google Web Fonts, je suis peut-être un hypocrite).
Plus important encore, en tant qu'utilisateur, je remarque toujours Cufon car je ne peux pas sélectionner / copier / coller du texte correctement. Il est agaçant de voir du texte en direct et d’avoir la capacité d’interagir avec ce texte, mais d’être interrompu par des sélections erronées.
À faire: utiliser @ font-face
La solution CSS est bien sûr @ font-face. C'est simple, rapide, facile à utiliser et fonctionne dans les navigateurs modernes.
Il y a quelques points à garder à l’esprit lorsque vous utilisez @ font-face. Tout d'abord, le meilleur? la syntaxe a changé quelques fois. Le favori actuel des développeurs Web préférés est la nouvelle syntaxe New Bulletproof @ Font-Face de Fontspring.
De plus, bien que @ font-face soit la technologie privilégiée par Google Web Fonts, Typekit et autres, tout le monde ne la préfère pas à Cufon. Certains soulignent les problèmes de rendu des polices, en particulier sur les ordinateurs Windows, comme raison d'éviter @ font-face. Pour explorer ce côté de l'argument, consultez Cufon vs.Font-face: Une comparaison visuelle.
A ne pas faire: utiliser de fausses petites capitales
Utiliser des petites majuscules peut être une façon amusante d’ajouter une petite variation à votre titre tout en majuscules. Fondamentalement, vous utilisez toutes les lettres majuscules tout en conservant la taille de la lettre comme si vous utilisiez la casse du titre (la première lettre est plus grande).
La difficulté réside dans le fait que votre premier instinct pour savoir le faire est faux. Considérons l'exemple ci-dessous:
Ici, j'ai tapé du texte en toutes lettres majuscules, puis j'ai simplement agrandi la première lettre de chaque mot. Le résultat est vraiment des polices de tailles différentes, ce qui est assez moche pour l'observateur astucieux. Notez que l’épaisseur de ligne entre les deux types de lettre est considérablement différente.
À faire: Utiliser une police avec des minuscules
La solution la plus évidente à ce problème consiste à utiliser une police réellement construite avec des petites majuscules. Trajan est le cas typique surutilisé, mais il en existe beaucoup d'autres, comme Goudy Small Caps & Old Style Figures. Des polices comme celles-ci sont conçues pour conserver une apparence cohérente malgré les différentes tailles de lettre.
Si vous avez besoin d'un entre-deux, Photoshop et Illustrator ont tous deux une "petite majuscule". option intégrée dans la palette de caractères. Ceci est présenté dans le? Better Small Caps? exemple ci-dessus. Notez que les lettres sont beaucoup plus cohérentes que dans le premier exemple où j'ai essayé manuellement la même chose.
Avec certaines polices de style ancien, la fonctionnalité des petites majuscules peut fonctionner assez convenablement. Toutefois, les résultats peuvent être tout aussi médiocres ou pires que les efforts manuels sur d’autres polices. Par exemple, voici ce qui se passe lorsque vous essayez d'utiliser la fonctionnalité sur Helvetica.
Comme vous pouvez le constater, nous sommes revenus à un manque de cohérence notable dans la largeur du trait. Le meilleur conseil que je puisse vous donner est de toujours essayer d’utiliser des petites majuscules avec une police intégrée. Si ce n’est pas une option, essayez d’utiliser la fonction logicielle pour les petites majuscules et de tester le résultat pour voir s’il est acceptable.
Revenez pour la deuxième partie!
Merci de lire nos 5 choses à faire et à ne pas faire en matière de typographie que tout le monde devrait savoir. La surprise est que nous en avons cinq autres à venir! Revenez plus tard cette semaine pour la conclusion contenant quelques erreurs plus classiques et comment les éviter.
En attendant, laissez un commentaire et indiquez-nous quelles sont vos marottes de typographie et quelles erreurs vous êtes coupable d'avoir commises.