Share
La typographie est l’un des aspects les plus importants, sinon le plus important, de la conception Web. Certains diront que cela prend jusqu'à 95% de la conception Web, alors pourquoi négligeons-nous souvent son importance? Les lecteurs qui visitent votre site décideront souvent de rester ou non en fonction de vos choix typographiques. Après tout, ils sont venus ici pour lis en premier lieu. Pensez-y une seconde: si le contenu est vraiment roi, la typographie doit logiquement être traitée comme une reine.
En fait, même certains noms de police suggèrent cette classification. Futura, Optima, Times New Roman (OK, c'est probablement un mec), Verdana, Lucida, Géorgie, Helvetica… Cela ne fait aucun doute, la typographie est la reine. Par conséquent, elle doit également être bien habillée avant de sortir: elle doit mettre en place un système de crénage et de suivi, peut-être une variante de police différente, et elle a déjà l'air d'une vraie dame..
Vous ne savez pas de quoi je parle? Eh bien, lisez la suite.
Avant de continuer avec cet article, et en particulier si vous n’avez pas beaucoup de contact avec la typographie, je vous suggère de combler les lacunes de vos connaissances en typographie de Typedia, en tenant particulièrement compte des classifications de polices et de l’anatomie d’une police de caractères, qui vous seront très utiles. lors de la création de vos propres piles de polices et de l'association de polices.
Après avoir lu les deux articles sur Typedia, revenez ici pour que nous puissions renforcer vos connaissances en typographie nouvellement créées et les préparer pour les prochains chapitres de cet article..
Les polices de caractères ont des relations dynamiques et peuvent paraître bien ou mal ensemble, en fonction des personnes avec lesquelles elles sont mélangées et de leurs différences. Si nous souhaitons faire appel à la technique, il existe trois manières de relier les polices de caractères:
Une relation concordante est une relation sans frissons, où deux caractères ont des caractéristiques très similaires. Il peut également s'agir d'un caractère unique dans plusieurs styles et / ou tailles..
Lorsque les caractères sont assez différents les uns des autres, le contraste apparaît. Il est généralement bon de viser le contraste, par exemple entre une police de caractère serif et sans serif..
Deux polices de caractères (ou plus) ayant des caractéristiques différentes qui sont encore assez similaires pour créer de la détresse sur une page sont en conflit. Vous devriez généralement éviter ce type de relation.
Les polices de caractères peuvent varier. Qu'il s'agisse de poids, de hauteur, de largeur ou de toute autre chose, chaque caractère présente une caractéristique qui le distingue des autres. Vous devriez apprendre à repérer ces subtilités et à vous adapter à leur influence. Et n'allez pas croire que cela n'a pas d'importance, car même différentes itérations des mêmes polices peuvent parfois être très inégales.
Cela concerne spécifiquement le Web, où l'art de créer et d'appliquer des piles de polices est très important. Vous n'êtes pas obligé de choisir exactement les mêmes polices pour des replis, mais il est juste de dire qu'une police oldstyle telle que Garamond devrait être complétée par une autre police oldstyle présentant des caractéristiques sensiblement similaires (Caslon, Baskerville, Times, par exemple)..
Georgia, Garamond et Adobe Garamond Pro (taille de 200 points dans l'exemple ci-dessus) ont une apparence très différente..
Une police de caractères moderne, telle que Bodoni Condensed ou Bodoni Bold, est un excellent choix pour les titres, alors qu’il s’agirait probablement d’une police de caractères incorrecte pour les grandes lignes de texte, où elle détournerait seulement le lecteur du contenu. Un style ancien comme Garamond (I ♥ Garamond) est un bien meilleur choix pour ces situations.
Les non-concepteurs prennent souvent de mauvaises décisions lorsqu'ils choisissent des polices de caractères pour différentes occasions et, même si je vais ignorer la lecture de Comic Sans, vous devez être conscient du fait qu'il n'est pas toujours approprié d'utiliser Georgia pour la copie de corps, par exemple. De plus, il n'est pas toujours mauvais d'utiliser Arial comme police de caractères préférée. mais considérez quel message vous essayez de transmettre, via votre typographie.
Cet article n'est pas avant tout une vitrine, mais il est toujours intéressant d'observer ce que d'autres designers talentueux ont fait pour que les sites Web de leurs clients soient un plaisir à regarder. Nous allons voir ce qui peut être fait avec un soin particulier pour la décoration des polices, ainsi que pour des piles de polices solides et des choix typographiques intelligents..
(P.S. Si vous souhaitez voir d'autres exemples de belle typographie en ligne, parcourez les archives de Typesites. Il n'y a pas trop de contenu ici, mais ils ont couvert de très bons sites.)
Verdana est-il la police de caractère la plus ennuyeuse que vous puissiez utiliser? Pas si vous demandez à Jason Santa Maria. Il était intelligent en utilisant la force de Verdana (hauteur X) pour créer une copie de corps plutôt petite pour un look digne et élégant qui Une liste à part mérite. La petite taille rend également agréable à lire à long terme.
Georgia est principalement utilisé pour mettre l'accent sur certains éléments de page et comme police d'affichage. Parmi les autres décisions de conception notables, les lettres majuscules sont de petite taille et espacées de manière positive pour une lisibilité améliorée et une meilleure apparence..
Jon Tan, comme Khoi Vin et Daniel Mall, suit également le culte du design minimaliste en noir et blanc avec des touches d’orange soigneusement placées. Bien que le choix des couleurs manque d’enthousiasme, on pourrait dire que Jon se rattrape en prenant bien soin de ses choix typographiques. Le fichier CSS de Jontangerine.com contient plus de 250 déclarations différentes pour toute la micro-typographie!
La copie du corps principal est placée dans la belle Géorgie, tandis que les titres centrés apparaissent dans une pile de polices basée sur Times avec Baskerville et Palatino:
famille de polices: baskerville, 'palatino linotype', 'times new roman', serif;
Dans d'autres domaines, la "couleur" typographique est obtenue à l'aide de différentes variantes de police, de différentes nuances de noir et d'un excellent style de police. Certainement l'un des meilleurs sites centrés sur la typographie!
Vous avez probablement beaucoup entendu parler de l'intégration de @ font-face avec CSS au cours des derniers mois. Bien qu'Internet Explorer utilise une technique similaire depuis sa quatrième itération (nous avons honte de l'admettre), ce n'est qu'en 2009 - lorsque les cinq grands navigateurs ont implémenté @ font-face (de la bonne façon) - nous avons commencé à parler de manière intensive. sur l'utilisation de webfonts non-core en ligne.
Comme vous le savez peut-être, cette technique présente quelques inconvénients considérables (principalement les problèmes de droits d'auteur), mais si vous trouvez la police adaptée à vos besoins, vous avez toutes les chances d'améliorer la façon dont les lecteurs voient votre site. D. Bnonn Tennant (Information Highwayman) a décidé d'utiliser Justus pour la copie du corps, ce qui contraste assez bien avec l'élément d'arrière-plan sans empattement (le "fascinant magnum") et contribue à obtenir l'effet "usé" sur le site..
Elliot aime utiliser les polices Slab-Serif, ce qui se traduit par son excellente 8 faces magazine sur la typographie (le recommande vivement), avec FF Unit Slab et son propre site Web, où FF Tisa Web Pro est intégré à l'aide du service d'intégration de polices de Typekit.
Il n’ya pas autant de styles typographiques sur le site que Jon Tan, par exemple; Cependant, il a fait du bon travail avec l'alignement et la couleur, ce qui ne devrait jamais être négligé et qui est un ingrédient important dans une bonne typographie..
Bien qu'elles deviennent rapidement de "vieilles" techniques de remplacement, le texte remplacé par Flash et par des images (Cufón et images insérées manuellement) est important pour la compatibilité entre navigateurs Web dans les sites dont les visiteurs n'utilisent pas principalement les navigateurs modernes, comme ainsi que dans les cas où la police particulière n'est pas disponible pour l'une ou l'autre raison (par exemple, des problèmes de droits d'auteur).
Squared Eye met l'accent sur différents niveaux de titres avec sIFR, ainsi que sur les images insérées manuellement. Il utilise un magnifique archer slab-serif en harmonie avec une pile de polices basée sur Lucida pour un look à la fois moderne et élégant..
Bien que je vais fournir quelques piles de polices que vous pouvez utiliser dans vos conceptions, considérez ce qui suit comme une "formation" pour créer vos propres piles de polices. Il existe déjà de nombreux autres sites proposant de nombreuses solutions prêtes à l'emploi pour le texte à afficher et le texte en texte intégral..
Comme dit le proverbe: "Donnez un poisson à un homme et vous le nourrissez pendant une journée. Apprenez à un homme à pêcher et vous le nourrissez toute la vie."
Avant de commencer à créer des piles de polices, familiarisez-vous avec votre public principal et déterminez le logiciel et le système d'exploitation utilisés. De cette façon, vous pouvez prédire quelles polices ils ont éventuellement installées et quelle souplesse typographique vous offre..
Par exemple; Matthew Smith (Squared Eye) a probablement (à juste titre) prédit que la majorité de son auditoire ne disposerait pas d'une police comme Archer installée sur leurs ordinateurs et a décidé de l'intégrer à l'aide du remplacement de police Flash (comparé à Archer, environ 97% des utilisateurs ont Flash installé).
Commencez toujours par concevoir avec les polices Web de base, puis améliorez progressivement avec les piles de polices)
Pour plus d'informations sur les polices livrées avec différents logiciels, parcourez les polices Font Matrix, Fluid Web Type et Apaddedcell de 24 Ways. Vous pouvez également trouver la documentation complète de Microsoft sur les polices fournies avec leurs produits, ainsi qu'un aperçu de leur département typographique, une lecture utile..
Lorsqu’il s’agit de construire des piles de polices, vous devrez tenir compte de quelques variables pour déterminer les différences entre les polices (rappelez-vous de la comparaison entre Georgia-Garamond-Garamond ci-dessus?). Ceci, encore une fois, dépend de votre expérience et de votre connaissance des différentes catégories de polices. Vous devrez apprendre à noter non seulement la manière dont les empreintes sont présentées (sont-elles inclinées, ou bien droites? Ou n'existent-elles pas?), Mais aussi les différences plus petites entre deux polices de caractères similaires.
Examinez comment ils communiquent les uns avec les autres, leur hauteur x et leur lisibilité sur de petites tailles, ainsi que leur forme et leur direction. Même si cela semble, peut-être, intimidant en ce moment, rappelez-vous comment la pratique rend parfait.
Exemple: Ibis Display et Archer, bien que les deux empattements par catégorie, ne feraient probablement pas une bonne paire en raison de la différence significative dans la présentation de leurs empattements et des remarquables transitions épaisses / minces entre Ibis et un monaright Archer.
J'ai déjà mentionné que j'aime Garamond. Je vais donc baser une pile de polices sur Times New Roman, qui est la police Web la plus proche en apparence de la police de caractères oldstyle susmentionnée..
Je voudrais mentionner que Garamond, en raison de sa faible hauteur en X, n’est probablement pas le meilleur choix lors de la conception pour une excellente lisibilité à l’écran (après tout, ce n’était pas fait pour la présentation à l’écran principalement), mais c’est bien si utilisé sur des tailles de police suffisamment élevées (à mon avis, 16-17 pixels / 1em Garamond est optimal).
Dans la mise à l'échelle optique, comme on l'appelle, les tailles de texte plus petites ont généralement une hauteur x plus grande, une largeur de tige plus large et un contraste typographique de la tige plus grand, tandis que les tailles d'écran plus grandes ont une hauteur x inférieure et une plus grande variation de la largeur de la tige..
- Blogs MSDN
Selon Font Matrix de 24 Ways, Garamond est livré avec Office Word 2007 pour Windows et Word 2004 pour Mac, ce qui signifie qu'il est disponible pour un pourcentage considérable de visiteurs. Pour ceux qui ne l’ont pas installé, j’ai fourni une copie de sauvegarde sous la forme de polices de caractères Caslon, Garamond et Minion Pro d’Adobe livrées avec Creative Suite (notez toutefois que toutes ces polices sont également disponibles pour des applications individuelles. télécharger, je mentionne les programmes qu’ils livrent parce que je suppose que beaucoup d’entre vous les avez achetés avec le logiciel Adobe).
J'ai également décidé d'utiliser le texte Crimson du référentiel Webfont de Google pour offrir une solution de secours décente avant Times. La pile de polices finale ressemble à ceci:
famille de polices: Garamond, Adobe Garamond Pro, Minion Pro, Adobe Caslon Pro, Crimson Text, Times, serif;
Cette pile de polices doit être utilisée exclusivement avec des tailles de police supérieures, notamment parce que Windows est réputé pour son rendu médiocre..
Chrome avec les paramètres par défaut (à gauche) et Safari avec le lissage des polices défini sur Moyen (à droite). Peut paraître subtil au début, mais cela a un impact important sur la lisibilité dans les petites tailles.
Si vous recherchez une très bonne lisibilité à l'écran, Georgia et Verdana (deux polices datant des années 90 et conçues spécialement pour le rendu à l'écran) vous donneront des résultats plus agréables..
Par exemple, nous pourrions tirer parti de la similitude entre les empattements Lucida (Fax et Bright, également fournis avec MS Word) et l’empattement Droid du référentiel Google Webfont pour créer une pile de polices très lisible avec une hauteur x importante:
font-family: Lucida Bright, Lucida Fax, Droid serif, Géorgie, Serif;
Une fois de plus, les webfonts de Google entrent en action avant une solution générique, principalement parce que Droid serif est beaucoup plus proche en apparence de Lucida que Georgia et Times, respectivement..
Une pile très similaire basée sur Verdana contiendrait également les trois sans-empattements Lucida presque égaux (Grande - livrés avec Mac, Sans, Sans Unicode):
famille de polices: Lucida Sans, Lucida Sans Unicode, Lucida Grande, Verdana, Sans-serif;
Notez que les polices de remplacement ont des caractéristiques similaires, en particulier la g lettre est pratiquement identique pour les polices de caractères et comment o ressemble à un cercle plutôt qu'à une ellipse. Comme avec la plupart des sans-empattements, ils sont monowight et n'ont pas de transitions épaisses / minces (Optima, par exemple, n'est pas monoweight - c'est ce qui rend plus difficile l'appariement avec d'autres polices)..
Il est important de créer des piles de polices sensibles, mais pour obtenir une excellente typographie, vous devrez faire "10% supplémentaires" et fournir un contraste typographique en utilisant différentes variantes de police, poids, direction et soin particulier pour toutes les méthodes micro-typographiques..
Jon Tan s'attaque à la micro-typographie avec beaucoup de soin.
Jon Tan, par exemple, utilise des sélecteurs CSS3 pour créer un impact visuel important.
.entry-content p: première ligne, .entry-content img + p: première ligne font-variant: small-caps; poids de police: 900; retrait du texte: 0px;
Il utilise des en-têtes centrés et en italique dans un article de blog dans une pile de polices basée sur le temps. Ceci, lorsqu'il est combiné à un texte justifié et à son design minimaliste, en fait une expérience de lecture très agréable. Rappelez-vous: les petites choses comptent.
Mélanger les choses avec un caractère gras, des titres en majuscule et un espacement positif des lettres pour les titres plus petits offrira souvent une expérience et un contraste bien meilleurs, ainsi qu'une séparation plus nette de la copie au corps, par rapport à une police de caractères différente. Samantha Warren a très bien couvert la hiérarchie typographique et je vous suggère de lire son article pour une compréhension plus large du sujet..
Un Garamond de 17 pixels pour le corps du texte et un Lucida Sans de 15 pixels pour le sous-titre de niveau 4 (h4) sont assez différents dans les deux situations supérieures, uniquement en raison de quelques modifications mineures apportées à notre code CSS:
body font: 17px / 1.4 Garamond, Adobe Garamond Pro, / *… (regardez la pile Garamond ci-dessus) * / serif; couleur: # 333; text-align: justifier; h4 # majuscule text-transform: majuscule; police: bold 14px / 1 Lucida Grande, Lucida Sans, Verdana, sans-serif; marge supérieure: 15 px; espacement des lettres: 1px; h4 # normalcase text-transform: none; poids de police: normal; espacement des lettres: 0;
Les esperluettes en italique sont une autre de ces techniques qui prouvent l’importance des "petites choses" (notez cependant que toutes les polices ne possèdent pas d’esperluettes "spéciales"):
.ampli font-family: Adobe Caslon Pro, Garamond, Linotype Palatino, Bell MT, Minion Pro, Garamond, Constantia, Goudy Old Style, texte High Tower, serif; / * La pile de polices ci-dessus contient des familles de polices qui ont de belles esperluettes. Vous devriez choisir un couple qui correspond à vos besoins sur un site Web particulier, plutôt que de tout utiliser. Par exemple, Caslon, Palatino et Baskerville font du bon travail la plupart du temps. * / font-style: italic; hauteur de ligne: 0;
Si vous souhaitez automatiser l’utilisation des esperluettes de luxe (en les incluant dans des classes appropriées et en ayant une aide typographique avancée), je vous suggère de rechercher le plugin WP-Typography pour Wordpress..
Nous pourrions améliorer encore l'expérience de nos utilisateurs en améliorant le site avec quelques scripts JavaScript simples pour tester si une police particulière est installée sur son système. Ensuite, il s’agit simplement de choisir une police de secours appropriée, si la police n’est pas disponible (par exemple, augmenter la taille de la police pour en rendre une autre plus lisible, utiliser le remplacement d’image, charger des polices supplémentaires, etc.)..
Notez que vous devez toujours tenir compte du fait qu'un faible pourcentage des utilisateurs naviguent sur le Web avec JavaScript désactivé..
Vous pourriez, peut-être, ajouter une classe noscript au corps si JavaScript est désactivé et préparer une typographie appropriée pour celui-ci, en conséquence.
Cela dit, il existe quelques techniques, essentiellement identiques, permettant de déterminer si une police particulière est installée sur le système de l'utilisateur. Je vais utiliser une version légèrement modifiée du code de Lucas Smith:
Accentsconagua
fonction testFont (name) name = name.replace (/ ['"<>] / g,"); var body = document.body, test = document.createElement ('div'), installé = false, template = 'mmmmmwwwww'+'mmmmmwwwww', un B; if (nom) test.innerHTML = template.replace (/ X / g, nom); test.style.cssText = 'position: absolute; visibilité: cachée; display: block! important '; body.insertBefore (test, body.firstChild); ab = test.getElementsByTagName ('b'); installé = ab [0] .offsetWidth === ab [1] .offsetWidth; body.removeChild (test); return installed; Après avoir collé le code dans votre fichier JavaScript, vous pouvez simplement tester si une police particulière est installée sur l'ordinateur des utilisateurs à l'aide d'instructions conditionnelles:
if (testFont ("FontName")) // Fait des choses si la police est installée sinon // Fait des choses si la police n'est pas installée, c'est-à-dire charge le remplacement de Cufón L'une des utilisations les plus intéressantes de cette technique serait peut-être de créer un lien vers un fichier de chargement de polices (@ font-face, Google Webfonts…), dans le cas où nos polices préférées ne seraient pas disponibles sur le système de l'utilisateur. De cette façon, nous améliorons les performances et ne forçons pas l'utilisateur à télécharger environ 30 Ko de données sans raison supplémentaire:
if (! testFont ("Lucida Fax") &&! testFont ("Lucida Bright") &&! testFont ("Droid serif")) var head = document.getElementsByTagName ("head") [0]; var webfontLink = document.createElement ('link'); webfontLink.rel = 'feuille de style'; webfontLink.href = 'http://fonts.googleapis.com/css?family=Droid+serif'; // maintenant nous avons head.appendChild (webfontLink); ♣ ♠ ♣
J'espère que vous avez maintenant une meilleure compréhension de la typographie sur le Web. Il y a définitivement plus à faire, et j'aimerai entendre vos commentaires à ce sujet dans les commentaires.!
