Share
La typographie est un domaine immense. Les gens consacrent des années de leur vie à cet ancien métier et pourtant, il y a toujours quelque chose de nouveau à apprendre. Dans cet article, je passerai en revue les principaux points à prendre en compte lors de la sélection d'une police de caractères pour un site Web..
Tutoriel republiéToutes les quelques semaines, nous revoyons certains des articles préférés de nos lecteurs tout au long de l'histoire du site. Ce tutoriel a été publié pour la première fois en octobre 2010.
Lorsque vous concevez pour le Web, vous devez accepter que le contenu change. Il est tout simplement hors de question de prendre le temps de kern (ajuster l'espace entre les lettres) de chaque titre sur un site Web énorme. En d'autres termes, vous abandonnez un peu de contrôle.
Ce sur quoi je vais me concentrer aujourd'hui est typographie pratique. Pour moi, cela signifie accepter de ne jamais avoir le contrôle total sur les types figurant sur vos sites Web. Choisir une police de caractères, choisir une taille, voilà les éléments sur lesquels nous avons un mot à dire. La typographie consiste à apprendre comment et surtout pourquoi, ajuster ce que vous contrôlez. Commençons.
Que faites-vous avec le type? Lis le! Alors pourquoi tant de sites rendent-ils si difficile de faire cela? Qu'il s'agisse de tailles de polices minuscules, d'une hauteur de ligne entassée ou de polices simplement laides, il semble que de nombreux sites sont déterminés à ne pas vous laisser profiter de leur contenu.!
En rendant votre type lisible, vous passez immédiatement devant au moins la moitié de la concurrence, ce qui est une chance, vraiment, car ce n'est pas si difficile!
Lorsque vous décidez du type de caractère à utiliser sur votre site Web, il est important de se rappeler: ne pense pas trop. Je sais que de nombreux concepteurs détestent utiliser Helvetica, car il est excessivement utilisé. Je suis d'accord avec cela, mais il y a une information très importante que cette affirmation laisse de côté: pourquoi. Les gens abusent de Helvetica parce que c'est juste tellement bon. Il convient à pratiquement tous les modèles imaginables, il convient aussi bien aux petites que grandes tailles.
Bien que cela puisse aller à l’encontre de vos croyances de placer votre type dans un visage si maltraité, si cela fonctionne, foncez.
Votre copie de corps est sans doute la partie de votre conception qui doit être la plus lisible, alors assurez-vous de choisir une police qui fonctionne bien dans les petites tailles. Qu'est-ce que je veux dire par là? Si vous pouvez définir votre copie sur 10 px et que vous pouvez toujours distinguer son contenu, c'est une bonne indication que vous avez choisi une police de caractères lisible..
Cela couvre la copie du corps, mais qu'en est-il des titres?
La lisibilité dans les gros titres est beaucoup plus facile à comprendre que dans le corps du texte. Si vous pouvez comprendre ce qu'il dit immédiatement, alors il est suffisamment lisible..
Ce qui est bien avec les caractères, c'est qu'une fois que vous avez travaillé sur suffisamment de projets, vous avez une bonne idée de ce qui fonctionne et de ce qui ne fonctionne pas. A partir de là, vous serez mieux placé pour faire des choix critiques concernant les polices..
Il n'y a pas de formule pour choisir les bonnes polices pour votre site web. Souvent, le meilleur moyen d’en choisir une est d’essayer chaque police que vous pensez susceptible de fonctionner, puis de comparer. Le choix des polices est vraiment un instinct, mais il est important de se rappeler que 90% du temps, un utilisateur ne pense pas à la police utilisée. Par conséquent, si elle est lisible, c'est souvent suffisant..
Il y a rarement (si jamais) une situation où juste un la police de caractères convient pour une utilisation sur un site. Le site Web moyen a beaucoup de texte. Il est impossible qu'une seule police fonctionne pour tous! La grande majorité des sites Web bien conçus utilisent deux polices de caractères: une pour le corps de la copie et une pour les titres..
Lors du choix d'une paire de polices, la chose la plus importante à considérer est la manière dont elles fonctionnent ensemble. "Sont-ils assez semblables?" "Trop semblables?" "Pas assez différents?" Ce sont toutes des questions que vous devriez vous poser. Je trouve que la meilleure façon de choisir une paire de polices qui fonctionne consiste à les mettre côte à côte et à choisir celle qui convient le mieux. Il n'y a aucun moyen de savoir lequel est le meilleur jusqu'à ce que vous les ayez tous essayés.
Parfois, la chose la plus appropriée serait deux sans-serifs, tandis que d'autres fois, vous voulez un sans pour les titres et un serif pour la copie du corps. Peu importe qu’ils aient la même apparence, ce qui compte, c’est de savoir si agir de manière similaire. Cela dépend bien sûr du reste de votre conception. Quelle que soit la police que vous choisissez doit véhiculer votre message avec force, et si cela implique des caractères contrastés, foncez..
Simon Collison utilise parfaitement le couplage de polices sur son site, choisissant un sans-serif fort pour les titres principaux et un simple Serif pour les autres titres, ainsi que des titres plus petits. Ce partenariat affiche habilement le message que le site Web essaie de dire, de manière à ce que chaque police ne puisse pas exprimer individuellement..
En règle générale, les concepteurs préfèrent au minimum fixer leur corps au format 12px. Cependant, la plupart ont choisi une taille plus grande comme 14px, ce qui est encore meilleur pour la lisibilité. Le choix de la taille des polices est très facile à définir, mais ce sont les titres qui commencent à se compliquer..
Quelle doit être la taille de vos titres? Ça dépend. En observant et en créant des sites Web, je suis parvenu à la conclusion qu'un titre ne devrait avoir que la taille voulue. Cela signifie que vous devriez essayer différentes tailles jusqu'à ce que vous en trouviez une qui soit juste assez grande pour attirer l'attention que vous voulez, mais pas plus grande, à moins que le texte ne soit énorme, c'est ce que vous voulez, auquel cas passez à autre chose.
La nature d'un titre est grande. C'est un élément important de la page, alors il devrait naturellement être plus gros, non? Oui et non. Oui, les titres sont généralement plus volumineux que d'autres éléments, mais non, ce n'est pas la seule façon d'attirer l'attention sur eux. La couleur, le poids et le placement sont également importants pour l’établissement d’une hiérarchie visuelle à vos pages.
Le point clé à retenir à propos de la hiérarchie visuelle est que tout est relatif. Texte sur votre site doit seulement se démarquer par rapport à l'autre texte sur votre site. Prenez le site de Wilson Miner par exemple. Ses titres sont assez petits pour leur importance et étonnamment proches de leur taille. Cependant, son utilisation de la couleur distingue le titre le plus important, et leur donne plus de sens.
L'utilisation du type est un outil très important pour établir une hiérarchie visuelle, que ce soit par la taille, la couleur, le poids ou même le placement..
L'interligne ou l'espace entre les lignes de texte est un outil précieux pour la lecture de texte. Une mauvaise reliure peut gâcher une copie par ailleurs stellaire, et une bonne relance peut même rendre le plus mauvais type lisible. Heureusement, ce n'est pas si compliqué à mettre en place.
Utiliser le CSS hauteur de la ligne propriété, vous pouvez facilement attribuer un espace entre vos lignes de copie. De manière générale, pour les gros blocs de texte, 1,5 fois la taille du texte est une bonne taille. Un texte plus petit doit avoir un caractère plus étroit, et un texte très volumineux doit en avoir beaucoup. Ce n'est pas si compliqué, vraiment.
Le suivi est l'espace entre les caractères du texte. J'admets que celui-ci est un peu flou en ce qui concerne la «typographie pratique», dans la mesure où CSS ne nous donne pas un contrôle énorme sur celle-ci. Habituellement, vous n’aurez pas à vous en préoccuper pour les petits textes, c’est uniquement pour les titres que cela devient un problème. De manière générale, en ajoutant espacement des lettres: 1px; ou espacement des lettres: 2px; à votre CSS devrait être assez d'espace entre les lettres.
Il serait également intéressant d’ajouter le suivi aux sociétés à petite capitalisation. Dans ce cas, il est généralement considéré comme une bonne pratique d’ajouter un ou deux pixels supplémentaires entre les caractères, car ils apparaissent naturellement plus grands..
Bien que n'étant pas une typographie à proprement parler, la couleur est une partie très importante du type de chaque site Web. Je ne parle pas de schémas de couleurs, mais plutôt sur le contraste nécessaire pour assurer la lisibilité sur votre site. Le texte noir sur fond blanc (ou sur fond clair) est généralement considéré comme la couleur la plus lisible pour le texte..
Je ne dis pas que vous devriez tout mettre en noir sur blanc, mais que, lorsque vous concevez, vous devez être conscient du contraste de votre texte. Il pourrait revenir te mordre si tu ne fais pas attention.
À mon avis, l’utilisation de la grille est l’idée la plus importante pour la typographie pratique sur le Web. Vous pouvez avoir de superbes polices, espacements et couleurs, mais si vous n’avez pas une bonne mise en page, vous pouvez aussi bien utiliser comic sans.
L'utilisation d'une grille lors de la conception avec le type fournit un équilibre clair et une structure géométrique à votre conception. Ce n'est pas la solution miracle à un mauvais design, mais si vous concevez une grille dès le début, vous pouvez être sûr qu'au moins votre mise en page sera solide..
Alors, qu'est-ce qu'une grille a à voir avec la typographie? Mettre tout simplement: tout. La grille incarne tous les idéaux fondamentaux de la typographie. C'est géométrique, cohérent, utilisable et surtout: belle.
Définir votre texte avec une grille est un moyen essentiel d'établir une hiérarchie visuelle, et constitue un excellent indicateur de la taille (ou de la taille) de votre texte..
Comme je l'ai déjà dit, si votre typographie est lisible, vous avez déjà dépassé les 50% de la concurrence, alors qu'en est-il de l'autre moitié? Si vous en êtes arrivé là, nous abandonnons ensemble les règles claires et cohérentes en matière de lisibilité et entrons dans le monde trouble et mystérieux de la singularité..
Vous voulez que votre site Web se démarque? Étape 1. Employer une typographie unique. Pour vous, cela signifie probablement que vous utiliserez des polices uniques. Mais qu'est-ce qui rend une police unique? Pour moi, ce n'est pas celui qui n'est pas utilisé souvent, mais celui qui a un message ou un sentiment qui n'est pas employé par d'autres visages.
Choisir une police unique est vraiment une question de sentiment. Est-ce que cette police ressentir différent? Ou est-ce simplement différent? Lors du choix des polices de caractères pour tous les projets, vous devez toujours tenir compte de l'aspect du design. Comme il s’agit là d’une opinion tout à fait personnelle, je ne peux pas vous aider à trouver une police de caractères unique. Ce que je peux faire, c'est montrer un exemple de polices uniques.
La cabine de design a un logo et un design très uniques. Il est fort mais élégant, attirant et subtil. Quand je regarde sa conception, le sentiment de classe se dégage du site. Il dit: «Je sais ce que je fais."
Combien de sites Web connaissez-vous dont le logo est aussi grand que le contenu? Qu'en est-il d'un titre ultra-mince? Contrairement à mon dernier point, être peu orthodoxe consiste à voir ce que les autres font, puis à faire le contraire..
Les gens de Savvy Belfast sont intelligents. Ils ont remarqué l'aspect restreint de la plupart des sites Web et ont décidé de remplacer toute copie dépourvue de sens par un seul énoncé..
Même si vous visitez leur site pendant un instant, vous ne pouvez pas vous empêcher de vous rappeler leur nom..
La typographie n'est pas sa propre chose. C'est une partie de la conception web comme les autres. Le type est important, certes, mais vous ne devriez pas oublier que c’est en partie ce qui rend une conception de site Web géniale. Vous devez concevoir votre type en tenant compte du reste de votre conception..
Si vous utilisez une texture de fond très élaborée, un bon serif conviendrait peut-être à vos titres..
Mon point ici est simple: n'oubliez pas le le contexte. Le design est un domaine immense et, aujourd’hui, je n’en parle qu’une partie. Pour réussir la conception d'un site Web, toutes les pièces doivent être associées. C'est l'objectif: créer l'expérience que quelqu'un aura sur votre site Web. Vous ne pouvez pas faire ça avec il suffit de taper, ou juste la couleur, ou même juste content!
Tellement une expérience est définie par ce que vous ressentez: heureux, triste, amusé, en colère, bla bla bla. Les êtres humains ont un large éventail d’émotions et, en tant que designers, il nous incombe d’évoquer ces émotions avec nos créations..
De toutes les choses dont j'ai parlé aujourd'hui, c'est de loin le plus abstrait et c'est un peu difficile à expliquer. Au lieu d’essayer de vous expliquer cela, laissez-moi vous montrer.
Quand j'ai visité Solid Giant pour la première fois, j'ai souri. J'ai souri la prochaine fois que je l'ai vu, et même la prochaine fois. Immédiatement, j'ai ressenti une parenté avec le design. Ce grand «G» flou est trop adorable pour être oublié!
Franchement, je pense que c'est le génie.
Il n'y a aucun moyen d'enseigner la conception émotionnelle, c'est quelque chose que vous devez expérimenter, puis jouer avec vos propres conceptions..
Eh bien, vous avez atteint la fin du poste. J'espère qu'au moins vous avez appris quelque chose, mais sinon, c'est bien aussi. S'il y a quelqu'un qui pense que je veux vous laisser après avoir lu ceci, c'est avant tout: être lisible. Le reste suivra.
Selon vous, quelle est la partie la plus importante de la typographie sur le Web? Laissez votre avis dans les commentaires!
Accentsconagua