Renforcer la typographie Web avec des lettres majuscules

Lorsqu'il s'agit de messages textuels et d'e-mails, nous interprétons généralement les lettres majuscules, connues sous le nom de " tout en majuscules", comme des hurlements. Mais en mettant vos titres, vos leads et vos courtes citations en majuscules, vous pouvez donner du punch à vos mises en page et attirer l'attention de vos lecteurs. Cela ajoute également un autre niveau de hiérarchie typographique. Il y a aussi le cas des acronymes comme la NASA ou des abréviations comme BC et AD, qui nécessitent des majuscules.

Lors de la mise en page de votre site avec la typographie Web, il arrive que vous souhaitiez ou deviez utiliser des majuscules, et il est important de tenir compte des questions formelles liées au choix des polices de caractères, à la mise en page et à l'aspect général du site. Mais quand faut-il utiliser les majuscules ? Qu'en est-il des petites capitales ? Et que sont exactement les petites capitales ?

Envisager des casquettes

Les pièces de théâtre, les scénarios et les téléfilms utilisent les majuscules pour montrer qu'un personnage crie, et beaucoup d'entre nous utilisent cette convention dans les communications textuelles telles que les forums de discussion, les courriels, les messages textuels et les médias sociaux. Lorsque nous voulons faire une déclaration forte et emphatique, nous l'écrivons en majuscules.

Les majuscules seront-elles toujours perçues comme des cris et des hurlements dans la typographie Web ? Pas nécessairement. En fait, dans certaines situations, vos créations peuvent nécessiter l'utilisation de toutes les majuscules, et il s'agira alors moins de crier que de concevoir. Mais il est important de connaître les différences entre les majuscules, les petites capitales et les petites capitales, et de savoir comment les utiliser efficacement.

Lorsque vous utilisez des majuscules, augmentez l'espacement, également appelé espacement des lettres, pour ajouter un peu d'air entre les lettres.

Sachez que les petites capitales ne sont pas des caractères majuscules rétrécis. Il s'agit d'un ensemble complètement différent de glyphs. En général, les petites capitales ont une hauteur x proche de celle des lettres minuscules. C'est important, car les petites capitales coexistent généralement avec les minuscules, comme dans le cas d'un acronyme en petites capitales tel que NASA, utilisé dans le paragraphe ci-dessous.

Une idée fausse veut que les petites capitales aient la même hauteur que les minuscules. C'est parfois le cas, mais ce n'est pas la norme. Cela dépend de la police de caractères police. La police de caractères Monotype Centaur®, utilisée pour l'exemple de la NASA ci-dessus et illustrée ci-dessous par une comparaison de la hauteur x, a des petites capitales dont la hauteur x est plus élevée que celle des minuscules.

La police de caractères Linotype Didot® Small Caps, quant à elle, a la même hauteur x que les minuscules de la police de caractères Linotype Didot®.

Et puis il y a les petites capitales, ainsi nommées parce qu'elles ont une hauteur x inférieure à celle des petites capitales. Comparez la police de caractères P22 Underground™ Small Caps (à gauche) à P22 Underground Petite Caps (à droite).

La relation entre la hauteur x des petites capitales, des minuscules et des petites capitales varie de police à police. Dans le cas de P22 Underground, les minuscules ont la hauteur x la plus basse, celle-ci augmentant à partir des petites capitales jusqu'aux petites capitales. Les majuscules apparaissent à l'extrême gauche.

Utilisation et choix des vrais bouchons

Vous pourriez créer des petites capitales et des petites capitales de manière synthétique, en mettant les mots en majuscules et en réduisant la taille de police dans votre programme de mise en page pour l'impression ou dans votre CSS pour la conception Web, afin qu'ils aient approximativement la même hauteur x que les minuscules. MAIS C'EST UNE MAUVAISE FAÇON DE FAIRE (si vous avez eu l'impression de crier, c'est que vous l'avez interprété correctement, parce que faire semblant d'utiliser des petites majuscules et des minuscules est une erreur de forme). Cela ne vous donnera pas la bonne couleur typographique. Ce n'est pas la même chose que d'utiliser un site police avec de vraies petites capitales et de vraies petites capitales.

L'utilisation de fausses petites capitales dans Centaur, en tapant NASA en majuscules puis en réduisant la taille des caractères, permet d'obtenir la taille souhaitée, mais la couleur est trop claire par rapport au reste de la typographie. L'exemple utilisant de vraies petites capitales, tiré de Centaur Small Caps & Old Style Figures police- réglé à la même taille que la typographie environnante - donne une couleur typographique uniforme.

Au lieu de mettre de fausses petites capitales ou de fausses petites capitales, trouvez un site police qui comprend de vraies petites capitales et de vraies petites capitales, conçues pour fonctionner à leur taille respective, parmi les minuscules correspondantes. Par exemple, Centaur est disponible dans une gamme de styles et de graisses, avec de vraies petites capitales, et ils sont tous disponibles sur le site Web polices. La police de caractères P22 Underground, également disponible pour le Web, offre un grand choix de styles, y compris des petites capitales et des petites capitales, dans toute une gamme de graisses.

TOUTES LES CAPS : Où ET Pourquoi ?

Lorsqu'il s'agit de votre mise en page, il est important de considérer les choses d'un point de vue formel et compositionnel. Comment le lecteur interagira-t-il avec la typographie Web ? Quelle place occupera-t-elle ou non ? Quel type d'affirmation voulez-vous faire ?

Le débat en cours sur les majuscules et les minuscules, également appelées minuscules mixtes, porte sur l'influence de la lisibilité et des normes de lecture sur l'expérience. Dans les deux paragraphes ci-dessous, rédigés dans la police de caractères Georgia®, vous remarquerez que les majuscules prennent beaucoup plus de place. Le texte en majuscules semble encombré, long, voire odieux. Pour une telle quantité de texte, les majuscules ne sont pas du tout appropriées.

De grandes quantités de texte en majuscules peuvent gêner le lecteur. Mais il est parfois nécessaire d'en dire plus avec plus. Les titres ou les courtes lignes de texte en majuscules peuvent donner une impression d'excitation et d'importance.

Si vous voulez faire une déclaration et montrer à tout le monde que vous êtes heureux, les casquettes peuvent faire l'affaire.

Les majuscules sur le web

Vous pouvez utiliser le site Web polices qui propose des majuscules, des petites majuscules et des petites capitales, et vous pouvez également utiliser CSS pour transformer tout ce qui est tapé en minuscules en majuscules à l'aide de transformation du texte comme indiqué dans le titre ci-dessous.

h1 {font-family: Helvetica, sans-serif; font-size:2em; text-transform:uppercase; letter-spacing:0.1em;}
p {font-family: Georgia, serif; font-size: 1.2em; line-height:1.8em;}

<h1>Sizing Your Web Typography</h1>
<p>Seeing a large amount of copy in all caps, not only looks dramatically different from mixed case, but it also takes longer to read. Is that because we&rsquo;ve been trained since the time we could read to recognize mixed case, and all caps are outside the norm? Is it because mixed case gives us hills and valleys, in the form of ascenders and descenders that we can more quickly recognize?</p>

Un titre en majuscules définit une ligne de caractères rectangulaire, sans ascendants ni descendants se rapprochant des éléments voisins. L'aspect est plus net et, sur le plan hiérarchique, l'intitulé peut être différencié par la taille, la graisse et la casse.

Vous pouvez également utiliser un grand titre en majuscules qui mène à la première ligne de votre paragraphe en majuscules, puis à une phrase en majuscules pour le reste du paragraphe, afin de créer trois niveaux de hiérarchie. Appliquez le première ligne au CSS d'un paragraphe pour mettre automatiquement la première ligne en majuscules. Mais gardez à l'esprit que tous les navigateurs ne prendront pas en charge la transformation de la première ligne et des majuscules, et qu'il convient donc de la tester dans tous les navigateurs avant de la déployer.

h1 {font-family: Helvetica, sans-serif; font-size:2em; text-transform:uppercase; letter-spacing:0.1em;}
p {font-family: Georgia, serif; font-size: 1.2em; line-height:1.8em;}
p::first-line {text-transform: uppercase; letter-spacing:0.05em;}

<h1>Sizing Your Web Typography</h1>
<p>Seeing a large amount of copy in all caps, not only looks dramatically different from mixed case, but it also takes longer to read. Is that because we&rsquo;ve been trained since the time we could read to recognize mixed case, and all caps are outside the norm? Is it because mixed case gives us hills and valleys, in the form of ascenders and descenders that we can more quickly recognize?</p>


Si une première phrase en majuscules n'est pas assez percutante, vous pouvez créer un paragraphe de tête en majuscules, comme celui présenté ci-dessous dans la police de caractères Premiéra, qui présente une hiérarchie de grande à moyenne à petite dans la mise en page. La propriété text-transform fait en sorte que le paragraphe de tête police soit entièrement en majuscules.

Dans l'exemple ci-dessous, la taille du paragraphe de tête en majuscules police est agrandie, ce qui permet d'accentuer le contraste entre le paragraphe de tête et le paragraphe suivant.

Mais ce cadre semble presque trop grand.

Envisager les petites capitalisations

Les majuscules avaient le punch nécessaire pour la première ligne d'un paragraphe. Et la mise en place d'un caractère de tête en majuscules, avec un police comme Premiéra, nous a donné une unité typographique dans la mise en page. Le seul problème était que l'utilisation d'une taille plus grande pour l'amorce de la phrase donnait l'impression d'une trop grande emphase, d'une trop grande taille. Que faire si l'on veut un caractère de tête légèrement plus grand ( police ), en majuscules, et plus contrasté ? Nous avons besoin de quelque chose qui nous donne plus avec moins.

Envisagez d'utiliser des petites capitales, ce que vous pouvez faire par le biais d'une feuille de style CSS avec la police de caractères Premiéra. Malheureusement, le navigateur Safari® d'Apple ne reconnaît pas les petites capitales (smcp) au moment de la rédaction du présent document. Les exemples présentés ci-dessous proviennent du navigateur web Mozilla Firefox®, sauf indication contraire.

-webkit-police-feature-settings : "smcp" ;
-o-police-feature-settings : "smcp" ;
-moz-police-feature-settings : "smcp" ;
-ms-police-feature-settings : "smcp" ;
police-feature-settings : "smcp" ;

Cette mise en page, réalisée en Premiéra pour le titre, l'intertitre et le texte courant, utilise des petites capitales (smcp) pour le rôle principal, mais il semble trop petit.

Nous allons augmenter la taille du paragraphe de tête police dans l'exemple Suivante afin d'obtenir un paragraphe de tête légèrement plus grand avec un contraste de poids notable entre lui et le paragraphe Suivante .

Nous avons maintenant la bonne dose de différenciation. Dans la version Suivante , nous avons ajouté espacement des lettres : 0.02em au début du texte en petites capitales, ce qui lui permet de mieux correspondre à la largeur du paragraphe Suivante , créant ainsi une plus grande harmonie entre les deux mesures.

Un dernier détail à prendre en compte : la longueur des mots. Certains des mots de l'annonce sont longs, ce qui rend la lecture difficile lorsqu'ils sont en majuscules. Mais en ajustant le texte avec des mots plus courts, nous sommes en mesure de respecter la mesure et d'obtenir l'effet désiré.

Ajouter des petites capitales à une mise en page

Nous avons vu comment augmenter le volume d'un lead en utilisant des petites capitales plus grandes. Mais les petites capitales sont particulièrement utiles si des acronymes et des abréviations apparaissent fréquemment dans votre texte courant. Comparez les deux exemples ci-dessous, dans la police de caractères Premiéra, où la NASA apparaît sporadiquement. Les petites capitales de Premiéra se fondent naturellement dans le texte courant du paragraphe supérieur. Dans l'autre exemple, la NASA en majuscules ressort, presque trop.

Vous pouvez utiliser les petites capitales (smcp) police-réglage des caractéristiques pour que nasa (et non NASA) apparaisse en petites capitales, à condition que votre site Web police ait des petites capitales et que le navigateur prenne en charge les petites capitales.

-webkit-police-feature-settings : "smcp" ;
-o-police-feature-settings : "smcp" ;
-moz-police-feature-settings : "smcp" ;
-ms-police-feature-settings : "smcp" ;
police-feature-settings : "smcp" ;

Comme indiqué précédemment, le navigateur Safari d'Apple ne prend pas en charge les petites capitales (smcp) en CSS. Remarquez que les petites capitales que nous avons appliquées dans le paragraphe supérieur apparaissent en minuscules dans Safari (voir ci-dessous). En revanche, la NASA majuscule du deuxième paragraphe apparaît correctement.

Heureusement, il existe une solution à ce problème. Utilisez la fonction de conversion des capitales en petites capitales (c2sc). Cette fonction est pratique, que votre typographie Web soit visualisée dans Safari, Firefox ou un autre navigateur.

-webkit-police-feature-settings : "c2sc" ;
-o-police-feature-settings : "c2sc" ;
-moz-police-feature-settings : "c2sc" ;
-ms-police-feature-settings : "c2sc" ;
police-feature-settings : "c2sc" ;


Sur les navigateurs qui prennent en charge c2scet avec un site Web police comme Premiéra qui a des petites capitales, vous obtenez la NASA en petites capitales, comme on le voit dans Firefox.

Mais dans Safari, illustré ci-dessous, qui ne reconnaît pas la fonction c2scLa NASA ne se met pas en petites capitales, ce qui la ramène à la NASA en majuscules. C'est beaucoup mieux que de le voir apparaître à plusieurs reprises, et de manière incorrecte, comme nasa en minuscules lors de l'utilisation de smcp.

Lorsqu'il s'agit de définir des styles pour les abréviations et les acronymes en petites capitales, l'idéal serait de les styliser à l'aide d'un élément HTML apparenté. Il existait à l'époque un élément <acronym> qui aurait été sémantiquement approprié pour la NASA, mais l'élément <acronym> a été déprécié et n'est pas utilisé dans le HTML5 au moment où nous écrivons ces lignes. L'utilisation du langage HTML <abbr> pour les abréviations et les acronymes est une bonne pratique.

abbr {-webkit-font-feature-settings: "c2sc";
-o-font-feature-settings: "c2sc";
-moz-font-feature-settings: "c2sc";
-ms-font-feature-settings: "c2sc";
font-feature-settings: "c2sc";}

<abbr title="air conditioning">AC</abbr>

<abbr title="application program interface">API</abbr>

<abbr title="business to business">B2B</abbr>

<abbr title="business to consumer">B2C</abbr>

<abbr title="initial public offering">IPO</abbr>

<abbr title="National Aeronautics and Space Administration">NASA</abbr>

Certains navigateurs peuvent appliquer automatiquement le style <abbr> en petites capitales. Certains navigateurs ajoutent une ligne ou une ligne pointillée sous le symbole <abbr> qui peut être désactivé en ajoutant l'élément décoration du texte : aucune ou largeur de la bordure inférieure : 0 à son CSS. Mais il y a une chose à garder à l'esprit : lorsqu'il est visible, le trait de soulignement est utile, car il sert de repère aux lecteurs, puisque certains navigateurs afficheront la mention <abbr> lors du survol de l'élément. Par exemple, le survol de NASA vous montrerait National Aeronautics and Space Administration (administration nationale de l'aéronautique et de l'espace). Cependant, si vous avez de nombreuses occurrences d'une abréviation ou d'un acronyme, le fait de le voir souligné tout au long de la mise en page peut être gênant.

La fin de l'histoire

Bien que nous assimilions les majuscules à des cris, il y a des cas où les majuscules peuvent s'avérer utiles pour la typographie sur le Web. L'utilisation de petites capitales pour les abréviations et les acronymes fréquemment utilisés est un détail agréable. Les titres en majuscules attireront l'attention du lecteur et donneront du punch à la mise en page. Les paragraphes de tête et les courtes citations fonctionnent également très bien en majuscules.

Les majuscules donnent de meilleurs résultats lorsque l'ensemble de la mise en page est pris en considération, de même que la longueur des mots, des lignes et des paragraphes. En fin de compte, utilisez les majuscules avec parcimonie. Personne n'a envie d'être ivre de coups de poing après des coups de poing de majuscules.