Le bon gras et le bon italique pour le bon travail

Imaginez un monde sans typographie italique. Comment styliser les magazines, les livres, les journaux, les émissions de télévision et autres titres ? Vous devriez vous contenter de souligner les titres ou de les mettre entre guillemets. Imaginez maintenant qu'il n'y ait pas de caractères gras. Comment établiriez-vous une hiérarchie ou concevriez-vous vos titres ? Sans italique ni gras, comment créer de l'emphase ou beaucoup d' emphase ? C'est le mauvais rêve d'un concepteur : un monde sans gras ni italique. Non seulement les concepteurs veulent un site police avec ces styles, mais dans de nombreux cas, ils en auront également besoin.

Les styles gras et italique sont des ajouts précieux au répertoire d'un designer. Mais la conception réside dans les détails. Lorsqu'il s'agit de styliser le gras et l'italique dans vos feuilles de style en cascade (CSS), il y a le vrai gras et l'italique, et il y a le faux gras et l'italique incliné. Vous devez également utiliser les éléments HTML appropriés pour la personne qui lit le texte ou pour le logiciel de lecture qu'elle pourrait utiliser.

Italique

Le mot " italique " vient d'Italikós, qui signifie "Italie" en grec, ce qui est tout à fait approprié compte tenu des origines de la typographie italique. L'érudit et humaniste italien Niccolo de Niccoli a produit ce que l'on considère comme le premier lettrage italique occasionnel au^XVe siècle. Au^XVIe siècle, le typographe Francesco Griffo da Bologna et l'imprimeur Alde Manutius ont produit un livre utilisant la typographie italique, et ils ont fait un tabac. L'italique est devenu si populaire que ses concurrents en ont conçu des versions pirates, qu'ils ont baptisées du nom de leur pays d'origine, l'Italie, ce qui a donné le terme "italique" que nous utilisons aujourd'hui.

Au début de leur développement, les italiques ne comprenaient que des lettres minuscules, mais au fil du temps, ils se sont étendus pour inclure d'autres caractères. La plupart d'entre nous considèrent les italiques comme une interprétation presque cursive de leurs homologues ordinaires. La police de caractères Monotype Baskerville™ est un bon exemple de caractères italiques qui ont cette qualité manuscrite.

Mais les obliques, qui sont considérées comme des italiques, n'ont pas du tout l'apparence de la cursive. Elles sont plus inclinées et paraissent donc plus conservatrices. Prenons l'exemple du caractère Univers® et de son 55 Oblique.

Utilisez l'italique pour les titres de livres, de magazines, d'émissions de télévision et de films. L'italique peut également désigner des mots étrangers ou techniques et peut être utilisé pour styliser une pensée.

L'italique permet également de mettre l'accent sur des mots ou des phrases dans le texte courant, en les accentuant de la même manière qu'une personne prononçant le mot l'exprimerait avec plus de force.

Gras

Les caractères gras, également appelés boldface, sont apparus au^XIXe siècle, bien après l'acceptation des italiques. Une police de caractères avec des graisses grasses peut avoir des styles de plus en plus lourds, comme dans le cas de la famille Univers qui a des graisses grasses (65), noires (75), et extra noires (85).

Les empattements, tels que les Baskerville, ont également des graisses grasses.

En fonction de la police de caractères et de l'étendue de sa famille, les caractères gras peuvent être condensés, italiques, obliques et étendus. Utilisez le gras dans votre mise en page pour différencier les titres, les sous-titres et le texte courant.

Le gras permet également de mettre l'accent sur un mot, plus que l'italique.

Les caractères gras permettent de repérer les mots importants.

Faux styles, faux pas

Les faux styles sont des faux pas dans l'utilisation de la typographie sur le web. Il s'agit d'une mauvaise pratique qui peut être évitée si vous connaissez la bonne façon de styliser votre typographie Web à l'aide d'une feuille de style CSS. Remarquez la différence entre les deux exemples italiques ci-dessous, avec leurs feuilles de style CSS respectives sous chaque image.

i {font-style: italic;}

i {font-family: "MTBaskervilleETW01-Ital";}

L'exemple de Baskerville le plus haut est incliné vers l'avant et l'exemple le plus bas, qui utilise la technique de l'inclinaison, est incliné vers l'avant. police-Famille est en italique.

Vous devez également être conscient de ce problème lorsque vous définissez les poids des caractères gras.

b {font-weight: bold;}

b {font-family: "MTBaskervilleETW01-Bold 1190971";}

L'exemple de gras le plus haut utilise du faux gras et l'exemple du bas est correctement créé. Bien que ces exemples soient en Baskerville, si nous menions cette opération de police-poids et police-Famille avec une police sans empattement comme Univers, on obtiendrait des résultats similaires. La solution ? Déclarer le gras et l'italique en utilisant police-Famille.

Nous évitons les faux italiques et les faux gras en utilisant les méthodes ci-dessus lors de la conception en Typecast™ de Monotype pour prévisualiser polices, et cela fonctionne exactement comme nous le souhaitons. Mais un seul police-Famille est déclarée, ce qui pose un problème car il faut une solution de repli au cas où Baskerville ne se chargerait pas.

Outre la spécification d'une ou de plusieurs solutions de repli, si vous écrivez vos propres feuilles de style CSS, vous pouvez utiliser les liens de style avec l'option @police-facece qui vous permettrait d'utiliser police-poids et police-style pour déclarer le gras et l'italique non seulement pour le Web polices tel que Baskerville, mais aussi pour les caractères de repli polices tels que la police de caractères Georgia®, sûre pour le Web.
La feuille de style CSS pourrait ressembler à ceci et nécessiterait des tests inter-navigateurs, ainsi qu'une prévisualisation dans les anciens navigateurs pour s'assurer qu'elle s'affiche correctement.


@font-face {font-family:"Your Serif Font";
src: url("Your Serif Name Regular");
font-weight: normal;
font-style: normal;}

@font-face {font-family:"Your Serif Font";
src: url("Your Serif Name Italic");
font-weight: normal;
font-style: italic;}

@font-face {font-family:"Your Serif Font";
src: url("Your Serif Name Bold");
font-weight: bold;
font-style: normal;}

@font-face {font-family:"Your Serif Font";
src: url("Your Serif Name Bold Italic");
font-weight: bold;
font-style: italic;}

p {font-family:"Your Serif Font", Georgia, serif;
font-weight: normal;
font-style: normal;}
i {font-style: italic; font-weight: normal;}
b {font-weight: bold; font-style: normal;}
.b-and-i {font-weight: bold; font-style: italic;}


D'un autre côté, l'écriture de CSS n'est peut-être pas votre tasse de thé. Si vous utilisez Web Polices de Monotype, le guide de démarrage rapide Polices.com vous facilite la tâche. Lorsque vous créez un nouveau projet dans Polices.com, veillez à tirer parti du regroupement par famille pour contrôler et déployer vos polices, ainsi que les graisses et les styles, d'une manière propre et respectueuse des normes. Le regroupement par famille vous permet également d'utiliser différentes graisses (100-900) dans un environnement d'édition facile à utiliser.

Entendre et voir le bon élément

La typographie sur le web ne se voit pas seulement, elle s'entend aussi grâce aux logiciels de lecture d'écran. Les lecteurs d'écran permettent aux personnes aveugles ou malvoyantes de se faire lire le contenu du texte à l'aide de la synthèse vocale. Ils entendent l'accent mis sur les mots lorsque vous les avez étiquetés à l'aide de <em> ou <strong> Éléments HTML. Créer différents styles pour les caractères gras <b> et forte <strong>ainsi que l'italique <i> et l'accent <em>et utilisez ces éléments de manière appropriée dans votre code HTML. Chaque élément a une application différente, il ne faut donc pas les utiliser de manière interchangeable.

Accentuation et Fort: Lorsque vous mettez en valeur un texte, pensez à la sonorité des mots. Style de l'accentuation <em> avec une typographie italique ou oblique pour désigner un ou plusieurs mots qui nécessitent que le lecteur ou le logiciel de lecture mette l'accent sur le texte. Utiliser <strong> pour les contenus importants. Les logiciels de lecture d'écran s'appuient sur votre utilisation de l'accentuation HTML et des éléments forts pour savoir quels mots doivent être accentués, afin que la personne qui entend le texte reçoive l'effet approprié.

Je n'ai pas mangé le dernier biscuit.

I did <em>not</em> eat the last cookie.

Visuellement, vous pouvez utiliser des majuscules pour un effet plus percutant.

Je n'ai pas mangé le dernier biscuit.

I did <em>NOT</em> eat the last cookie.

Utiliser des <strong> pour les contenus importants.

Attention ! La poêle sera chaude.

<strong>Warning!</strong> The pan will be hot.

Italique et Gras: Comme l'accent <em>, italique <i> utilisent également les styles italique ou oblique, mais réservent l'italique <i> pour les titres. Vous pouvez également utiliser l'italique pour décaler les titres, les sous-titres et même les guillemets. Gras <b> doit être utilisé pour les modifications de poids, par exemple pour faire ressortir les titres, les sous-titres ou le texte courant.

Type Haiku par Jason Tselentis
Un livre que j'ai lu
Intitulé Learn About Polices
M'a appris à connaître la typographie


<b>Type Haiku</b> by Jason Tselentis
A book that I read
Entitled <i>Learn About Fonts</i>
Taught me about type


Vous pouvez également combiner le gras et l'italique pour plus de variété, comme dans le cas du titre du poème qui est à la fois en gras et en italique.

Type Haiku par Jason Tselentis
Un livre que j'ai lu
Intitulé Learn About Polices
M'a appris à connaître la typographie


<b><i>Type Haiku</i></b> by Jason Tselentis
A book that I read
Entitled <i>Learn About Fonts</i>
Taught me about type


Écrire en HTML et CSS pour le bon emploi

Utilisez la typographie en gras et en italique pour ajouter de la variété à une mise en page et pour établir une hiérarchie. Utilisez l'italique pour les titres. Mais soyez également conscient de la façon dont les gens liront et entendront le texte, en prenant soin d'utiliser l'accentuation <em> et forte <strong> de manière appropriée. Enfin, il est réconfortant de savoir qu'un monde avec des non audacieux et non L'italique est imaginaire, un mauvais rêve. Ou bien est-ce le cas ? La seule façon de faire de l absolument certain ? Dites Non à faux.