Share
La typographie sur le Web est tout sauf simple, et pour beaucoup, c'est un mystère troublant. Aujourd'hui, nous allons examiner six façons dont les concepteurs et les développeurs Web peuvent améliorer la typographie des sites qu'ils créent..
La typographie est l'art de concevoir des lettres, des mots, des paragraphes et leurs interactions. De nombreux concepteurs et développeurs associent souvent la typographie au choix d'une police ou d'une police de caractères, tandis que d'autres oublient simplement que 95% du web design est une typographie et ont tendance à l'oublier. Il est clair que si la typographie représente réellement 95% de la conception Web, elle devrait être au centre des préoccupations de chaque concepteur et développeur. Voici Six façons d'améliorer votre typographie Web.
Les bases de la typographie sont importantes pour tous les concepteurs, qu’ils conçoivent ou non pour le Web..
Définitions typographiques
Vous trouverez ci-dessous des définitions typographiques de base que chaque concepteur / développeur doit comprendre lorsqu'il traite de la typographie. Cette liste n’est en aucun cas exhaustive. Voir la liste de lecture recommandée à la fin de cet article pour des glossaires plus complets..
Pour créer une échelle typographique efficace, la meilleure méthode que j'ai trouvée consiste à utiliser l'unité de mesure de taille "em", car elle définit la taille par rapport à la base d'un document donné. Dans l'exemple ci-dessous, la taille de la police de base est de 12 pixels, ce qui définirait la taille de la police standard des paragraphes à 15 pixels..
corps font-size: 12px; h1 font-size: 5.0em; h2 font-size: 4.0em; h3 font-size: 3.0em; h4 font-size: 2.0em; blockquote font-size: 1.5em; p taille de la police: 1.25em; input font-size: 1.0em; petit taille de la police: 0.75em;
Le rythme vertical de l'interligne qui fournit l'espacement optimal à suivre par l'œil. Pour créer ce rythme, il est préférable de suivre une grille de base. D'après mon expérience, le meilleur rythme vertical en ligne est fixé à 1,5em ou près de 1.5em. NETTUTS +, par exemple, utilise un rythme vertical de 1.6em, ce qui correspond approximativement à une hauteur de ligne de 17.6px (basée sur une taille de police de 11px).
Vous trouverez ci-dessous un rythme vertical standard que j'utilise sur bon nombre de mes sites Web reposant sur le système de grille 960. Pour obtenir un rythme vertical approprié, chaque paragraphe doit avoir une marge ou un remplissage inférieur à l’équivalent de la hauteur de ligne de base de la ligne de base standard..
corps font-size: 12px; hauteur de ligne: 15px; p margin-bottom: 15px;
Comme le savent la plupart des concepteurs et développeurs, les sites Web affichent un rendu différent selon les navigateurs. Cela est particulièrement vrai avec les polices de rendu. Vous trouverez ci-dessous une comparaison de la manière dont cinq navigateurs populaires affichent le même texte différemment:
Source de l'image: FontTech.Info Lors de la création d'une mise en page typographique ou d'un site riche en contenu (comme un site de magazine ou de blog), il est très important de pouvoir voir les différences entre la typographie de chacun des navigateurs et des systèmes d'exploitation. La conception dans le navigateur n'a rien de nouveau (même en 1997, lorsque j'ai créé mon premier site Web, je l'ai entièrement conçu dans le navigateur). Bien que tous les sites ne soient pas candidats à la conception dans un navigateur, les sites les plus concernés par la typographie sont parfaits pour la conception dans un navigateur..
Source de l'image: Pour un beau Web Andy Clarke, designer et auteur renommé, a récemment prononcé un discours lors de la présentation de Walls Come Tumbling Down à An Event Apart Boston, dans laquelle il préconisait la conception dans le navigateur pour de nombreuses raisons. L'image ci-dessus, tirée de sa présentation, montre l'utilisation d'une grille normalisée pour les colonnes et le rythme vertical..
La meilleure façon de concevoir un navigateur consiste à utiliser une grille comme celle-ci. Dans le paquet source, j'ai inclus deux grilles en colonnes différentes, chacune avec trois variantes de rythme vertical. Le CSS ci-dessous montre la méthode la plus simple pour déployer l'une de ces grilles de test en remplaçant l'image ou les images d'arrière-plan dans le corps de la page HTML à l'aide d'une classe spécifique à la grille que vous avez choisie. Ajoutez simplement la classe spécifiée à la balise DIV body et body content ou content container, et vous êtes prêt à concevoir dans votre navigateur..
.grid960base15 width: 960px; hauteur de ligne: 15px; fond: url (images / grid960base15.png) repeat-y; .grid960base18 width: 960px; hauteur de ligne: 18px; fond: url (images / grid960base18.png) repeat-y; .grid960base30 width: 960px; hauteur de ligne: 30px; background: url (images / grid960base30.png) repeat-y; .grid600base12 width: 600px; hauteur de ligne: 12px; background: url (images / grid600base12.png) repeat-y; .grid600base16 width: 600px; hauteur de ligne: 16px; background: url (images / grid600base16.png) repeat-y; .grid600base18 width: 600px; hauteur de ligne: 18px; background: url (images / grid600base18.png) repeat-y;
Il est à noter que pour obtenir un bon rythme vertical, il est nécessaire d’avoir un contrôle granulaire de la hauteur de la ligne afin d’atteindre le bon rythme vertical. De plus, vous pouvez utiliser ce marque-page en grille pour superposer un site Web avec une grille personnalisée. Je trouve cela utile si vous ne pouvez pas remplacer l'image d'arrière-plan par l'une des grilles..
Remplacer du texte par des images est une pratique courante dans la conception Web depuis les années 90. Avec l’adoption de CSS dans les principaux navigateurs, des techniques de remplacement d’image ont commencé à ne plus consister à faire une image et à la placer à la place du texte. Fahrner Image Replacement (FIR) a été le premier à être accepté. Cependant, les joueurs jouant avec CSS Image Replacement ont réalisé que cette technique n’était pas accessible. La technique de remplacement d'image Phark a été conçue à l'origine comme un remplacement accessible de la technique FIR classique. Initialement proposé par Mike Rundle de 9rules en 2003, Phark Image Replacement repose sur l’utilisation des propriétés CSS indent-text et background-image pour masquer le texte de l’utilisateur mais rester accessible pour les lecteurs d’écran et les moteurs de recherche..
Pour utiliser Phark Image Replacement, définissez l'élément conteneur (dans ce cas, les DIV) avec une hauteur et une largeur définies. Ensuite, définissez une image de fond. Enfin, définissez la propriété text-indent sur -9999px. La propriété text-indent pousse essentiellement le début du texte laissé à 9999 pixels, mais cela n'augmente pas la zone de défilement, ce qui entraîne la disparition du texte..
Bien que Phark soit actuellement la technique de remplacement d'image la plus répandue utilisant uniquement des CSS, il en existe de nombreuses autres avec des avantages et des inconvénients différents. Par exemple, Phark ne montre rien à l'utilisateur si les images sont désactivées mais que CSS est activé, ce qui représente un inconvénient relativement faible. De plus, le remplacement d'image CSS n'est pas vraiment destiné à la typographie à grande échelle (articles), mais convient mieux aux boutons, titres et autres petites quantités de texte. Pour en savoir plus sur les autres techniques de remplacement des images basées sur CSS, CSS-Tricks a rédigé un bon résumé de toutes les techniques disponibles de remplacement des images basées sur CSS, appelées Neuf techniques pour le remplacement des images CSS..
Le remplacement d'image standard est idéal pour les situations très décoratives et les petites quantités de texte. Que faites-vous lorsque vous souhaitez remplacer du texte par tout le corps d'un article? Qu'en est-il de remplacer les titres et de garder le texte sélectionnable? La réponse ici est l'une des techniques avancées de remplacement d'image. Pour le traitement intensif, trois images de remplacement avancées sont disponibles (si vous en connaissez d'autres, veuillez les laisser dans les commentaires): Flash, Javascript et PHP..
La première des techniques avancées de remplacement des images qui est arrivée sur les lieux est le Scalable Inman Flash Replacement (sIFR), initialement conçu par Shaun Inman en IFR, puis avancé au sIFR par Mike Davidson et Mark Wubben, qui assurent actuellement le suivi du projet..
AVANTAGES:
- Rendu des polices le plus net en raison de l'anti-aliasing
- Conserve le texte original sémantique et accessible
- Se dégrade gracieusement dans le texte original
- Le texte est sélectionnable (partiellement)
- Script discret
LES INCONVÉNIENTS:
- Ne convient pas aux gros corps de texte
- L'installation peut être compliquée et délicate
- Nécessite Flash et Javascript
- Les temps de chargement peuvent être lents
- L'impression est problématique
Si vous souhaitez apprendre à implémenter et voir des exemples de sIFR, NETTUTS + propose un excellent didacticiel sur l’utilisation de sIFR ou visitez le site officiel de sIFR2 ou le site officiel de sIFR3, la version la plus récente..
La technique de remplacement d'image avancée la plus récente s'appelle Cufón, soi-disant mot-valise de "custom" et "font" selon certains. Il "vise à devenir une alternative valable au sIFR qui, malgré ses mérites, reste extrêmement difficile à installer et à utiliser", selon le wiki de Cufón..
AVANTAGES:
- Technique de remplacement d'image avancée la plus rapide
- Conserve le contenu textuel sémantique d'origine
- Se dégrade gracieusement dans le texte original
- Ne nécessite aucun plugin (comme Flash)
- Script discret
- Installation facile
LES INCONVÉNIENTS:
- Le texte ne peut pas être copié et collé (le texte ne peut pas être sélectionné)
- Licences de polices est flou concernant cufón
- La justification du texte et les effets ne fonctionnent pas
- : l'état de vol stationnaire a beaucoup de bizarreries
- Nécessite Javascript
Si vous souhaitez apprendre à mettre en œuvre et voir des exemples de Cufón, NETTUTS + propose un excellent screencast et un didacticiel expliquant comment utiliser Cufón ou visitez le site officiel de Cufón..
La technique FLIR (Facelift Image Replacement) est différente des deux précédentes, car elle utilise un script côté serveur avec PHP et la bibliothèque d’images GD. Il a été développé par Cory Mawhorter pour fournir une technique de remplacement automatique des polices côté serveur..
AVANTAGES:
- Conserve le contenu textuel sémantique d'origine
- Ne nécessite aucun plugin (comme Flash)
- Les problèmes de licence de polices sont peu probables, voire jamais
LES INCONVÉNIENTS:
- Le texte ne peut pas être copié et collé (le texte ne peut pas être sélectionné)
- Le rendu des polices est inférieur à la comparaison avec d'autres alternatives
- Nécessite un serveur Web avec PHP et GD
- Nécessite plus de ressources serveur
- Peut être difficile à mettre en place
Si vous souhaitez apprendre à mettre en œuvre et voir des exemples de FLIR, Divito Design propose un bon tutoriel sur l’utilisation de FLIR ou visitez le site officiel de FLIR.
CSS3 est relativement nouveau dans le paysage du Web et son utilisation n’a pas encore été généralisée. L'une des fonctionnalités les plus intéressantes de CSS3 est la règle @ font-face. L'utilisation de @ font-face pour le moment pose deux grands obstacles. Premièrement, peu de fonderies et de polices de caractères prennent en charge l’incorporation @ font-face. Certaines licences sont vagues et ne traitent pas de l'intégration Web, tandis que d'autres interdisent explicitement l'intégration de @ font-face. Pour une liste des types de caractères qui prennent en charge l’intégration @ font-face, vous pouvez webfonts.info en avoir une excellente liste. Le deuxième obstacle est que tous les navigateurs ne prennent pas en charge la règle @ font-face, comme le montre le tableau de prise en charge du navigateur ci-dessous..
Source de l'image: Wikipedia La règle @ font-face permet désormais l'intégration prochaine des polices dans IE6, IE7, IE8, FireFox 3.5+ (PC et Mac) et Safari (PC & Mac) avec support dans Opera 10 et Chrome. Cela signifie que, d'une manière ou d'une autre, les polices Web seront disponibles pour environ 90% des utilisateurs..
Idéalement, cette première déclaration @ font-face ferait partie d'un fichier CSS servi via des commentaires conditionnels à IE uniquement avec la version EOT de la police. La deuxième déclaration @ font-face doit être un fichier de polices OTF ou TTF. De plus, en raison des restrictions de sécurité du navigateur, l'URL source des déclarations doit être relative (bien que certains navigateurs prennent en charge les URL absolues)..
Accentsconagua
@ font-face font-family: "Anivers"; src: url ("Anivers.eot"); @ font-face font-family: "Anivers"; src: url ("Anivers.otf"); Oui. C'est tout ce qu'on peut en dire.
body font-family: Anivers, "Helvetica Neue", Helvetica, Arial, sans serif;
Une fois les déclarations effectuées, la famille de polices déclarée peut être utilisée comme toute autre police disponible sur le système d'un utilisateur. Il s'agit d'un nouveau territoire passionnant pour les concepteurs et les développeurs Web qu'il sera important de suivre au cours des prochains mois..
Les projets de livraison @ font-face à venir tels que Typekit et Typotheque cherchent à fournir une aide importante en termes de négociation de licences d'intégration Web avec les grandes fonderies de polices. De plus, avec toutes les questions sur la location de polices pour l'intégration Web, il peut s'avérer difficile d'obtenir certaines (ou toutes les) polices que vous allez utiliser dans une conception Web pour les utiliser dans votre logiciel de traitement d'images. Il y a deux solutions à cela: 1) concevoir dans le navigateur comme recommandé ci-dessus, ou 2) utiliser des polices de caractères similaires pour concevoir les modèles de page statiques.
La typographie sur le Web en est à ses balbutiements par rapport à la typographie imprimée, audiovisuelle et cinématographique. Observez d'autres formes de supports pour une utilisation inventive de la typographie. La prochaine fois que vous irez au cinéma, consultez toutes les affiches et portez une attention particulière à la typographie utilisée dans les aperçus et les bandes-annonces. Jetez un coup d'œil à la typographie à la fois à l'intérieur et sur la couverture des livres de votre librairie locale. Examinez votre collection de DVD ou vos magazines préférés pour trouver l'inspiration.
En ligne, suivez les principaux experts en typographie en ligne tels que Pour un beau Web, J'aime la typographie, TypeInspire ou Webfonts.info. Vous trouverez ci-dessous une liste de liens de lecture recommandés pour plus d’informations sur la typographie Web, en plus de NETTUTS + et des.
Espérons que ces six conseils vous aideront la prochaine fois que vous travaillerez sur la typographie pour le Web. C'est un moment passionnant d'être un typophile travaillant sur le Web.
