Faire des lettres initiales - Partie III : Réglage fin et amusant

Dans les parties I et II de cette série sur les lettres initiales, nous avons examiné les initiales en relief qui se trouvent sur la ligne de base et les initiales en creux (également appelées "drop caps") qui se trouvent en dessous de la ligne de base. Dans cette dernière partie, nous approfondirons non seulement le test et l'ajustement des initiales en relief et des capitales tombantes dans les navigateurs à l'aide de HTML et de CSS, mais nous examinerons également les manières expressives d'utiliser le site Web polices.

Avant de passer à la partie amusante, il est important de revoir les bases de la définition des lettres initiales dans la typographie Web. Vous devez ajuster les propriétés typographiques dans le backend pour augmenter la taille de votre lettre initiale et la positionner là où vous le souhaitez. classe ou pseudo-classe pour apporter des modifications à : police police la taille, la casse, la hauteur de ligne, les marges, l'espacement et le flottement (pour les majuscules).

Vous pouvez également ajuster le poids et la couleur, ainsi que le style, que ce soit en italique ou en gras, ou en gras et en italique. Toutes ces propriétés doivent être ajustées une à une pour que le rendu soit cohérent entre les différents navigateurs.

Essais et ajustements

Pour offrir une expérience utilisateur cohérente, vous devrez tester et ajuster vos lettres initiales dans différents navigateurs : Safari® d'Apple, Chrome® de Google, Explorer® ou Edge® de Microsoft, et Mozilla Firefox®, entre autres. Voici un exemple de ce qui se passe lorsqu'un navigateur fonctionne, mais que les autres affichent les choses différemment.

body {font-family:Georgia, "Times New Roman", Times, serif; margin:140px;}

p { font-size: 32px; line-height: 70px; margin-bottom:48px;}

p:first-child::first-letter { font-family: Georgia, serif; font-size: 280px; 198px; float: left; text-transform: uppercase; padding: 0px 15px 0px 5px; color:#F69; z-index:10; margin-top:–10px;}

em { color:#930;}

<p>And here is a drop cap <em>A</em> that sits below its own line, and two lines deep. The <em>A</em> is colored to make it stand out for this visual. But there’s a problem. Across two browsers things look wrong. So what has to be adjusted to fix it?</p>

Remarquez l'emplacement différent du caractère Georgia®"A" dans les captures d'écran ci-dessous. Firefox semble correct, mais Safari et Chrome le rendent mal.

Mise en page cassée dans Safari.

Mise en page cassée dans Chrome.

La mise en page dans Firefox, telle que nous la souhaitons.

À première vue, il semblerait que rembourrage ou marge perturbe la mise en page. Mais bricoler avec ces paramètres ne nous donne pas la bonne solution. L'examen des mises en page de Chrome et de Safari du point de vue de l'alignement, en particulier en ce qui concerne la ligne de base, nous indique que quelque chose ne va pas avec l'avance, alias CSS hauteur de ligne. Après quelques expériences, nous trouvons une solution pour la hauteur des lignes, et nous la notons dans les commentaires CSS pour référence future.

body {font-family:Georgia, "Times New Roman", Times, serif; margin:140px;}

p { font-size: 32px; line-height: 70px; margin-bottom:48px;}

p:first-child::first-letter { font-family: Georgia, serif; font-size: 280px; /* line-height added for Safari and Chrome fix but will not impact Firefox */ line-height: 198px; float: left; text-transform: uppercase; padding: 0px 15px 0px 5px; color:#F69; z-index:10; margin-top:–10px;}

em { color:#930;}

Nous obtenons ce que nous voulons dans les trois navigateurs grâce à l'option hauteur de ligne inclus. Chrome et Safari reconnaissent la forme du capuchon de la goutte d'eau. hauteur de ligne ajustement. Dans Firefox, l'ajout de l'option hauteur de ligne ne fait aucune différence, et la présentation reste telle que nous la souhaitons.

Pixels ou Ems ?

Dimensionnement de tous vos types en ems offre un avantage non négligeable : la taille des caractères augmente ou diminue en fonction de la taille de l'écran, qu'il s'agisse d'un smartphone, d'une tablette, de desktop ou même d'une télévision, et dans la plupart des cas, il n'est pas nécessaire d'ajouter du JavaScript™ pour tenir compte de ces différentes fenêtres de visualisation. Mais attention : si vous utilisez ems pour dimensionner votre typographie, vous risquez d'avoir des mises en page incohérentes d'un navigateur à l'autre, et vous risquez de vous retrouver à essayer d'ajuster des dixièmes et des centièmes d'un ém pour essayer de faire en sorte que les choses aient l'air correctes. Et quoi qu'il en soit, la mise en page peut sembler un peu "décalée" ou complètement cassée.

body {font-family:Georgia, "Times New Roman", Times, serif; margin:12em;}

p { font-size: 1em; line-height: 2em; }

p:first-child::first-letter { font-family: Didot, serif; font-size: 9em; text-transform: uppercase; margin:0.07em 0.07em 0.07em –0.05em; line-height: 0.755em; float:left;}

em { color:#930;}

<p>So let’s take a look at setting this in ems to see what our drop cap <em>S</em> does when it comes to using the line-height property to make adjustments and fixes across browsers. Is it as easy as adding the line-height property, and having it look correct in Chrome and Safari? The only way to find out is through some testing, and trial and error. Unfortunately, once you set your initial letter, and choose a typeface, you will have to test it out across as many browsers as possible to make sure that it looks correct and looks the way you want.<p>

En utilisant le CSS ci-dessus, nous sommes en mesure de placer le caractère Didot®"S" là où nous le souhaitons dans Firefox, mais dans Safari et Chrome, le mieux que nous puissions faire sans casser toute la mise en page est de faire flotter le "S" légèrement au-dessus de la ligne de base sur laquelle nous voulons qu'il soit aligné.

Firefox nous donne l'alignement que nous voulons.

Mais Safari et Chrome nécessiteront beaucoup plus d'ajustements pour être parfaitement adaptés.

Il est également possible d'insérer la capsule dans un espace blanc plus important pour plus de relief, ce qui nous donne une plus grande marge de manœuvre pour procéder à des ajustements. marges et hauteur de ligne. La mise en page doit encore être affinée pour nous donner l'alignement de base que nous souhaitons.

Si l'on se préoccupe constamment de ems dans le CSS ne vous donne toujours pas les résultats que vous souhaitez avec vos initiales en relief ou vos majuscules, il peut être plus facile de passer à pixels pour dimensionner l'ensemble de votre typographie. Même dans ce cas, vous pouvez utiliser un méta pour ajuster le contenu de la fenêtre pour augmenter ou diminuer l'échelle, en fonction de la taille de l'écran. Mais la plupart du temps, ce sont les bouchons qui rendent le redimensionnement avec ems Dans ce cas, vous pouvez vous contenter d'initiales en relief.

Taille, poids et emplacement

Une fois que vous connaissez les mécanismes de base et que vous savez ce qu'il faut faire pour que les choses fonctionnent sur tous les navigateurs, vous pouvez vous amuser un peu. Avec Web polices , vous disposez d'une grande variété de polices de caractères pour rendre vos lettres initiales attrayantes et expressives. Vous pouvez également vous amuser avec la mise en page.

Tous les exemples ci-dessous ont été rendus avec le logiciel Typecast™de Monotype et son éditeur CSS.

Le 'H' dans la police de caractères Shadow Gothic™. Notez que le blanc de la forme de la lettre - et non l'ombre noire - est aligné sur la ligne de base de la deuxième ligne.

S" dans la police de caractères Aachen®.

Initiale "T" en relief dans la police de caractères Aachen.

Le "T" en forme de goutte d'eau dans la police de caractères d'Aix-la-Chapelle.

Vous pouvez accrocher le chapeau dans la marge, ce qui permet d'élargir le texte de la section.

Pour une apparence non conventionnelle, vous pouvez modifier l'emplacement et l'alignement du "O".

Mais si vous n'aimez pas les gros caractères, pensez à ajouter un peu de décor avec des swashs, comme la police ITC Bodoni™ Seventytwo Swash. Dans ce cas, la position du "H" est tellement penchée vers l'avant qu'elle laisse une quantité étrange d'espace négatif entre le "H" et les deuxième et troisième lignes de caractères.

Ce "A" de la guillotine ITC Bodoni Seventytwo Swash serait mieux avec le "nd" plus près, mais malheureusement nous ne pouvons pas faire ce genre de raffinements avec la typographie Web.

Définir un drop cap avec un caractère swash qui a un look plus audacieux, comme la police de caractères Swashbuckler™. Si ces exemples ont retenu votre attention, n'hésitez pas à consulter le site Suivante pour en savoir plus sur les swashs sur le Web.

Les lettres initiales à grands pas

La typographie sur le web ne cesse de s'améliorer grâce aux progrès des navigateurs web et aux évolutions des normes CSS et HTML. Mais nous avons encore un long chemin à parcourir, en particulier lorsqu'il s'agit de spécifier et de composer les lettres initiales dans le backend. Il n'existe pas de méthode standard pour définir les lettres initiales sur le web, du moins il n'y a pas d'ensemble standard de classes en CSS. Au lieu de cela, les individus doivent développer leurs propres méthodes ou adopter celles que d'autres ont créées jusqu'à ce que la vague de normes Web Suivante soit publiée.

Dimensionnement absolu en pixels semble mieux fonctionner dans tous les navigateurs que le dimensionnement des lettres initiales à l'aide de la fonction ems. Mais si nous devions implémenter JavaScript™ pour gérer l'affichage et le dimensionnement à travers différents navigateurs et fenêtres de visualisation, il y a de fortes chances pour que nous y parvenions avec ems. Les capitales tombantes posent le plus de problèmes de mise en page et de cohérence, car il faut ajuster un plus grand nombre de facteurs : hauteur de ligne, flottement, marges et espacement. Par conséquent, lorsque vous concevez vos propres pages, si vous vous retrouvez dans une impasse avec les majuscules, vous pouvez opter pour des initiales en relief, qui sont plus faciles à mettre en œuvre.

Il est à espérer que de nouvelles normes HTML et CSS verront bientôt le jour, permettant une meilleure désignation et un meilleur traitement des initiales en relief et des majuscules. En attendant, il faut continuer à expérimenter et à travailler. Et n'oubliez pas de vous amuser à trouver, choisir et utiliser la typographie.