10 règles pour une conception de type parfaite, à chaque fois
Avez-vous déjà remarqué que certains projets semblent simplement briller avec un excellent type? Certains designers ont un certain talent pour concevoir une typographie parfaite pour chaque projet.
Tu peux le faire aussi. Avec une poignée de règles simples, vous pouvez améliorer l'apparence et la conception de la typographie dans tous vos projets, numériquement et sur papier. Si vous avez du mal à choisir des polices de caractères et à associer des polices, ces règles vous aideront à concevoir un type parfait, à chaque fois. (Assurez-vous simplement de les suivre.)
Explorez Envato Elements
1. Fixer des objectifs pour le projet
Une bonne typographie commence par une solide compréhension de ce que votre projet est censé faire. Avant même de commencer à parcourir les polices Google ou Typekit, notez les réponses à quelques questions.
- Qui essayez-vous d'atteindre avec ce projet?
- Que sont censés faire les utilisateurs avec la conception?
- Quels sont les points de conversion?
- Quelle est l'ambiance du projet?
- Avez-vous besoin de faire correspondre ou de coordonner avec d'autres conceptions ou marques?
Les réponses vous aideront à commencer à définir une idée du type de typographie que vous recherchez. (Voici un guide sur la signification et l'humeur des polices de caractères dans les projets de conception.)
2. Recherchez des formes similaires
Lorsqu'il s'agit de faire correspondre plusieurs polices de caractères dans un dessin, quelque chose d'aussi simple que la forme du lettrage peut faire ou défaire la combinaison de polices.
Alors, comment vous assurez-vous que vous le faites?
Recherchez des polices de caractères similaires. Réfléchissez si chaque police de caractères est plus ronde ou ovale, épaisse ou fine, a une hauteur x courte ou haute ou inclut une inclinaison ou une inclinaison.
Choisissez une police principale ou un corps que vous aimez, puis faites correspondre des polices complémentaires avec des formes similaires.
- Regardez le «o» minuscule dans chaque famille de types. Le «bol» intérieur est-il rond ou ovale? Faites correspondre les polices de caractères où l'intérieur du «o» est le même.
- Vous pouvez associer des caractères épais et fins. Il est préférable d'associer une police de caractère épaisse ou fine et régulière.
- Recherchez des polices de caractères avec des hauteurs x similaires (la taille verticale d'un «x»).
- N'ayez pas peur de mélanger et de faire correspondre différents styles de caractères. Essayez une combinaison empattement et sans empattement. Assurez-vous simplement que si une police est complexe, l'autre est simple. Et utilisez la police de caractères simple pour l'application la plus large, telle que le corps du texte.
- Faites attention à l'inclinaison et à l'italique. (Vous pouvez à nouveau regarder le centre du «o» comme guide.) N'utilisez pas plus d'une police de caractères inclinée et évitez les paires de polices de caractères inclinées dans des directions opposées. Ils peuvent choquer les utilisateurs.
Vous n'êtes toujours pas sûr? Voici un guide pour mélanger les polices de caractères.
3. Définissez une échelle de type pour le dimensionnement
La taille du lettrage peut faire ou défaire un projet. Si le texte est trop gros, il en résulte une lecture non naturelle avec trop de pauses et d'arrêts. Si le texte est trop petit, il peut fatiguer les yeux et pousser les utilisateurs à quitter le dessin.
Lorsque le texte est juste, les utilisateurs parcourent librement les mots.
Le texte correctement dimensionné est également accompagné d'une échelle pour différentes tailles dans le projet. Le texte du corps est d'une taille, les titres sont d'une autre taille et les sous-titres sont encore d'une autre taille. Et toutes les tailles et utilisations doivent être cohérentes tout au long de la conception.
Pour les utilisateurs, cela facilite la lecture.
- La taille du texte donne la priorité aux informations par importance. Un type plus gros est plus important et est plus susceptible d'être écrémé par la plupart des utilisateurs.
- Une échelle augmente la numérisation du texte afin que les utilisateurs puissent le consulter rapidement.
- Les éléments associés ont la même apparence.
- Des éléments de texte plus volumineux, tels que des sous-en-têtes, aident à briser de longs blocs de texte, ce qui facilite la lecture.
4. Faites attention à l'espacement
Ce n'est pas le type en soi, mais l'espacement des types est important.
Le crénage, le début, le suivi et le remplissage peuvent rendre votre type magnifiquement ou le transformer en un désordre chaud.
Il y a un art pour obtenir un espacement parfait. Et cela dépend en grande partie des combinaisons de lettres réelles utilisées, de la taille et de la police. Il n'y a pas de règle de crénage - autre que de le faire si nécessaire - et il n'y a pas une quantité parfaite de remplissage pour le texte et d'autres éléments.
Vous allez devoir le regarder.
Le test est la sensation. Si le design semble "hors tension" d'une manière que vous ne pouvez pas identifier, un espacement problématique pourrait être à blâmer. Il faut juste de la pratique - et un bon œil - pour bien faire les choses.
5. Alignez à gauche pour la lecture
En anglais, ainsi que dans d'autres langues, les utilisateurs lisent de gauche à droite. C'est également l'alignement idéal pour optimiser la lisibilité au sein des blocs de copie.
Les petits morceaux de texte - éléments de menu ou titres de héros - n'ont pas à s'aligner à gauche car ils sont rapides à lire. De grandes quantités de copies - rien de plus qu'une phrase - devraient probablement être alignées à gauche. (La justification est défendable, bien qu'elle puisse entraîner des problèmes d'espacement si vous n'êtes pas très prudent.)
6. Choisissez deux familles de types
Cette règle a probablement déjà été enfoncée dans votre tête: utilisez seulement deux polices de caractères pour un projet.
Cela est répété ici parce que si peu de concepteurs prêtent réellement attention à cette règle. Scannez le Web ou un site Web de portefeuille et vous verrez de nombreux projets avec des «polices devenues folles!»
Si vous prévoyez d'enfreindre cette règle, détrompez-vous. Que gagnez-vous en ajoutant une autre police au mixage? Au lieu de cela, regardez la police que vous avez sélectionnée et voyez si un autre style - gras ou mince ou italique - pourrait être une meilleure solution.
7. Ne modifiez pas les polices
Ne jamais étirer, tordre ou incliner une police. Si vous avez besoin de quelque chose de différent de ce que vous avez, choisissez une option différente.
Les concepteurs de types passent beaucoup de temps à créer des lettres qui fonctionnent comme présentées. La modification de la forme des lettres nuit à la lisibilité et peut entraîner la «séparation» des polices dans la manière dont une photo est pixellisée lorsque vous utilisez une taille plus grande que l'original.
8. Utilisez beaucoup de contraste
L'une des choses qui pose problème aux concepteurs est de mettre du texte sur une image ou un élément d'arrière-plan. Cela ne fonctionne que lorsque vous avez beaucoup de contraste entre les éléments pour créer une séparation et assurer la lisibilité.
Si vous devez ajouter une ombre portée au lettrage, le contraste est insuffisant.
La lumière sur sombre ou sombre sur la lumière peut assurer la lisibilité. Il est également utile d'utiliser une police de caractères avec un trait régulier ou plus large.
Mais ce n'est pas toujours le cas. Une photo peut inclure des espaces clairs et sombres ou laisser des traits épais et fins.
Les options incluent le texte de boxe, le choix d'une police de caractères plus lourde ou l'ajout d'une superposition de couleurs à l'image. Toutes ces techniques peuvent aider à créer plus de contraste et à rendre le texte plus lisible. (De plus, ils ont tendance à tenir le coup lorsqu'ils sont utilisés dans plusieurs points d'arrêt réactifs où le texte et les images se déplacent.)
9. N'oubliez pas la typographie mobile
En ce qui concerne la typographie pour le Web, la lisibilité mobile devrait être une préoccupation majeure. Des techniques amusantes comme l'ajout d'un motif ou d'une texture aux lettres peuvent fonctionner dans l'impression et certains écrans de bureau, mais ne fonctionneront pas sur les petits appareils.
Vous devez penser au rendu des polices de caractères dans toutes les utilisations. (Revenez à votre échelle de typographie et n'oubliez pas d'inclure des spécifications pour le type sur les grands et les petits écrans.)
La typographie mobile est souvent un peu volumineuse et comprend un peu plus d'espacement que la typographie sur les ordinateurs de bureau. Cela aide également si les paragraphes sont plus courts afin de ne pas vous retrouver avec des blocs de texte qui prennent plusieurs parchemins à lire, ce qui peut intimider les utilisateurs.
10. Tenez-vous à un guide de style
Une fois que vous avez une bonne idée de l'apparence du type dans un projet, créez un guide de style avec toutes vos règles exactes d'utilisation.
Faire des copies. Mettez-le en ligne dans un endroit accessible. Et utilisez-le chaque fois que vous apportez des modifications à la conception.
La cohérence est un élément clé de la conception d'une typographie parfaite.
Conclusion
La caractéristique de la bonne ou de la mauvaise typographie est que la plupart des utilisateurs peuvent identifier l'un ou l'autre. Ils savent seulement quand le design n'est pas tout à fait correct.
La principale préoccupation lorsqu'il s'agit de créer une typographie parfaite est la lisibilité. Le type doit être facile à lire et à comprendre. Il doit correspondre à l'ambiance de la copie. Et il devrait se sentir presque invisible pour les utilisateurs; cela fonctionne quand ils n'ont pas à y penser et peuvent lire facilement.
