Cet article présente un ensemble extrêmement utile de conseils et de meilleures pratiques pour ceux qui sont encore relativement novices dans l'utilisation de la typographie sur le Web.
Nous allons passer en revue les méthodes les plus courantes pour incorporer des polices Web, redimensionner des polices et définir une hauteur de ligne solide.
Typographie Web: les bases
J'ai commencé ma carrière dans la conception dans le secteur de la presse écrite. L'une des transitions les plus sordides vers l'état d'esprit basé sur le Web s'est donc déroulée dans le domaine de la typographie. Pour la conception d’impression, je peux utiliser n’importe quelle police de mon choix, à condition qu’elle soit propre et qu’elle réside sur ma machine. En outre, personne ne se soucie vraiment de la taille de mes polices, à condition que l'impression soit assez grande!
Cet article contient certaines techniques que je souhaiterais connaître dès le départ et que je devais apprendre à la dure par des erreurs flagrantes, ainsi que d’autres que je viens juste d’apprendre!
Chacune de ces trois techniques peut sembler assez élémentaire pour un professionnel et peut même faire l’objet d’un débat, mais je recommande vivement à tout débutant en conception de sites Web d’essayer d’acquérir une solide compréhension de tous ces concepts afin de pouvoir choisir un système défendable. position pour la façon dont vous configurez votre type en ligne.
Incorporation de polices Web: utilisez @ font-face
Il y a un an ou deux, le jeu de polices Web était plutôt incertain. Tout le monde savait qu'une révolution allait s'annoncer, mais plusieurs techniques étaient utilisées et peu étaient certaines de ce que nous allions faire.
Jusqu'à présent, une solution unique a été largement acceptée comme étant la meilleure dans de nombreuses circonstances, voire dans la plupart des cas. Si vous souhaitez intégrer des polices personnalisées à un site Web, @ font-face est la solution. C'est une solution CSS pure avec un support de navigateur impressionnant et contrairement à Cufon et ses cousins, il en résulte un texte parfaitement sélectionnable qui fonctionne et se présente comme une police native.
La syntaxe Bulletproof @ font-face de Fontspring
Ceci est un exemple parfait de la façon dont les meilleures pratiques en matière de conception de sites Web changent constamment. La dernière fois que j'ai vérifié, la syntaxe du smiley face of smiley de Paul Irish @ font-face était la meilleure solution. Cependant, en recherchant cet article, j'ai découvert qu'une nouvelle méthode est apparue et que Paul Irish lui-même appelle "la meilleure solution possible".
La nouvelle méthode est la syntaxe Bulletproof @ Font-Face de Fontspring, qui répond à la préoccupation liée au manque de prise en charge d'Android dans la technique d'origine irlandaise.
Si vous vous interrogez sur le point d'interrogation, il est judicieux de tromper IE9 dans la soumission en chargeant les polices appropriées et en évitant une erreur 404. Pour en savoir plus sur comment cela fonctionne, consultez ce post.
Deux services Free @ font-face
Si vous souhaitez intégrer des polices personnalisées gratuites à votre page Web, la méthode la plus simple et la plus simple que j'ai trouvée est d'utiliser Google Web Fonts. Ce service étonnant contient plus de 180 familles de polices et ne nécessite aucun téléchargement de fichier de votre part. Parcourez la bibliothèque, choisissez les polices de votre choix, puis copiez et collez les extraits de code que vous avez donnés. Cela ne pourrait pas être plus facile!
Au lieu de cela, je recommande toujours FontSquirrel. Ici, vous devez télécharger les kits @ font-face, ce qui représente un peu plus de travail, mais le gain est une collection imbattable de belles polices gratuites et la possibilité de télécharger un fichier de police unique qui sera automatiquement converti en plusieurs formats et transformé en un kit utilisable @ font-face.
Le dilemme de la taille des polices
Pendant que nous parlons des polices, discutons brièvement du dimensionnement des polices. C'est en fait un sujet beaucoup plus âprement débattu que le précédent. La vérité est que, quelle que soit la méthode choisie, de nombreux développeurs Web insisteront pour que vous ne le fassiez pas!
Pour la plupart, "em" semble être le choix populaire. La ligne de fond est que l'utilisation de? Px? résulte en des polices qui ne sont pas bien adaptées dans certains navigateurs. Kyle Schaeffer a écrit un article intéressant sur la raison pour laquelle utiliser des pourcentages peut être une meilleure option, mais d'après ce que je peux dire, la plupart des gens sont toujours en faveur de? Em? (ou au moins un em% hybride).
Maintenant, depuis? Em? peut être un peu délicat à utiliser, une pratique courante consiste à définir la taille de la police de caractères à 62,5%, puis à utiliser? em? pour tout le reste. La raison en est que les résultats sont faciles à traduire: 1.2em = 12px, 1.4em = 14px, 2.4em = 24px, etc.
Malheureusement, cette méthode pose un problème de composition étrange lorsque vous travaillez avec plusieurs niveaux de relations parent / enfant. Une fois que vous avez quelques niveaux, dimensionner avec? Em? devient difficile. La solution consiste généralement à déclarer des éléments enfants à "1em", mais Jonathan Snook pourrait avoir une solution encore meilleure.
Dimensionnement des polices avec REM
Le? Rem? unit provient du sac CSS3 de goodies et de tailles de polices par rapport à la racine (html) plutôt qu'au parent, ce qui évite le problème de la composition. Voici la syntaxe de Snook tirée de son article Font Sizing With REM:
L'inconvénient est que vous devez déclarer des sauvegardes dans? Px? vous l'avez deviné, différentes versions d'Internet Explorer. Toutefois, selon Snook, le résultat est "un dimensionnement cohérent et prévisible dans tous les navigateurs et un texte redimensionnable dans les versions actuelles de tous les principaux navigateurs".
Trouble au paradis
Comme je l'ai mentionné ci-dessus, il y a toujours quelqu'un autour de vous pour dire "ce n'est pas juste!" Le développeur Harry Roberts a récemment publié un article sur CSS Wizardry expliquant pourquoi le dimensionnement avec? Rem? peut être évité.Son argument est que l’astuce de 62,5% provient de la paresse du développeur (une bonne chose selon Roberts) mais aboutit finalement à plus travailler (une mauvaise chose).
Roberts poursuit en s'opposant à la définition de tailles de police de base arbitraires dont vous n'avez pas besoin ou même vraiment utiliser. Il vous encourage plutôt à définir votre base où vous le souhaitez et à définir uniquement les exceptions.
Les deux développeurs ont des points parfaitement valables. La méthode de Snook est certes plus facile à comprendre, mais Roberts avance un argument assez convaincant pour éviter le tour de passe de 62,5%. Vous devriez certainement examiner les deux de près et décider laquelle vous pouvez envelopper votre esprit!
Hauteur de ligne sans unité et grilles typographiques
La dernière chose que j'aimerais aborder est quelque chose que je ne savais même pas exister jusqu'à récemment: la hauteur de ligne sans unité. Eric Meyer explique cette idée en détail ici, mais je vais vous donner un aperçu rapide.
Le concept ici est un peu difficile à comprendre, mais supportez-moi. Fondamentalement, si vous déclarez line-height avec une valeur unifiée telle que? 1em?, Cette valeur calculée est ensuite automatiquement transmise à ses descendants. Voici l'exemple qu'Eric Meyer a concocté:
Cela semble assez correct au début, mais le résultat est en train de saisir la hauteur de ligne des éléments enfants à partir de la valeur parente calculée. Par conséquent, le code ci-dessus est exactement le même que si vous aviez écrit ceci:
Notez que la hauteur de ligne reste à 15 px pour tous les éléments. Pour éviter cela, Meyer suggère d'utiliser des hauteurs de ligne sans unité, qui servent de multiplicateur pour la hauteur de ligne des éléments enfants. Voici l'exemple ci-dessus réécrit pour utiliser cette technique:
Le résultat pour le code ci-dessus est exactement le même que celui du code ci-dessous. De cela, nous pouvons voir que notre hauteur de ligne de? 1? est multiplié par la taille de la police li et petit éléments et les résultats sont beaucoup plus prévisibles.
Notez ici que la hauteur de ligne reste égale à la taille de la police de chaque élément. Il est important de comprendre que ce n'est pas un argument pour régler votre hauteur de ligne sur votre taille de police, cela n'a été fait que pour l'exemple. N'importe quel nombre peut être utilisé pour la hauteur de ligne et vous devriez essayer de trouver ce qui fonctionne le mieux (l'exemple suivant utilise 1.231).
Boilerplate HTML5 approuvé!
Pour voir s'il s'agit d'une pratique courante, j'ai téléchargé une copie de HTML5 Boilerplate et fouillé dans le CSS. Effectivement, j'ai tout de suite trouvé une hauteur de ligne sans unité dans la pratique, bien que dans une version plus concise et abrégée.
Créer une grille typographique
Si vous voulez vraiment vous plonger dans la création d'une belle typographie Web, consultez l'article de Richard Rutter, "Compose to a Rhythm", qui décrit quelques techniques utiles pour jongler avec la taille de la police, la hauteur et le bord des lignes ou le remplissage afin de créer un rythme parfait pour votre page. .
Chris Coyier de CSS-Tricks choisit cette technique et la poursuit en la combinant avec, attendez, une hauteur de ligne sans unité! Consultez cette page où vous pouvez visualiser et télécharger la grille typographique préfabriquée de Chris en utilisant ces méthodes.
Conclusion
Ces trois leçons se résument bien. Tout d'abord, lorsque vous intégrez des polices sur le Web, utilisez @ font-face pour une solution multi-navigateur hautement fonctionnelle. Pour le moment, la syntaxe de Fontspring semble être la meilleure solution pour formater vos déclarations @ font-face. Les polices Web Web et Fontsquirrel sont des endroits à visiter si vous souhaitez des polices Web gratuites pouvant être facilement insérées dans une page.
Ensuite, depuis? Px? peut et a du mal à redimensionner sur différents navigateurs, en utilisant? em? ou? rem? Pour la taille des polices est probablement la meilleure façon de faire. Utiliser? Rem? permet d'utiliser facilement l'astuce de 62,5% sans composer les problèmes, mais il existe un argument décent contre l'abandon de cette technique, la définition d'une taille de police de base intentionnelle et le calcul manuel pour toutes les exceptions telles que les en-têtes.
Enfin, lorsque vous travaillez avec line-height, il est judicieux de définir un rythme vertical ou une grille typographique complète. Une méthode importante à garder à l'esprit est l'utilisation de hauteurs de ligne sans unité pour simplifier l'héritage.
Ce sont les meilleures pratiques actuelles dans la mesure où je les vois. N'hésitez pas à laisser une réplique féroce dans les commentaires pour toutes ces techniques. J'aime creuser et apprendre ce genre de choses et si vous avez d'autres méthodes, je veux les voir!