10 règles de typographie Web que tout concepteur doit connaître
Lorsque quelqu'un visite un site Web que vous avez conçu, il y a peu de chances qu'il se soucie peu des couleurs, des images ou des sons. Il regarde immédiatement le texte.
Peu importe le nombre de cloches et de sifflets que vous avez intégré à un site Web, tout le monde compte sur le texte pour accomplir tout ce qu’il visite sur le site .
Cela seul devrait faire de la typographie, l'art d'arranger le type, une priorité pour tout concepteur Web.
Dans cet article, nous examinons 10 règles simples à prendre en compte lors de la conception de votre prochain projet Web.
1. Lisez le texte vous-même
Avec un design comme JonesingPour un concepteur sans grande compréhension du texte aurait eu du mal à composer la typographie qui fait que ce site fonctionne vraiment. Lorsque vous abordez votre propre typographie, vous n'avez probablement pas à vous soucier de l'écriture du texte d'un site - mais vous devez le lire!
Certains concepteurs de sites Web pensent que le simple fait de copier-coller un fichier texte constitue la totalité de leurs tâches textuelles. Mais la lecture du texte donne au moins une idée de base de la manière dont le texte peut être intégré dans un site Web, évitant ainsi la déconnexion entre l’écriture et la conception d’un site Web.
Vous pouvez lancer votre typographie encore plus loin, si vous pouvez lire le texte une fois qu'il est en place dans votre conception. Prenez note de l'espace autour des lettres . Avez-vous des espaces exceptionnellement grands qui ont l'air bizarre? Une typographie prudente peut éliminer ces problèmes. Vous pouvez également avoir une idée des lignes qui peuvent être trop longues à lire facilement, des sauts de ligne difficiles et des problèmes similaires.
2. Vider Lorem ipsum dès que possible
Pensez-vous que vous auriez pu concevoir Le site de Jesus Rodriguez Velasco sans le texte actuel? Le site dépend fortement du mot écrit et de mots très spécifiques. Même le corps du texte a fait l'objet d'une attention particulière avec une lettrine et d'autres ajustements qui n'auraient pas été possibles avec Lorem ipsum.
À moins que le texte de votre site Web ne soit en réalité Lorem ipsum, le texte factice ne présentera aucune similitude avec la réalité . Cela signifie que tout ajustement que vous pourriez apporter au texte - ou à la conception qui l’entoure - devra attendre jusqu’à ce que vous obteniez la vraie chose. Demander (et obtenir) du texte à votre client le plus tôt possible dans le processus vous donnera la possibilité de faire correspondre votre conception globale et votre typographie.
3. Montrer une hiérarchie claire
Quand vous arrivez à Rik Cat Industries , vous savez immédiatement où commencer la lecture. Même s'il y a quelques liens en haut de la page, l'accueil de Rik attire votre attention en premier. C'est beaucoup plus grand, en utilisant la typographie pour établir une hiérarchie claire .
Chaque site a besoin d'une hiérarchie bien développée: des indicateurs indiquant par où commencer pour commencer à lire et comment procéder. Votre typographie peut fournir cette hiérarchie - comme le fait Rik - à condition que vous connaissiez votre ordre hiérarchique à l'avance. En pensant à la taille et aux caractères, vous pouvez mettre en évidence un morceau de texte en tant que titre de telle sorte que les différents emplacements du dessin ne peuvent pas le fournir.
La hiérarchie de votre conception va bien sûr au-delà de la typographie que vous utilisez, mais comme les utilisateurs commencent presque toujours par le texte, il est logique que les concepteurs fassent de même.
4. Faites attention à la typographie macro et micro
S'appuyant entièrement sur la typographie pour leur première page, le Crowley Webb et ses associés Le site Web a été conçu en fonction de deux facteurs: à la fois macro et micro typographie .
La typographie macro est la structure globale de votre type, comment elle apparaît dans le contexte de votre conception et de son esthétique lorsque vous considérez votre texte comme un bloc à part entière.
La micro typographie concerne davantage les détails de l'espacement, les problèmes qui déterminent si les mots sont faciles à lire. La micro typographie est une nécessité absolue pour constituer un bloc de texte: s’il n’est pas lisible, il est inutile de procéder. Crowley Webb and Associates a abordé cette question à la fois en écrivant avec soin et en séparant les mots que le site mettrait en évidence.
Mais la macro-typographie vous offre l'opportunité de rendre votre texte plus que bien espacé: c'est l'occasion de le rendre attrayant et de l'intégrer à votre conception . Le choix des polices et des couleurs sur ce site Web crée un ensemble viable. Ignorer les deux facettes de la typographie est préjudiciable.
5. Faites attention avec les couleurs de type
Il serait si facile de perdre du texte en arrière-plan de ArtofElan , en particulier le rouge vif sur la combinaison rouge foncé utilisé par le concepteur. Lorsqu'un concepteur de sites Web utilise un type de couleur, il est absolument nécessaire de veiller à ce qu'une combinaison rouge sur rouge ou même jaune sur rouge soit visible . Après tout, tout le monde a visité un site Web où le texte semblait ne présenter qu'une seule nuance par rapport à la couleur d'arrière-plan et avait eu un problème de fatigue oculaire en essayant de le lire.
La solution la plus simple consiste à vous assurer que la couleur de votre type est très différente de celle de votre arrière-plan . Le noir et blanc fonctionnent si bien car ils sont aussi différents que possible, mais il existe des combinaisons de couleurs qui fonctionnent bien: quelque chose comme un bleu foncé sur un rose clair fera le travail. Le texte renversé est assez délicat… alors que vous pouvez travailler avec un texte rose clair sur un fond bleu foncé, vous êtes plus susceptible de recevoir une plainte à ce sujet.
6. Soyez sérieux à propos de votre CSS
Si votre CSS est solide, vous pouvez vous déplacer de manière transparente entre les pages de votre site Web, tout comme les différentes versions de votre site Web. Hutchouse.com compter sur différentes feuilles de style pour créer des effets impressionnants. Même si vous ne prenez pas les choses aussi loin que Hutchhouse, CSS peut vous aider à éliminer les problèmes de typographie des amateurs, comme changer les polices et les tailles entre les pages.
CSS peut fournir une cohérence facile entre votre typographie sur l'ensemble d'un site Web . Si vous êtes cohérent dans la manière dont vous utilisez le type, cependant, en brisant cette cohérence, même une petite quantité peut faire ressortir tout ce que vous souhaitez mettre en valeur, tout comme créer et casser une grille peut permettre une conception efficace. Dans la typographie Web, il est facile de garder vos polices cohérentes.
7. Ditch le texte centré
Choisir une alternative au texte centré peut rendre la conception d’un site Web facile à lire , tout comme DesignCanChange.org . Opter pour un texte centré, en particulier sur une page comme celle-ci, créerait une page problématique: le centrage des bords irréguliers créé de chaque côté rend la lecture beaucoup plus difficile et le texte parfaitement centré offre de nombreuses possibilités de distorsion. vos dessins sur différents écrans.
Dans certains cercles, le type centré n’est qu’un pas vers l’utilisation de Comic Sans dans la conception d’un site Web. Vous pourriez le considérer comme un titre, mais en général, l' alignement de votre texte sur la gauche rendra vos lecteurs beaucoup plus à l'aise, à moins qu'ils ne lisent de droite à gauche .
8. Traitez les devis intelligents et autres symboles
Luigi Ottani Le site présente ce que vous apporterez une attention particulière aux guillemets et autres symboles: un manque complet de problèmes lorsque le site affiche ces symboles. De nombreux sites Web sont parsemés de symboles qu'un navigateur ne peut pas afficher. C'est un héritage du fait que la plupart des textes avec lesquels un concepteur Web travaille sont probablement écrits dans Microsoft Word ou dans un autre logiciel de traitement de texte qui apporte toutes sortes de petites modifications au texte sans que l'auteur y prête beaucoup d'attention.
Les citations intelligentes sont l’un des pires changements: les guillemets bouclés Word remplacent automatiquement les guillemets droits . Un autre problème survient lorsque vous travaillez avec un texte écrit dans une autre langue: les accents et les trémas peuvent causer autant de problèmes que l’aide de Word. Si vous copiez et collez du texte avec de telles modifications dans votre conception, vous devrez probablement revenir en arrière et les corriger plus tard, du moins pour certains navigateurs Web.
Au lieu de cela, obtenez-les tôt dans le processus de conception afin que vous puissiez vous concentrer sur l'amélioration de votre texte avec votre conception . Si vous souhaitez que ces symboles sophistiqués et citations intelligentes apparaissent dans la conception finale, séparez vos entités HTML.
9. Prévoyez que votre texte grossisse
Lorsque vous augmentez la taille du texte sur Veerle Pieters ' site web, ce n’est pas aussi beau que si vous utilisiez la taille de police choisie. Cependant, vous pouvez toujours tout lire, localiser des liens, etc., ce qui est vrai pour très peu de sites Web.
C'est parce que, en partie, de nombreux concepteurs s'assurent de mettre du texte en police de 10 points ou même plus petit. La plupart des gens sont à l'aise de lire de telles polices, mais les baby-boomers constituent une partie importante de la population de la navigation sur le Web et beaucoup de ces internautes vieillissants vont configurer leurs navigateurs pour afficher le type le plus possible . Votre texte, ainsi que votre conception, doivent pouvoir s’adapter à ce fait.
Cela vaut également la peine de prendre en compte le fait que la taille du navigateur peut varier considérablement , déplaçant le texte vers des endroits inattendus si vous ne faites pas attention. Si le fait de dépasser la taille d'un point crée des problèmes, ce groupe de personnes plus âgées passera rapidement au prochain site Web. Avoir à faire défiler pour toujours sur le côté aura un résultat similaire.
10. Montrer une préférence pour sans empattement
Si vous regardez la Une liste à part site Web, à peu près tous les gros blocs de texte sont placés dans une police sans empattement, ce qui le rend beaucoup plus facile à lire. Les titres et autres blocs de texte plus petits sont disposés dans des polices empilées, créant un équilibre entre les deux.
Quand il s'agit de disposer du texte sur un écran, les polices sans empattement sont presque toujours la meilleure solution , surtout si vous avez choisi une police comme Verdana conçue pour être affichée sur un écran d'ordinateur. Les polices en série ont plus de chance d’être mal affichées, de devenir floues ou même pixélisées.
Il n'est pas possible d'éviter complètement les empattements, bien sûr. Mais en particulier pour les gros blocs de texte, l'utilisation d'une police sans empattement peut offrir un niveau de garantie supplémentaire pour que les visiteurs puissent facilement lire le texte d'un site. Lorsque vous choisissez des polices pour un projet, parcourez d' abord les options sans serif .
Un dernier commentaire
La typographie est facilement négligée, et même lorsqu'un concepteur le prend en compte, il est facile de le radier en tant qu'activité nécessitant beaucoup de temps avec peu de retour sur investissement. Mais passer quelques minutes avec le texte qui sera la pièce maîtresse de votre conception peut le transformer en quelque chose que n'importe quel concepteur de sites Web pourrait attribuer à un élément prenant en charge le reste de la conception.
Écrit exclusivement pour WDD d'ici jeudi Bram.
Suivez-vous ces règles et d'autres? S'il vous plaît partager vos points de vue ci-dessous ...