Les bons, les mauvais et les bons exemples de typographie Web. Les bons, les mauvais et les bons exemples de typographie Web

Cette liste a été établie sur la base des résultats du deuxième trimestre. 2008. Les « hit-parade » précédents peuvent être retrouvés et.

Chaque exemple est accompagné d'un court commentaire, et cliquer sur la capture d'écran mène au site d'origine.

Conférence sur les semences

Pas de flash, pas d'images, pas de bruit inutile ; juste une police bien stylisée et un texte bien écrit : une véritable preuve que vous pouvez obtenir d'excellents résultats avec juste une police. J'aimerais voir quelques autres exemples de ce genre.

Concevoir l'actualité

Excellent contraste entre le titre et le contenu du corps, beaucoup d'espace propre et une bonne organisation.

OmniTI

Joli logo, texte clair et très belles couleurs. Vous pouvez en savoir plus sur le développement de la conception.

Designr.it

Magnifique logo orné (quelqu'un sait de quelle police il s'agit ?) et de nombreux détails exquis.

Vue Conception

Andy Rutledge est un designer qui pratique les mêmes principes qu'il prône. J'aime la façon dont il modifie la taille de la police en fonction de la date de publication de l'article, afin que le texte le plus récent corresponde à la police la plus grande.

Administrateur WordPress.org et WP 2.5.x

Bien que la plateforme de blogs WordPress ne soit pas basée sur un site Web, son site est affiché chaque jour sur des milliers, voire des millions de nos écrans. J'aimerais que davantage d'applications en ligne et hors ligne soient aussi belles.

Notre type

Je ne voulais vraiment pas inclure ce site dans la revue car il utilise Flash. Cependant, il fait un excellent travail en affichant de superbes polices (et certaines de mes préférées, pourrais-je ajouter).

Le pont

Un autre site qui est simplement basé sur les polices. Un excellent exemple de hiérarchie et de mise en page. Qui a dit qu’« une photographie vaut mieux que mille mots » ? Non, la police parle mieux.

Bon sang ouais mec

Beaucoup d'informations sans se sentir encombré, et le site est lié à une bonne grille de mise en page.

Architectes de l’information

Les concepteurs n'avaient pas peur des grandes zones vides et d'une gamme de couleurs limitée.

Naz Hamid

Bien joué. Un design qui parle de lui-même.

Jon Tan

Typographiquement riche, élégant et sans chaos, et le logo... ce n'est pas une image !

À l'étude

Il y a beaucoup d'informations bien organisées et accompagnées d'une palette de couleurs soigneusement choisie.

Actions d'Elliot Jay

Ce site a été nominé dans de nombreux concours. Il est arrivé ici grâce à sa bonne utilisation des polices.

Les choses que nous fabriquons

Police colorée, organisée et grande.

Dans le prochain article, « Un examen approfondi de la typographie pour le Web », nous examinerons de plus près certains de ces sites.

Un bon site Web commence par une belle typographie. Et même si certaines règles peuvent être enfreintes, la bonne chose à faire est parfois de revenir aux principes de base d’une bonne typographie et de la manière de la créer.

Ce rappel vous aidera à regarder vos créations avec un regard neuf, à réfléchir à de nouvelles approches ou à revenir à une conception plus simple.

Aujourd’hui, nous allons donc ignorer les tendances de la mode et nous concentrer sur la théorie de la typographie et sur la façon dont les « règles » peuvent nous aider à créer un beau texte.

Taille et hiérarchie

Questions de taille. Pour créer une typographie lisible, cela peut être un facteur critique. Un petit texte est difficile à voir, et encore moins à lire, mais un texte trop grand dépassera la hauteur de la ligne et prêtera à confusion.

La typographie lisible comporte plusieurs niveaux de hiérarchie. Ces couches indiquent à l'utilisateur ce qu'il doit lire en premier, en deuxième et en troisième. En outre, il existe une hiérarchie évidente dans les tailles de texte : une taille pour les titres, une autre pour le corps du texte et une troisième pour les sous-titres.

Suivi et crénage

Le suivi et le crénage sont souvent confondus. Le crénage est le processus de modification sélective de l'espacement entre les lettres en fonction de leur forme. Le suivi consiste à modifier l'espacement entre des ensembles de lettres, c'est-à-dire des paragraphes ou un bloc entier de texte.

Le crénage est souvent appliqué à des éléments spécifiques pour créer de la clarté, améliorer la lisibilité et même styliser de grands passages de texte. Le suivi est souvent utilisé pour affiner une police de corps de texte trop large.

Limitez le nombre de styles de police que vous appliquez

Pour la plupart des projets, deux ou trois styles suffiront. Pour éviter de faire le mauvais choix, recherchez une famille de polices proposant de nombreuses variantes de style disponibles. Les polices de la meilleure qualité sont disponibles dans une grande variété de styles : gras, régulier, italique, condensé, noir, etc.

Mélanger et comparer les styles

Je recommande de choisir deux styles différents. La paire la plus courante est serif et sans serif. Lorsque vous combinez différents styles et traits, recherchez des lettres qui ont la même hauteur et la même forme de coupe (l'espace à l'intérieur des lettres fermées comme « o »).

Ces petits détails feront une grande différence dans l’apparence de ces polices et dans la facilité de lecture du texte.

Transferts et alignements

Dans la plupart des cas, les sauts de ligne et les justifications ne sont pas nécessaires. Dans le cas du texte en ligne, ces techniques ne font que compliquer son assimilation et sa compréhension rapides. Les césures interfèrent avec la lecture et une justification complète conduit souvent à un formatage illisible.

Ne changez pas les polices

Ne changez jamais la police. N'essayez pas de le rendre plus épais, plus fin ou plus haut. Mieux vaut en choisir un autre.

Les concepteurs de polices passent beaucoup de temps à s’assurer qu’une police est lisible et répond aux exigences de style. Il n'est pas nécessaire de changer quoi que ce soit. Vous ne pourrez pas l'améliorer et, dans la plupart des cas, vous ne ferez que tout gâcher.

Si la police ne vous convient pas, cherchez autre chose. Utilisez l'outil de polices similaires Identifont, un outil qui identifie les polices similaires.

Contraste

Utilisez la typographie pour créer du contraste. Tout comme vous utilisez différentes tailles pour créer une hiérarchie, créez un intérêt visuel en modifiant l'épaisseur, la couleur et le style de la police.

La couleur est l’un des moyens les plus efficaces et les plus simples de créer du contraste. Le contraste idéal est un texte sombre sur fond clair (ou vice versa). Vous disposez d’une gamme de couleurs presque illimitée pour vous aider à atteindre cet objectif. Lorsque vous jouez avec les couleurs et la typographie, gardez à l’esprit que certaines combinaisons de couleurs, comme le rouge vif sur le bleu vif, peuvent être assez difficiles à lire.

En matière de contraste, la meilleure façon de créer un texte lisible est d’utiliser un arrière-plan simple. Mais s'il contient des éléments visuels tels que des images ou des motifs, augmentez la taille des lettres - cela créera une séparation entre les éléments de texte d'arrière-plan et de premier plan.

Format de bande de cadran

Le format de la barre de caractères correspond à la taille du conteneur contenant le texte. Il peut s'agir de la largeur de tout le cadre de texte ou d'une seule colonne.

Le format de ligne est important car le nombre de caractères (y compris les espaces, les caractères spéciaux et la ponctuation) à l'écran affecte la lisibilité. Si les lignes sont trop longues ou trop courtes, il sera difficile pour l'œil de l'utilisateur de s'y retrouver.

Extrait des éléments du style typographique : « N'importe quel nombre de caractères, allant de 45 à 75, est considéré comme une longueur de ligne satisfaisante pour la composition sur une seule colonne. Une chaîne de 66 caractères (y compris les lettres et les espaces) est considérée comme idéale. Pour la saisie sur plusieurs colonnes, l’option intermédiaire idéale serait une ligne de 40 à 50 caractères.

Même si personne ne pensait à la typographie mobile au moment de la publication de cet ouvrage, la recommandation de composition multicolonnes reste d'actualité. Dans les cas de petits écrans, vous pouvez même utiliser 35 caractères par ligne.

Traduction de l'article par Carrie Cousins

Le conservateur de la ressource de polices Typewolf, Jeremy Shoaf, a sélectionné des exemples de sites proposant des solutions de polices intéressantes et a décrit leurs avantages et leurs inconvénients.

Combinée à la texture fine du papier, cette typographie crée la sensation de lire un livre.

Simplement de la gomme

Grâce aux polices Web qui permettent de faire correspondre la typographie de l’emballage du produit à la typographie du site Web du fabricant. Cela arrive de plus en plus souvent. Simply Gum a choisi Gotham comme identité de marque, en gardant l'identité cohérente sur les canaux en ligne et hors ligne.

Ce site est un bon exemple de la façon dont parfois un seul style est le seul nécessaire. En utilisant les différents poids et les titres en majuscules de Gotham, Simply Gum a établi une hiérarchie claire avec un seul poids.

Les logos dans l’en-tête et le pied de page sont au format PNG, ils perdent donc la clarté et l’évolutivité d’une police Web. Utiliser une police Web pour votre logo n'est pas toujours réalisable, surtout si vous avez besoin d'un bon contrôle sur le crénage ; cependant, une image SVG est meilleure qu'une image PNG dans ce cas car elle peut être mise à l'échelle tout en conservant sa clarté.

Brève conclusion

Heureusement, les exemples ci-dessus démontrent comment certaines décisions typographiques peuvent avoir un impact sur un design. Voici quelques réflexions clés :

  • Si vous envisagez d'utiliser plusieurs graisses, développez un système cohérent au sein de votre typographie spécifique et respectez-le.
  • Pour le corps du texte, choisissez une police avec des styles italique, gras et italique gras normaux.
  • Si vous optez pour une police populaire, essayez de l'associer à une police moins courante pour que le design se démarque.
  • Créez un guide de style au tout début d'un projet pour garantir une utilisation cohérente des polices parmi les membres de votre équipe.
  • Utilisez des styles contrastés plutôt que similaires.
  • N'utilisez pas de polices d'écran pour le corps du texte. Utilisez les styles comme prévu.
  • N'ayez pas peur de n'utiliser qu'une seule famille de styles. Vous pouvez établir une hiérarchie avec des grammages et des styles différents au sein d'une même famille.
  • Si votre logo le permet, créez-le en SVG pour plus de clarté et d'évolutivité.

 

Il pourrait être utile de lire :