10 tendances typographiques web à suivre en 2012

L'année dernière, 2011, a été l'année où la typographie Web a finalement atteint sa maturité grâce à la popularité croissante du site Web polices . L'histoire de la conception des sites web a été riche en inspiration et en innovation, mais peu d'entre elles ont porté sur la typographie, en grande partie à cause du manque de choix police disponibles. Certes, la typographie ne se résume pas à police, mais lorsque vous n'avez le choix qu'entre cinq polices pour la plupart de vos travaux, imaginez un monde culinaire où vous ne pourriez choisir que cinq ingrédients.

Les concepteurs de sites web sortent enfin du coma typographique des 15 dernières années et utilisent une variété de polices de caractères dans leurs compositions. Grâce à l'adoption généralisée de la règle CSS @police-face et à l'essor des bureaux de services Web police , il existe aujourd'hui près de 50 000 polices disponibles pour vos créations qui fonctionneront sur pratiquement tous les navigateurs Web - oui, même sur la plateforme Internet Explorer®. IE prend en charge le site Web polices depuis la version 4.

Nous sommes entrés dans une phase de renaissance de l'aspect visuel des pages sur l'ensemble du Web. Les concepteurs expérimentent désormais de nouvelles façons d'afficher du texte qui étaient auparavant impossibles ou uniquement réalisables par l'utilisation de texte dans des images.

L'année 2011 a été une période d'expérimentation intense - certaines plus réussies que d'autres - mais certaines tendances se dégagent clairement quant à l'évolution de la typographie Web et à la manière dont elle se différenciera de la typographie imprimée.

1. Diversité de la voix typographique

 

La typographie est au texte ce que la voix est au discours. Le site polices que vous choisissez a un impact considérable sur le ton et l'émotion du message que vous présentez. Comme l'a dit le célèbre concepteur de livres Richard Bringhurst, "lorsque les caractères sont mal choisis, ce que les mots disent sur le plan linguistique et ce que les lettres impliquent sur le plan visuel sont malhonnêtes, disharmonieux, mal accordés". Maintenant que nous ne sommes plus limités aux "cinq familles fatales" (Arial®, Georgia®, Trebuchet® MS, Times® et Verdana®), nous sommes libres d'explorer, de mélanger et d'assortir une plus grande variété de voix typographiques.

Certains craignent que cela ne conduise à une explosion de polices dans les créations, avec des concepteurs inexpérimentés mélangeant une multitude de polices de caractères, créant une cacophonie de voix plutôt qu'un chœur. L'avenir nous le dira, mais au moins l'ère des voix typographiques monotones est enfin terminée.

2. Plus grandes tailles Police

Le texte sur le web a été trop petit pendant trop longtemps. Pour diverses raisons, dont le mythe du "above the fold" (au-dessus du pli) et la croyance que les petits caractères sont plus sophistiqués, la plupart des caractères sur le web sont réglés sur l'écran à 12 px ou moins. Cependant, comme l'a montré une expérience simple et intelligente menée par Information Architects, les caractères imprimés de 12 points ont visuellement la même taille que les caractères d'écran de 16 pixels

Je commence tous mes projets avec une taille de base police 100 pour cent, qui utilise la taille par défaut du navigateur, généralement 16 px, sauf indication contraire de l'utilisateur. J'utilise ensuite les tailles définies à l'aide de l'unité em pour agrandir ou réduire le texte selon les besoins. Le texte plus petit - comme le texte de bas de page et les notes - peut descendre jusqu'à .625em (~10px en supposant que la taille de base est de 16px), mais le corps du texte doit être au minimum de .875em (14px) à 1em (16px) et les en-têtes commencent à un em et vont jusqu'à deux em, trois em, et même quatre em ou plus. Si vous avez besoin d'aide pour la conversion en PX ou PT, PXtoEM.com est une excellente ressource.

La transition vers un texte plus grand peut sembler gênante au début - j'ai même dû convaincre des clients que le texte n'était pas trop grand - mais une fois que vous vous serez adapté, le petit texte commencera à vous sembler étriqué et à ressembler à du travail d'amateur.

3. Sérifs en dalles Polices

 

La lisibilité, c'est-à-dire le fait de s'assurer que les caractères sont aussi faciles à discerner que possible, est une préoccupation importante pour la typographie Web. De nombreux facteurs entrent en ligne de compte pour qu'un caractère soit lisible ( police), mais deux des plus importants sont la régularité des traits et la présence d'empattements épais ou l'absence totale d'empattements. Les empattements plus fins ont tendance à devenir flous sur les bords, car ils sont brouillés par l'anticrénelage. C'est pour cette raison - ainsi que pour des raisons de style général - que nous avons vu l'année dernière un grand nombre d'empattements de type "slab serif" polices utilisés dans les conceptions de sites web.

Les empattements de type "slab serif" polices sont carrés et d'une largeur généralement uniforme, avec peu ou pas d'amincissement au niveau de l'empattement Prend fin le. Ces polices peuvent avoir une voix typographique forte. Ils donnent souvent l'impression d'être lourds et construits, mais grâce à cela, ils sont clairs, se distinguent sur une page et sont faciles à appliquer à des effets typographiques en utilisant des ombres de texte, en particulier l'effet typographique.

4. Effets typographiques et autres effets d'ombre sur le texte

Longtemps attendues, les ombres de texte sont désormais à la disposition des typographes du web grâce aux feuilles de style en cascade (CSS). Mieux encore, puisqu'il est possible d'ajouter plusieurs ombres à un même bloc de texte, il existe une variété de nouveaux effets qui deviennent rapidement courants sur le web, notamment l'effet letterpress.

L'effet typographique est obtenu en plaçant le texte sur un fond contrasté, mais pas à 100 % (c'est-à-dire ni 100 % noir ni 100 % blanc), puis en décalant une ombre de texte d'une couleur plus claire que le fond vers le bas et la droite et une ombre portée plus foncée vers le haut et la gauche. Le décalage ne doit être que léger - un à trois pixels selon la taille du texte - afin d'éviter que les coins ne présentent un décalage. Les petits caractères n'ont pas besoin de flou, mais les grands caractères peuvent avoir besoin d'un léger flou pour adoucir l'effet.

 

Outre les effets d'ombre de texte simples, la typographie est l'effet que je vois le plus souvent, mais il en existe beaucoup d'autres, tous obtenus grâce à une application judicieuse des ombres de texte.

5. Contraste des couleurs

La nécessité d'un contraste dans les caractères fait l'objet d'un débat au sein de la communauté des concepteurs : est-il acceptable que la couleur de police soit plus proche de la couleur de l'arrière-plan ? Certains affirment qu'il s'agit d'une mauvaise conception, qui nuit à la lisibilité et à l'intelligibilité. Cependant, de nombreux concepteurs croient en la réduction du contraste dans le texte, estimant que cela ajoute une sophistication discrète à l'apparence et leur permet également de mieux guider l'œil du spectateur en mélangeant les contrastes sur la page.

Des études récentes soutiennent l'idée que la réduction de la lisibilité peut en fait augmenter l'attention et la cognition du spectateur. La logique est la suivante : si l'on oblige le spectateur à prendre plus de temps pour lire quelque chose en réduisant la lisibilité, il est alors obligé d'être plus attentif et de retenir l'information plus longtemps. Cet argument est quelque peu mitigé, cependant, puisque certaines études ont utilisé le caractère Comic Sans® pour prouver ce point.

Les concepteurs savent intuitivement qu'un contraste parfait peut être visuellement ennuyeux. Un texte noir sur fond blanc revient à tout mettre en gras ; tout est important et rien ne ressort. Le contraste est nécessaire pour attirer l'attention de l'observateur et l'aider à hiérarchiser ce qu'il regarde, et l'un des moyens d'y parvenir est d'utiliser différents contrastes de couleurs.

Cependant, il y a un moment où un faible contraste oblige les lecteurs à se concentrer et devient tout simplement illisible. Colour Text Legibility est une excellente ressource pour tester les combinaisons d'avant-plan et d'arrière-plan, et vous alertera en fonction des lignes directrices du W3C en matière de lisibilité des couleurs et d'accessibilité au web, afin de vous assurer que vous ne vous éloignez pas trop de ces lignes directrices.

6. Mélange Police Poids

Beaucoup de concepteurs de sites Web que je rencontre pensent que "bold" est la graisse police , mais bold est en fait une graisse police . Bien qu'elle soit certainement la plus courante, la graisse n'est pas la seule disponible pour polices. Il y a aussi le thin, le light, le medium, le heavy, le black et beaucoup d'autres. Par exemple, le design Neue Helvetica® comprend des graisses allant de l'ultra léger au noir.

En outre, de nombreux sites polices utilisent une échelle de chiffres en base 100 pour indiquer le poids, 100 étant le poids le plus léger, jusqu'au poids le plus élevé de 1000.

Cependant, le CSS ne dispose que de capacités limitées pour accéder directement à ces poids. La pondération police comprend des valeurs pour regular, bold, ainsi que 100, 200, 300, 400, 500, 600, 700, 800, 900 et 1000. Toutefois, si vous utilisez la règle @police-face, vous pouvez toujours utiliser l'une des graisses police disponibles en attribuant simplement à chaque graisse sa propre valeur police-weight ou, alternativement, un nom police unique pour chaque graisse.

7. Plus d'espace

Parallèlement à l'augmentation de la taille de police , la tendance est à l'augmentation de l'espace blanc ou négatif dans la conception des sites web. Cela s'explique en partie par la prise de conscience que la règle du "au-dessus du pli" était en fait un mythe (les gens font défiler les pages et s'attendent à le faire, comme l'a expliqué Melissa Tarquini en 2007), ainsi que par le fait que les écrans plus grands sont devenus omniprésents au cours des dernières années.

Plus d'espace dans les designs est une très bonne chose, car cela permet une lecture plus facile et des designs plus propres et moins encombrés. De nombreux concepteurs ont commencé à jouer avec des mises en page qui ne fonctionnent réellement que sur des écrans qui défilent, et cette tendance ne fera que s'accentuer à mesure que nous commencerons à maîtriser les nouveaux pouvoirs qu'offrent @police-face et CSS3.

8. Typographie adaptée

Bien que les écrans desktop soient de plus en plus grands, les écrans sur lesquels nous nous attendons à ce que nos créations soient visualisées sont de plus en plus petits, car de plus en plus de personnes consultent le web à l'aide de tablettes et de smartphones. La bonne nouvelle, c'est qu'au lieu de revenir à des conceptions étroites pour nos pages web, nous pouvons créer des conceptions qui "répondent" à l'appareil sur lequel elles sont affichées.

Le Responsive Design (parfois appelé "Reactive Design") est une méthodologie de développement qui renonce à la philosophie "one-size-fits-all" du passé, et qui s'appuie plutôt sur les CSS media queries et le langage JavaScript™ pour proposer des conceptions adaptées aux capacités de l'appareil de l'utilisateur. Il s'agit non seulement de redimensionner les images et les éléments d'interface, mais aussi d'ajuster la typographie des designs pour qu'ils s'adaptent à la taille de l'utilisateur. Cela s'applique à la taille de police ainsi qu'à la largeur des colonnes, à la hauteur des lignes et même à la justification dans certains cas.

Bien qu'il puisse sembler pénible au début de devoir considérer vos conceptions comme évolutives, ce sera bientôt une nécessité. On prévoit que d'ici 2015, l'utilisation mobile du Web dépassera l'utilisation de desktop et que l'utilisation de desktop commencera à décliner.

Outre le mobile, il convient de prendre en compte les futurs types d'écrans. Bien que la légendaire WebTV semble toujours se profiler à l'horizon, il y a un mouvement très réel dans ce domaine, Google et Apple travaillant d'arrache-pied pour trouver la bonne formule. Il ne faudra peut-être pas attendre très longtemps avant de devoir réfléchir à l'aspect que prendront vos créations sur un téléviseur HD de 62″.

9. Ecrit à la main Polices

L'écriture manuscrite polices est un autre type de conception qui devient de plus en plus populaire. En dépit de ce que beaucoup pensent de Comic Sans - l'écriture la plus célèbre de toutes police - les caractères qui ont l'air d'avoir été écrits à la main donnent une impression de convivialité, d'ouverture et d'accessibilité.

Outre les nombreux sites commerciaux et gratuits polices disponibles, il est désormais relativement facile de créer sa propre écriture manuscrite police, en utilisant l'iPad® app, iFontMaker, le service d'écriture manuscrite personnalisée police de vLetter ou d'autres options.

10. Dingbats au lieu d'images

Bien que Webdings® police soit l'un des principaux sites Web de Microsoft® polices préinstallés sur pratiquement tous les ordinateurs existants, l'utilisation de ce police pour les icônes dans les pages Web n'a jamais connu de succès. La raison en est simple : police ne s'affiche pas dans le navigateur Firefox®. La raison est liée à la manière dont le police est encodé, mais le résultat est que vous ne pouvez pas les utiliser.

Toutefois, si vous utilisez @police-face pour intégrer polices correctement encodé, il y a près de 100 % de chances que police soit utilisé. L'avantage d'utiliser police pour un dingbat, à la place d'une image, est l'extensibilité et les styles. Alors que les icônes basées sur des images ont une taille fixe, polices peut être rapidement agrandi ou réduit à n'importe quelle taille, sa couleur peut être modifiée ou d'autres styles peuvent être changés à la volée sans perte de fidélité.