Share
Une bonne typographie peut être la pierre angulaire d’une conception Web réussie. Parce que la conception de sites Web est en grande partie composée de texte, il est essentiel que le succès de votre site se situe au niveau de la typographie. Les subtilités de la typographie fine peuvent être difficiles à comprendre pour les débutants? mais aujourd'hui nous avons 8 astuces qui devraient vous aider à améliorer vos conceptions globales.
Comme je l'ai déjà dit, une bonne typographie peut jouer un rôle essentiel dans le succès d'un design web. Cela peut aider à générer une hiérarchie visuelle. Cela peut rendre le texte plus facile à lire. Comme le note la citation du discours de début de Stanford de Steve Jobs ci-dessous, la typographie n'est pas une décision prise au hasard, de nombreux facteurs et valeurs doivent être pris en compte pour générer une typographie bien adaptée qui non seulement a fière allure, mais offre également un avantage fonctionnel d'être plus facile à lire et à retirer de la valeur.
J'ai décidé de suivre un cours de calligraphie pour apprendre à [apprendre la calligraphie]. J'ai appris à utiliser les polices de caractères serif et sans-serif, à faire varier l'espace entre les différentes combinaisons de lettres, à ce qui fait la qualité d'une grande typographie. C'était beau. Historique. Artistiquement subtile d'une manière que la science ne peut pas capturer. Et j'ai trouvé ça fascinant. Rien de tout cela n'avait d'espoir d'application pratique dans ma vie. Mais dix ans plus tard, lorsque nous avons conçu le premier ordinateur Macintosh, tout m’est revenu. Et nous avons tout conçu pour le Mac. C'était le premier ordinateur avec une belle typographie. Si je n'avais jamais assisté à ce cours à l'université, le Mac n'aurait jamais plusieurs polices de caractères ou des polices à espacement proportionnel. Et comme Windows vient de copier le Mac, il est probable qu'aucun ordinateur personnel ne les aurait.
Nous allons entrer dans la classification des polices et comment les choisir en une minute? mais je veux que vous considériez ce que les polices représentent vraiment pour vous (ou le projet sur lequel vous travaillez en ce moment). Bien sûr, vous pouvez utiliser à peu près n'importe quelle police pour créer un mot - mais que dit réellement cette police sur le mot? Plus que toute autre décision de conception que vous prenez, les sélections de type que vous faites donnent à votre site un caractère et un contexte. Choisissez-les soigneusement et ils vous aideront à communiquer avec les téléspectateurs ou à les distraire..
Comme exemple rapide, examinez les deux variantes suivantes du mot "pourrait" (ci-dessous). Rien ne change de manière significative en termes de couleur ou de taille, mais le sens implicite que vous pourriez (har har) enlever les changements de manière spectaculaire simplement avec la police de caractères et le cadre de la casse.
Il existe plusieurs classes principales de polices, mais seules deux sont principalement référencées sur le Web (serif et sans-serif). La première est une police qui contient des empattements, de petits détails supplémentaires sur les bords de chaque lettre, tandis que la dernière est sans empattement (traduit par sans empattement, pour ceux qui ne comprennent pas le latin).
Plus que toute autre décision de conception que vous prenez, les sélections de type que vous faites donnent à votre site un caractère et un contexte.
Les deux polices peuvent bien fonctionner, que ce soit principalement ou en combinaison dans certaines circonstances. Cependant, vous tromper peut donner à votre conception de sites Web le sentiment et l’impression totalement erronés, ou tout simplement avoir l’air fâché. Considérez les exemples suivants et le Ton apportées à chaque dessin par les caractères utilisés:
Vous devez également prendre en compte d'autres aspects, tels que la lisibilité de votre texte dans une police empattée par rapport à une police sans empattement. Un texte plus petit sera généralement mieux représenté dans une police sans empattement, à condition de bien jouer avec certains des autres facteurs que j'ai mentionnés aujourd'hui..
Il est également intéressant de noter que l'avènement de Google Fonts, de Typekit, des services CSS @ font-face et d'autres technologies de remplacement de fontes ont ouvert la voie à une nouvelle vague de polices de caractères qui pourraient ne pas appartenir aux catégories juste serif ou sans serif. Considérez les exemples suivants:
Un site qui utilise de nombreuses polices différentes au hasard est comme une personne qui utilise beaucoup de voix différentes dans la même conversation? cela peut sembler une bonne idée, mais il est probable que vous finirez par ressembler à une personne folle à quelqu'un qui passe
Les connaissances communes conseillaient autrefois aux concepteurs Web de choisir une seule police et de s'en tenir à celle-ci, mais il peut souvent s'avérer beaucoup plus intéressant de choisir 2 ou 3 polices et de les utiliser (de manière cohérente et uniforme!) Dans des combinaisons soigneusement élaborées. C'est ici que le mélange de polices serif et sans-serif peut devenir vraiment intéressant. Examinez les exemples suivants et voyez comment la diversité de types permet de donner vie aux dessins:
Notez que même si plusieurs caractères sont utilisés dans chaque motif, ils sont utilisés de manière appropriée (voir astuce 1) et de manière uniforme sur chaque site..
Cependant, le nombre de faces de police différentes peut entraîner une lisibilité et d’autres problèmes de conception généraux. Par conséquent, cela ne signifie pas que, du fait que vous pouvez utiliser 100 polices différentes, vous devriez le faire. Il existe des cas où de nombreuses polices utilisées simultanément fonctionnent bien comme déclaration artistique, mais il est généralement préférable de limiter le nombre de polices à un minimum..
Pourquoi? Une réponse simple est qu'un site qui utilise beaucoup de polices de caractères différentes au hasard est comme une personne qui utilise beaucoup de voix différentes dans la même conversation? cela peut sembler une bonne idée, mais il est probable que vous finirez par ressembler à une personne folle pour quelqu'un qui passe. Limiter le nombre de polices de caractères sur un site permet d’établir une hiérarchie et un ton sans exagérer..
Bien sûr, choisir les bonnes polices dans cette sélection est également important. Certaines polices fonctionnent bien avec d'autres polices, en particulier celles appartenant à des catégories similaires, telles que serif / sans-serif. Une police de caractères de type dalle peut ne pas correspondre à la police ultra-mince à côté de laquelle vous l'avez placée. Essayez différentes combinaisons jusqu'à ce que vous trouviez le bon 2 ou 3 qui vous convient.
L'interligne peut être un facteur déterminant pour un bon schéma de typographie. L'interligne n'est que cela, l'espacement des lignes de votre texte. Éloignez-les et cela devient généralement plus lisible et plus agréable à l'œil. En règle générale, l’espacement des lignes doit être supérieur de 0,3 à 0,5 em à la taille de la police, même s’il peut varier en fonction de la structure. Bien que ce soit une règle empirique, sachez que la police de caractères principaux doit différer en fonction de la police choisie, les autres polices pouvant nécessiter plus ou moins de polices principales..
Pour comprendre pourquoi un espacement généreux est indispensable dans la plupart des conceptions, reportez-vous au graphique ci-dessous pour en savoir plus sur les notions de base. A ce niveau, ils sont tous les deux assez lisibles mais le plus espacé l’est de plus en plus, chaque mot ayant plus d’espace pour être distingué et séparé du reste.
Le concept de hiérarchie visuelle est celui où les éléments que vous souhaitez que votre lecteur voie et perçoit en premier sont les plus importants, qu'ils soient créés par la couleur, la taille, le type de police ou quelque chose de complètement différent. La typographie peut jouer un rôle dans la hiérarchie générale de votre site, mais elle peut en réalité avoir la sienne. L'exemple le plus simple pour expliquer cela consiste à regarder du texte sur un blog et à remarquer que le titre est généralement le plus grand exemple de texte..
Vous pouvez utiliser plusieurs facteurs différents pour vous aider à créer votre hiérarchie. La couleur est un exemple et cela joue bien dans le contraste, les éléments que vous voulez que votre utilisateur lise en premier étant les plus faciles. La taille est peut-être l'exemple le plus important, car vous remarquerez sans doute une énorme chaîne de texte de 10em par-dessus votre paragraphe standard de 1em..
Macintude utilise le thème Black Sakura de ThemeForest. Vous allez probablement lire le titre avant de plonger dans le contenu, non? Pour plus d'informations sur la hiérarchie visuelle dans la conception Web, voir l'article de Brandon sur ce sujet.
La mesure est aussi un aspect important. Mesurer est la largeur de votre texte et un facteur qui peut déterminer si votre texte est trop large ou trop étroit. Measure travaille généralement à côté de l'interligne pour rendre le texte facile à lire pour l'utilisateur final, en adaptant le contenu à la plage que l'oeil humain parcourt aisément lors de son parcours en travers de la page..
Sauf si votre modèle est spécifiquement un modèle étroit ou large, vous voudrez probablement coller votre texte à une largeur constante qui respecte cette somme mathématique simple: 30 x la taille du texte. Utilisez-le comme base de référence à côté de votre remplissage et de votre utilisation du nombre d'or (si vous décidez de l'utiliser) pour créer une largeur assez facile à lire. Il suffit de ne pas tout gâcher en diminuant l'espacement des lignes ou en rendant le texte trop petit..
Il est un peu plus difficile de définir ce qu'est une bonne mesure, car elle peut être très différente selon les conceptions. Un texte plus large pourrait mieux convenir à un design spécifique.
L'alignement du texte est également un facteur important. Vous pouvez généralement utiliser quatre types: gauche, centre, droite et justifié. La règle d’or de la typographie est de la rendre lisible, et vous n’avez pas autant de contrôle sur cela si vous optez pour un alignement justifié du texte. Le texte justifié est essentiellement un texte optimisé pour remplir toute la largeur de votre élément, créant ainsi un rectangle de texte parfait. Cela peut être utile dans les journaux et dans les journaux, mais sur le Web, cela ne fonctionne tout simplement pas très bien. Une ligne peut être beaucoup plus chargée qu'une autre, mais ce n'est pas quelque chose que vous pouvez contrôler spécifiquement..
Bien sûr, vous avez peut-être perfectionné votre typographie à l’échelle de 100%, mais certains utilisateurs pourraient visionner avec un zoom avant ou arrière de la fenêtre de leur navigateur. Par conséquent, votre typographie doit pouvoir s'adapter correctement lorsque l'utilisateur commande un zoom avant ou arrière. Ceci est très simple à tester et à manipuler, simplement en mettant à l'échelle votre navigateur.
Prenez note de vos visiteurs avec des exigences d'accessibilité, à la fois dans et hors de la typographie. Bien sûr, la mise à l'échelle peut être utilisée par tout le monde et souvent même accidentellement. Le netbook de mon frère a régulièrement trop de zoom sur sa fenêtre Chrome, uniquement par accident à cause du geste sur le trackpad.
Bien sûr, le type de zoom étagé possible dans la plupart des navigateurs n’est qu’un type. Mac OS X Lion introduit un superbe pincement au zoom de type iOS qui zoome sur une page comme s'il s'agissait d'une image. Il faut également considérer ce type de zoom et à quoi ressemble leur texte quand il est vu dans la même présentation, mais de façon beaucoup plus rapprochée.
En un mot, le poids d'une police est son épaisseur. Une police peut avoir plusieurs poids, allant de la ligne ultra-légère à la dalle ultra-noire. Changer le poids de certains textes est généralement utilisé pour ajouter une définition subtile afin de déterminer l’importance, comme la mise en surbrillance de mots clés ou un paragraphe d’ouverture, lorsqu’il est utilisé dans un paragraphe..
Le poids de la police peut être utilisé dans de nombreux scénarios différents. Par exemple, vous pouvez l’utiliser dans un message pour sélectionner des mots ou des expressions clés. Distinguer par le poids de la police signifie moins de polices multiples ou d’autres facteurs susceptibles de nuire à la lisibilité..
La typographie fait vraiment partie intégrante du design. Lorsque vous consultez un blog, vous remarquerez à quel point il y a du texte sur la page et quelle influence il peut avoir sur le design dans son ensemble. Ces huit facteurs sont les plus importants en matière de typographie et peuvent modifier radicalement l’esthétique de son design..
Choisir si vos polices utilisent des empattements est une décision importante, et la façon de les mélanger est encore plus critique. Le nombre de polices, l’espace entre les lignes de texte, la mesure, l’alignement et le poids sont également des caractéristiques importantes. En un mot, votre typographie est quelque chose qui doit être bien pensé et non pas jeté ensemble au hasard.
Accentsconagua