Le dispositif Swash Police

Lorsqu'il s'agit d'améliorer l'aspect visuel d'un site, les traits d'union peuvent lui apporter un petit plus - en insistant sur le mot " petit", parce qu'un petit plus peut être très utile. Principalement présents dans les polices de caractères classées comme script, calligraphie et écriture manuscrite, les tirets sont parfaits pour les lettres initiales, les titres et les citations à l'emporte-pièce. Mais si vous utilisez trop de traits d'union ou si vous les placez en trop grand nombre, vous aurez beaucoup de choses en trop, ce qui pourrait être une mauvaise chose.

Un titre défini dans la police de caractères Auberge Script™ Pro avec des tirets activés à l'aide d'une propriété CSS. Un titre plus long, ou un trop grand nombre de lettres avec des tirets concurrents, serait excessif. Mais dans ce cas, il y a juste ce qu'il faut de mots et de tirets.

Ci-dessus, vous trouverez un jeu de drop cap dans la police de caractères Australis Pro™ Swash. Les articles précédents des Essentiels de la typographie sur le Web ont examiné les lettres en relief et les calottes, et ont exploré d'autres approches pour l'utilisation des lettres initiales. N'oubliez pas de lire ou de relire ces articles pour vous familiariser avec les propriétés CSS nécessaires à la création de lettrines.

Les caractères Swash sont faits pour couler

Lorsqu'il est utilisé comme verbe, swash dénote un mouvement avec un bruit d'éclaboussure : La pluie s'est engouffrée dans les gouttières et s'est écoulée dans les tuyaux de descente. En tant que nom, swash fait référence à une masse d'eau qui se précipite ou qui éclabousse. Mais lorsque les concepteurs et les typographes entendent le mot " swash ", ils pensent à des caractères typographiques ornés, parfois à des lettres initiales telles que les "drop caps". Comme l'eau, les caractères swash, leurs traits élaborés et leur ornementation donnent un aspect fluide.

Mais comment et où trouver les caractères swash ? Parfois, vous aurez deux polices: un police avec son jeu de caractères standard, et un autre police séparé avec les swashs.

Le 'Heading Two' (en haut) est composé dans la police ITC Bodoni™ Seventytwo Swash, et le 'Heading Three' (en bas) est composé dans la police ITC Bodoni Seventytwo. Il s'agit d'un cas où une adresse police permet d'obtenir des caractères swash.

Dans d'autres cas, polices avec les caractéristiques ^OpenType® ou OpenType Pro, ainsi que polices avec les versions Pro, peut vous offrir des caractères, des capacités et des améliorations étendus, le tout en une seule fois police. Si ce site police comporte des traits d'union, vous devez utiliser la propriété CSS pour les activer sur le web.

Le "Grand titre" défini comme h2 (en haut) et le "Petit titre" défini comme h3 (en bas) sont tous deux définis dans la section Auberge Script Pro mais police-paramètres de fonctionnalités : "swsh" tourne sur les caractères swash dans "Little Heading".

Le bon swash pour vos lettres initiales

Comme nous l'avons vu dans des articles précédents, la définition des lettres initiales sur le web est techniquement difficile en raison de certaines limitations dans les langages HTML et CSS ainsi que d'incohérences entre les navigateurs. Et lorsque vous ajoutez des traits d'union, le défi est encore plus grand. Les tirets peuvent se heurter au texte voisin, ce qui vous oblige à procéder à des ajustements successifs pour réparer la mise en page. Il arrive qu'un swash fonctionne sur le site police et qu'un autre ne fonctionne pas du tout sur le site police . Mais parfois, vous avez de la chance : la lettre dont vous avez besoin peut se trouver sur le site police avec lequel vous avez commencé, mais il vous suffit de l'activer à l'aide de CSS.

La lettre initiale 'H' définie dans Auberge Script Pro se heurte trop à la lettre voisine, ce qui rompt la mise en page. Des ajustements de la hauteur de ligne, du remplissage et/ou de la marge pourraient résoudre ce problème. Un autre site police pourrait également résoudre le problème.

Mais en ajoutant police-paramètres de fonctionnalités : "swsh" à son CSS nous donne un caractère alternatif qui sauve la situation. Non seulement il nous permet de placer le mot "Here" avec un meilleur crénage, mais il a également ajouté une décoration pour embellir la mise en page.

En activant le deuxième caractère swash disponible dans le CSS ci-dessus, nous avons obtenu un meilleur résultat sans avoir à nous préoccuper de la hauteur des lignes, du crénage, de l'espacement et des marges. De plus, nous n'avons pas eu besoin de chercher un autre police, de réinitialiser la typographie et d'ajuster la mise en page. L'utilisation du deuxième caractère swash était une solution facile, mais ne présumez pas que tous les deux caractères fonctionneront.

Avec police-paramètres de fonctionnalités : "swsh" a permis, Auberge Script Pro's La barre oblique "G" se heurte aux lettres voisines.

Il s'agit d'un cas où la suppression police-paramètres de fonctionnalités : "swsh" du CSS pour utiliser le "G" par défaut fonctionne mieux.

Application et essais

Comme pour toute conception, vous devrez tester correctement la typographie et la mise en page sur un certain nombre de navigateurs, y compris ceux des ordinateurs de bureau et des appareils mobiles. Et avant de publier votre site dans le reste du monde, créez quelques permutations pour voir ce qui fonctionne et ce qui ne fonctionne pas.

Un mot court et unique en Auberge Script Pro avec le police-paramètres de fonctionnalités : "swsh" Propriété CSS utilisée.

Les barres obliques ne servent pas seulement à orner le début d'un mot, elles peuvent aussi ajouter une ponctuation visuelle à la fin d'un mot, à condition qu'il y ait une barre oblique terminale appropriée.

Tous les swashs ne sont pas créés de la même manière. Certains sont élaborés, d'autres sont discrets, comme ce titre en ITC Bodoni Seventytwo Swash.

Parfois, l'excès d'une bonne chose peut gâcher l'expérience. Dans le cas de l'Auberge Script Pro, les swashs se battent les uns contre les autres.

Mauvaise idée. Il n'est pas souhaitable que votre texte courant soit entièrement composé de tirets. Amusez-vous avec les tirets, mais faites preuve de retenue. Si vous en utilisez juste assez, vous ajouterez de l'élégance à votre texte. Mais si vous en utilisez trop, vous nuirez à la lisibilité en noyant le lecteur sous des fioritures ennuyeuses. Et personne ne veut d'un tsunami de tirets.