Des décisions de conception inspirées avec Herb Lubalin : la typographie peut être aussi passionnante que l'illustration et la photographie

Bien qu'une bonne utilisation du texte aide les gens à lire, une excellente typographie peut faire bien plus. La typographie peut articuler une idée avec éloquence et communiquer un message coloré d'une manière aussi puissante que n'importe quelle illustration ou photographie.

Je suis quelqu'un qui aime le cinéma autant que j'admire la typographie. Peu de choses m'inspirent autant que de voir une typographie d'affiche de film qui évoque l'atmosphère d'un film et ajoute à la narration de son histoire.

Plus récemment, la typographie des affiches de films de Quentin Tarantino reflète parfaitement l'atmosphère et le caractère de ses films. Dans Pulp Fiction, la police de caractères Aachen Bold du titre est aussi dure que le film lui-même. Pour Once Upon a Time in Hollywood, bien que la composition du signe iconique s'écarte autant de la réalité que d'autres parties du film, l'affiche évoque l'esprit d'Hollywood.

Saul Bass est peut-être le graphiste le plus connu de son époque et pour Hollywood des années 50 et 60, il a créé des affiches de films aussi reconnaissables que le signe lui-même. Pour sa conception d'affiche pour Vertige d'Hitchcock en 1958, Bass a utilisé une typographie découpée à la main qui évoque les films expressionnistes allemands des années 1920. En 1960, la typographie du titre barré de Bass pour Pyscho - encore une fois pour Alfred Hitchcock - est à la fois intelligente et évidente. Alors que Saul Bass est souvent crédité à tort d'avoir conçu l'une de mes affiches de film préférées de West Side Story, - Bass a conçu la séquence titre - l'affiche a en fait été conçue par Joseph Caroff qui a également créé le célèbre logo 007 de James Bond.

Bien que nous n'ayons pas encore le même contrôle sur la typographie sur le Web que sur l'imprimé, les nouveaux formats de fichiers, les services de livraison de polices et les polices Web ont signifié beaucoup plus de flexibilité typographique qu'il y a dix ans. Les contrôles de typographie dans CSS nous ont également aidés à être plus créatifs avec le type. En plus des propriétés de style de police de base, nous pouvons désormais affiner de manière fiable les chiffres OpenType, la césure, les ligatures et même le crénage.

Il est rare de trouver des utilisations aussi créatives de la typographie en ligne. L'étude du travail de graphistes et de typographes talentueux peut nous ouvrir les yeux sur ce que nous pouvons réaliser en utilisant les technologies typographiques d'aujourd'hui. L'un de mes designers et typographes préférés est Herb Lubalin, et en apprendre davantage sur lui et son travail a transformé ma propre approche de la typographie.

Inspiré par Herb Lubalin

Herb Lubalin était un graphiste américain qui a passé sa carrière à tout concevoir, de la publicité aux affiches en passant par les timbres-poste. Il était fasciné par l'apparence des mots et par la façon dont la conception typographique peut les faire sonner. Lubalin a compris comment en combinant l'art, la copie et la typographie, les graphistes ajoutent de la conviction lors de la communication de messages. Il a dit:

"Plus les gens communiquent bien, plus le besoin d'une meilleure typographie expressive sera grand."

— Herbe Lubalin

Après avoir réussi de justesse l'examen d'entrée à l'école d'art Cooper Union de New York, Herbert (Herb) Lubalin a été licencié de son premier emploi de graphiste pour avoir demandé une augmentation de 2 dollars par semaine. Dans les agences de publicité américaines d'avant-guerre, le travail d'un maquettiste consistait simplement à placer des titres, des copies et des images dans l'espace disponible, mais cela a changé après la Seconde Guerre mondiale avec un afflux de designers immigrés d'Europe. Parmi eux figuraient l'Autrichien Herbert Bayer, le Russe Mehemed Fehmy Agha et le Biélorusse Alexey Brodovitch.

Ces designers ont importé de nouveaux procédés qui ont réuni des directeurs artistiques, des maquettistes et des écrivains pour former les équipes créatives rendues populaires par le célèbre directeur de la création publicitaire Bill Bernbach dans les années 1960 et 1970.

En 1945, Lubalin devient directeur artistique chez Sudler & Hennessey - un studio de création spécialisé dans l'industrie pharmaceutique - où il dirige une équipe de designers, illustrateurs et photographes. Le processus que Lubalin a mis en place d'abord chez Sudler & Hennessey et à partir de 1964 dans son propre studio est fascinant. Il a dirigé le processus de conception en créant des «tissus» - des croquis à la plume et à l'encre qui établissaient la disposition spatiale de ses éléments - et des notes détaillées sur les conceptions typographiques, y compris les choix de polices, les tailles et les poids.

Au début de tout nouveau projet, Lubalin commençait par dessiner des arrangements de titres, de textes et d'images sur du papier de soie. Ensuite, il posait un autre tissu dessus pour affiner ses idées, puis un autre, et un autre, pour développer rapidement son dessin. Après que ses assistants aient récupéré des mouchoirs jetés sur le sol ou à la poubelle, ils sont devenus des objets de collection.

Lubalin était un perfectionniste obsessionnel de la typographie. Pour "Let's talk type" - une publicité commerciale pour Sudler & Hennessey - Lubalin a précisément placé le seul paragraphe. Cette copie repose parfaitement sur la ligne de base à côté du mot "let" et sa taille et son interligne permettent le descendant de la lettre "y" ci-dessus.

Lubalin était tout aussi précis sur le placement du texte dans une affiche qui annonçait le concours d'affiches anti-guerre d'Avant-garde. Il prenait fréquemment une lame de scalpel pour taper, ajustant l'espacement entre les lettres et modifiant la hauteur des ascendeurs et des descendants pour s'adapter à ses conceptions. Les lettres du titre de "No More War" sont précisément dimensionnées et alignées. Le repérage du standfirst bleu majuscule crée un bloc de copie qui s'intègre parfaitement dans son espace.

Dans « Le 4 juillet signifie pique-niques… », Lubalin a utilisé la perspective pour représenter la route à suivre. Cela impliquait de prendre en compte le suivi de chaque ligne de texte, en modifiant parfois les mots pour les adapter au design. Travailler avec les créations de Lubalin n'a pas été facile, et comme l'a décrit plus tard l'un de ses assistants :

« Pour que tout s'aligne, il faut le refaire encore et encore, puis, si le client modifie le texte, il faut tout refaire. Pour lui (Lubalin,) ça valait le coup. Combien de temps cela a pris ou combien cela a coûté n'était pas aussi important pour lui que pour d'autres designers.

En raison de sa conviction implacable ainsi que de son talent, Lubalin est devenu l'un des graphistes et typographes les plus célèbres du XXe siècle. Nous pouvons apprendre beaucoup de la façon dont il a abordé son travail et de sa conviction que le design peut communiquer de manière convaincante.

Il y a deux livres sur Herb Lubalin et son travail que vous devriez ajouter à votre collection. "Herb Lubalin: Art Director, Graphic Designer and Typographer" (1985) de Gertrude Snyder et Alan Peckolick est épuisé, mais de bons exemplaires sont disponibles sur eBay. Mieux encore, "Herb Lubalin: American Graphic Designer" (2013) d'Adrian Shaughnessy et publié par Unit Editions. Une édition limitée de 2000, le livre de Shaughnessy présente des centaines d'exemples du travail de Lubalin.

Titres de pré-formatage

Les titres sont un endroit parfait pour commencer à être plus aventureux avec le type. Une typographie expressive n'a pas besoin de polices sophistiquées. Vous pouvez créer un titre accrocheur en utilisant différents styles et poids trouvés dans de nombreuses familles de polices de tous les jours. Recherchez des familles élargies comme Montserrat - conçu par Julieta Ulanovsky et disponible sur Google Fonts - avec sa variété de poids allant de mince et léger à extra-gras et même noir.

Pour ce premier design inspiré de Herb Lubalin, mon titre utilise des poids noirs et légers de cette police sans empattement. Le suivi négatif (interlettrage) et l'interlignage serré (hauteur de ligne) se combinent pour créer un bloc de caractères qui demande de l'attention.

Dans le passé, développer des titres comme celui-ci impliquait de coder en dur la conception dans votre code HTML en ajoutant des sauts entre les mots individuels, comme ceci :

 <h1><strong>UK's <br> best-<br> selling <br> car</strong> <br> during <br> the <br> 1970s</h1>

D'autres fois, vous pouvez utiliser wrap chaque mot avec un élément span en ligne, puis modifier sa propriété display en block :

 <h1><strong><span>UK's</span> <span>best-</span> <span>selling</span> <span>car</span></strong> <span>during</span> <span>the</span> <span>1970s</span></h1>

Au lieu de ces éléments de présentation, j'ajoute des sauts de ligne explicites dans mon HTML :

 <h1><strong>UK's best- selling car</strong> during the 1970s</h1>

Les navigateurs ignorent rien de plus qu'un simple espace entre les mots, donc sur les petites fenêtres, ce titre se lit comme une phrase. J'ai seulement besoin de styles de base qui stylisent ses couleurs, sa taille et son poids, ainsi que le suivi négatif et l'interlignage serré qui rendent ce titre distinctif :

 h1 { font-size: 6vmax; font-weight: 300; line-height: .75; letter-spacing: -.05em; text-transform: uppercase; color: #fff; } h1 strong { font-weight: 600; color: #bd1f3a; }

Alors que l'élément pre de HTML respecte le texte pré-formaté et le présente exactement tel qu'il est écrit dans un document, la propriété CSS white-space permet des résultats similaires sans sacrifier la sémantique. Parmi les six valeurs d'espace blanc disponibles, ce sont les quatre que j'utilise le plus souvent :

1. white-space: normal;
   Le texte remplit les boîtes de ligne et les sauts selon les besoins
2. white-space: nowrap;
   Le texte ne sera pas renvoyé à la ligne et il peut déborder de son conteneur
3. white-space: pre;
   Les sauts de ligne explicites sont respectés, les sauts de texte avec de nouvelles lignes et des éléments br
4. white-space: pre-wrap;
   Les espaces blancs sont respectés, mais le texte sera également renvoyé à la ligne pour remplir les boîtes de ligne

J'ai seulement besoin des effets de la propriété white-space sur des fenêtres plus grandes, donc je l'isole avec une requête multimédia :

 @media (min-width: 64em) { h1 { white-space: pre; } }

L'utilisation de plusieurs styles d'une famille de polices ajoute un intérêt visuel. Ma conception inspirée de Lubalin incorpore des poids légers, gras et noirs, ainsi que des styles condensés et réguliers de cette police sans empattement pour produire une variété de traitements de texte.

Tout d'abord, j'ai besoin de deux éléments structurels pour réaliser ma conception, principal et secondaire :

 <main>…</main> <aside>…</aside>

Alors que l'élément principal comprend mon titre et mon texte courant, l'aparté contient quatre images dans une division et cinq articles sur les versions de la Cortina classique :

 <aside> <div> <img src="img-1.svg" alt="Ford Cortina Mark 1 front profile"> <img src="img-2.svg" alt="Ford Cortina Mark 3 rear"> <img src="img-3.svg" alt="Ford Cortina Mark 4 front"> <img src="img-4.svg" alt="Ford Cortina Mark 5 rear profile"> </div> <article>…</article> <article>…</article> <article>…</article> <article>…</article> <article>…</article> </aside>

Dans un premier temps, je spécifie les styles de paragraphes dans chacun de mes articles à l'aide de sélecteurs de pseudo-classes. Chaque paragraphe utilise une combinaison différente de styles et de poids de police, avec des lettres majuscules et majuscules :

 article:nth-of-type(1) p { font-family: 'light'; text-transform: uppercase; } article:nth-of-type(2) p { font-family: 'bold-condensed'; font-weight: 600; text-transform: uppercase; } article:nth-of-type(3) p { font-family: 'bold-condensed'; font-weight: 600; } article:nth-of-type(4) p { font-family: 'light'; text-transform: uppercase; } article:nth-of-type(5) p { font-family: 'bold-condensed'; font-weight: 600; }

Avec ces styles de base en place pour chaque taille d'écran, j'introduis la disposition de l'élément de côté qui sera visible sur les écrans de taille moyenne. Pour les mises en page comme celle-ci, où les éléments ne se chevauchent pas, j'ai souvent des zones de modèle de grille pour leur simplicité. Cette conception a neuf zones de grille. Bien que je puisse donner à ces zones des noms qui décrivent le contenu que je vais y placer - par exemple, "mark-1" - à la place, j'utilise des lettres qui facilitent un peu le déplacement des éléments autour de ma grille :

 @media (min-width: 48em) { aside { display: grid; grid-template-areas: "abc" "def" "ghi"; grid-gap: 1.5rem; } }

Je dois placer les quatre images dans mes zones de modèle, et non la division qui les contient. Je change la propriété d'affichage de cet élément en contenu, ce qui le supprime efficacement du DOM à des fins de style :

 aside div { display: contents; }

Je place ces images en utilisant des noms de zone. Les déplacer dans une autre zone implique uniquement de référencer un nom de zone différent et de ne pas modifier leur ordre dans mon HTML :

 aside img:nth-of-type(1) { grid-area: a; } aside img:nth-of-type(2) { grid-area: e; } aside img:nth-of-type(3) { grid-area: g; } aside img:nth-of-type(4) { grid-area: i; }

Ensuite, je place des articles dans les cinq zones restantes pour compléter ma mise en page :

 aside article:nth-of-type(1) { grid-area: b; } aside article:nth-of-type(2) { grid-area: c; } aside article:nth-of-type(3) { grid-area: d; } aside article:nth-of-type(4) { grid-area: f; } aside article:nth-of-type(5) { grid-area: h; }

Sur les écrans de petite et moyenne taille, les éléments principaux et secondaires s'empilent verticalement dans l'ordre dans lequel ils apparaissent dans mon code HTML. L'espace supplémentaire disponible dans les fenêtres plus grandes me permet de les placer côte à côte afin que le poids visuel soit équilibré sur les deux côtés d'un écran. Tout d'abord, j'applique une grille symétrique à cinq colonnes à l'élément body :

 @media (min-width: 64em) { body { display: grid; grid-template-columns: repeat(5, 1fr); } }

Ensuite, je place les éléments principaux et secondaires en utilisant les numéros de ligne. Cela crée un design asymétrique avec une colonne d'espace blanc entre mon contenu principal et les articles qui le supportent :

 main { grid-column: 1; } aside { grid-column: 3 / -1; } }

Réorganisation et rotation

CSS Grid est désormais le meilleur outil à utiliser pour mettre en œuvre des mises en page inspirées, et ses puissantes propriétés sont également utiles pour développer des conceptions typographiques complexes.

Mon en-tête contient un titre suivi de deux paragraphes et leur ordre en HTML signifie qu'ils ont un sens lorsqu'ils sont lus sans qu'aucun style ne soit appliqué :

 <header> <h1>Cortina</h1> <p>UK's best-selling car</p> <p>From <span>1962–1983</span></p> </header>

Pour commencer cette conception, j'ajoute des styles de base pour les deux éléments, en définissant leur alignement, leurs couleurs et leurs tailles :

 header h1, header p { margin: 0; text-align: center; } header h1 { font-size: 10vmax; color: #ebc76a; line-height: 1; } header p { font-size: 4vmax; line-height: 1.1; text-transform: uppercase; }

J'ai commandé mon HTML pour une structure de phrase sémantique, plutôt que pour une présentation visuelle, donc pour me permettre de réorganiser visuellement les éléments, j'ajoute des propriétés Flexbox à mon en-tête et une valeur flex-direction de colonne :

 header { display: flex; flex-direction: column; }

Par défaut, les éléments apparaissent dans l'ordre dans lequel ils apparaissent en HTML, mais dans ma conception, le dernier paragraphe de cet en-tête apparaît en premier, au-dessus du titre.

La valeur d'ordre par défaut pour tous les éléments est 0, donc pour changer la position de ce paragraphe sans altérer mon HTML, j'ajoute une valeur négative de -1, qui le place en haut :

 header p:last-of-type { order: -1; }

Ma conception pour les écrans de taille moyenne comprend deux larges bandes de couleurs de fond, développées à l'aide d'un dégradé CSS. Ensuite, je change les couleurs de premier plan de mon titre et de mes paragraphes pour les contraster avec ce nouveau fond :

 @media (min-width: 48em) { body { background-image: linear-gradient(to right, #0a0a08 0%, #0a0a08 50%, #fff 50%, #fff 100%); } header h1 { color: #fff; } header p { color: #ebc76a; } }

L'alignement inhabituel des trois éléments dans cet en-tête est possible en combinant CSS Grid avec Flexbox. Bien que cela ne soit pas évident au début, je place le titre et les paragraphes de cet en-tête sur une grille symétrique à quatre colonnes. Laisser une colonne vide dans les première et dernière lignes crée une diagonale dynamique qui ajoute de l'intérêt à cet en-tête :

 @media (min-width: 64em) { header { display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; padding-top: 0; } }

Mon titre s'étend sur les quatre colonnes :

 header h1 { grid-column: 1 / -1; }

Alors que le premier — qui apparaît au bas de mon en-tête — laisse la première colonne vide :

 header p:first-of-type { grid-column: 2 / -1; }

Le dernier paragraphe, désormais placé en haut de l'en-tête, s'étend sur les trois premières colonnes, laissant un espace à gauche :

 header p:last-of-type { grid-column: 1 / 4; }

Il est inhabituel de voir des éléments de texte pivotés sur le Web, mais lorsque vous le faites, ils sont souvent mémorables et toujours une bonne surprise. Je veux que mon titre tourne dans le sens inverse des aiguilles d'une montre, j'ajoute donc une transformation qui le fait pivoter négativement de 30 degrés et le déplace verticalement de 150 pixels :

 header { transform: rotate(-30deg) translateY(150px); transform-origin: 0 100%; }

transform-origin spécifie le point autour duquel les transformations se produisent. Vous pouvez choisir une origine au centre ou à l'un des quatre coins d'un élément — top-left (0 0) , en top-right (100% 0) , en bottom-right (100% 100%) ou bottom-left (0 100%) . Vous pouvez également spécifier une origine en pixels, em ou rem.

Pour un élément de surprise supplémentaire, j'ajoute une transition subtile à cette transformation et réduis la quantité de rotation lorsque quelqu'un passe son curseur sur mon titre :

 header { transition: transform .5s ease-in; } header:hover { transform: rotate(-25deg) translateY(150px); }

Combinaison d'éléments d'en-tête

Dans mon prochain design inspiré de Lubalin, je combine une liste ordonnée de modèles Cortina avec un titre multicolore pour faire une déclaration puissante avec cet en-tête :

 <header> <div> <h1>…</h1> <ol>…</ol> </div> </header>

Ce titre comprend trois lignes de texte. Alors que j'évitais auparavant d'utiliser des éléments supplémentaires, pour styliser ces lignes différemment, j'ai besoin de trois éléments span en ligne :

 <h1> <span>Best</span> <span>Selling</span> <span>Cortina</span> </h1>

Le choix le plus sémantique pour baliser ma liste de modèles Cortina et les années durant lesquelles ils ont été fabriqués, est une liste ordonnée. Pour souligner fortement chaque nom de modèle, je les enferme dans des éléments forts, qui offrent une valeur sémantique ainsi qu'une apparence audacieuse à partir des styles de navigateur par défaut :

 <ol> <li><strong>Mark I</strong> 1962–1966</li> <li><strong>Mark II</strong> 1966–1970</li> <li><strong>Mark III</strong> 1970–1976</li> <li><strong>Mark IV</strong> 1976–1979</li> <li><strong>Mark V</strong> 1979–1983</li> </ol>

Pour les petites fenêtres, je n'ai besoin que de quelques styles de base. La grande taille de police et l'interlignage minimal créent un bloc de texte solide. Ensuite, je change la valeur d'affichage de l'élément span de inline à block et j'utilise des sélecteurs de pseudo-classe pour changer les couleurs de premier plan des première et troisième lignes :

 h1 { font-size: 18vmin; line-height: .9; color: #fff; } h1 span { display: block; } h1 span:nth-of-type(1) { color: #ba0e37; } h1 span:nth-of-type(3) { color: #31609e; }

Je souhaite que les éléments de ma liste ordonnée forment une grille symétrique à deux colonnes où chaque colonne occupe une quantité égale d'espace disponible :

 ol { list-style-type: none; display: grid; grid-template-columns: 1fr 1fr; }

Ensuite, je resserre l'en-tête des éléments et j'ajoute une bordure bleue solide au bas de tous sauf le dernier élément de la liste :

 li { display: inline-block; line-height: 1.2; } li:not(:last-of-type) { border-bottom: 1px solid #31609e; }

De manière pratique, il n'est pas nécessaire de spécifier des numéros de colonne ou de ligne pour chaque élément de liste car CSS Grid les organise automatiquement en raison du flux normal. Pour mettre davantage l'accent, je modifie les valeurs d'affichage des éléments forts pour les bloquer et les mettre en majuscule :

 li strong { display: block; font-size: 1.266rem; font-weight: 600; text-transform: uppercase; }

Le centrage d'un élément à la fois horizontalement et verticalement était délicat, mais heureusement, Flexbox a rendu cet alignement facile à mettre en œuvre. Flexbox a deux axes - axe principal et axe transversal - qui changent de direction si vous modifiez la valeur de direction flexible par défaut à partir d'une ligne.

La direction flexible de mon en-tête reste rangée, donc j'aligne le centre des éléments sur l'axe transversal (vertical), puis justifie le centre du contenu le long de l'axe principal (horizontal :)

 @media (min-width: 48em) { header { display: flex; align-items: center; justify-content: center; } }

Avec le contenu maintenant entré dans l'en-tête, j'applique une grille qui contient trois colonnes et deux lignes. Leurs dimensions seront définies par leur contenu et se redimensionneront automatiquement :

 header > div { display: grid; grid-template-columns: repeat(3, min-content); grid-template-rows: auto auto; }

Les trois lignes multicolores du titre sont à la base de cette conception d'en-tête. Je souhaite les placer dans des colonnes et des lignes spécifiques de cette grille, j'ajoute donc display: contents; au titre :

 h1 { display: contents; }

Ensuite, je place ce texte multicolore dans des colonnes et des lignes en utilisant des numéros de ligne :

 h1 span:nth-of-type(1) { grid-column: 1; grid-row: 2; } h1 span:nth-of-type(2) { grid-column: 2; grid-row: 1 / 3; } h1 span:nth-of-type(3) { grid-column: 3; grid-row: 1 / 3; }

Je veux que le texte de mon en-tête apparaisse vertical, donc je fais pivoter chaque plage dans le sens des aiguilles d'une montre de 180 degrés, puis change leur mode d'écriture en vertical gauche-droite :

 h1 span { transform: rotate(180deg); writing-mode: vertical-lr; }

Le titre et la liste ordonnée dans ma conception forment un bloc solide. Pour regrouper étroitement ces éléments, je modifie la propriété d'affichage de la liste de grille à bloc. Ensuite, j'aligne le contenu de chaque élément de liste vers la droite, de sorte qu'ils reposent sur la ligne de base de mon titre :

 ol { display: block; } li { text-align: right; }

SVG et texte

Il m'a fallu beaucoup de temps pour apprécier SVG et me familiariser avec la façon d'en tirer le meilleur parti, et j'apprends encore. SVG est capable de produire bien plus que des formes de base, et l'une de ses fonctionnalités les plus intéressantes est l'élément de texte.

Comme le texte HTML, le texte SVG est accessible et sélectionnable. Il est également infiniment stylisé en utilisant des chemins de détourage, des remplissages comprenant des dégradés, des filtres, des masques et des traits. Ajouter du texte à SVG revient à l'inclure dans HTML, en utilisant l'élément text. Seul le contenu à l'intérieur de ces éléments de texte est rendu par les navigateurs, et ils ignorent tout ce qui se trouve en dehors d'eux. Vous pouvez ajouter autant d'éléments de texte que nécessaire, mais mon prochain titre n'en nécessite qu'un :

 <svg> <text>'70's best-selling Cortina British car</text> </svg>

SVG comprend un ensemble de propriétés et de valeurs d'attributs qui peuvent être appliquées au texte. De nombreuses propriétés SVG - comme l'espacement des lettres et des mots et la décoration de texte - sont également en CSS. Mais ce sont les fonctionnalités de style uniques à SVG qui contribuent à rendre le texte SVG si attrayant.

Par exemple, textLength définit la largeur du texte rendu, qui se rétrécit et s'étire pour remplir l'espace en fonction de la valeur lengthAdjust que vous choisissez.

• textLength
  Le texte sera mis à l'échelle pour s'adapter. Définissez textLength en pourcentages ou utilisez des valeurs numériques. Je préfère utiliser des unités textuelles, em ou rem.
• lengthAdjust
  Définit comment le texte sera compressé ou étiré pour s'adapter à la largeur définie dans l'attribut textLength.

Lorsqu'elles sont utilisées directement sur un élément de texte, les propriétés SVG agissent de la même manière que les styles en ligne :

 <svg> <text textLength="400">'70's best-selling Cortina British car</text> </svg>

Mais tout comme avec les styles en ligne, la meilleure valeur est obtenue en stylisant les éléments SVG à l'aide de CSS, que ce soit dans une feuille de style externe ou intégrée dans HTML. Vous pouvez même utiliser un élément de style dans un fichier SVG externe ou un bloc de SVG inclus avec HTML :

 <svg> <text class="display">'70's best-selling Cortina British car</text> </svg> <style> .display { font-size: 100px; font-family: 'black-extended'; font-weight: 600; letter-spacing: -1px; text-anchor: middle; text-transform: uppercase; } </style>

HTML a son élément span et SVG inclut un élément similaire qui est utile pour séparer le texte en éléments plus petits afin qu'ils puissent être stylisés de manière unique. Pour ce titre, je divise le contenu de l'élément text entre six éléments tspan :

 <text> <tspan>'70's</tspan> <tspan>best-</tspan> <tspan>selling</tspan> <tspan>Cortina</tspan> <tspan>British</tspan> <tspan>car</tspan> </text>

En divisant mon titre en plusieurs éléments, je peux styliser chaque mot individuellement. Je peux même les positionner précisément dans mon SVG, selon la ligne de base ou même les uns par rapport aux autres.

• x est le point de départ horizontal de la ligne de base du texte ;
• y est le point de départ vertical de la ligne de base du texte ;
• dx décale horizontalement le texte d'un élément précédent ;
• dy décale verticalement le texte d'un élément précédent.

Pour mon titre, je positionne le premier élément tspan à 80 px du haut, puis chaque élément suivant apparaît à 80 px en dessous :

 <text> <tspan y="80">'70's</tspan> <tspan dy="80">best-</tspan> <tspan dy="80">selling</tspan> <tspan dy="80">Cortina</tspan> <tspan dy="80">British</tspan> <tspan dy="80">car</tspan> </text>

Les éléments tspan sont utiles pour un positionnement précis et un style individuel, mais ils ne sont pas sans problèmes d'accessibilité. La technologie d'assistance prononce les éléments tspan comme des mots individuels et les épelle même lorsqu'un tspan enveloppe une seule lettre. Par exemple, un lecteur d'écran prononcera cette série d'éléments tspan :

 <tspan>C</tspan> <tspan>o</tspan> <tspan>r</tspan> <tspan>t</tspan> <tspan>i</tspan> <tspan>n</tspan> <tspan>a</tspan>

Comme:

"C", "o", "r", "t", "i", "n", "a"

Nous ne devons pas gêner les personnes qui utilisent des technologies d'assistance ou, pire encore, rendre notre contenu inaccessible en raison de nos choix de style. Évitez donc d'utiliser tspan inutilement et jamais pour des lettres simples.

Frapper du texte avec CSS et SVG

L'ajout d'un trait améliore souvent la lisibilité lorsque le texte est placé devant une image d'arrière-plan, et cela peut également donner des résultats subtils et saisissants. Vous ne trouverez pas de moyen officiel de barrer du texte dans aucune spécification CSS. Mais il existe une propriété expérimentale qui utilise un préfixe de fournisseur Webkit et qui est largement prise en charge par les navigateurs contemporains.

text-stroke est un raccourci pour deux propriétés : text-stroke-color et text-stroke-width . Pour mon titre tracé, j'ai d'abord défini des styles de typographie de base pour la family , la size et weight , puis j'ai ajusté l'interlignage et le suivi :

 h1 { font-size: 100px; font-family: 'black-extended'; font-weight: 600; letter-spacing: -6px; line-height: .8; color: #fff; }

Ensuite, j'applique text-stroke et j'ajoute la text-fill-color property avec une valeur de transparent qui remplace la couleur de premier plan blanche :

 h1 { /* -webkit-text-stroke-color: #fff; */ /* -webkit-text-stroke-width: 5px; */ -webkit-text-stroke: 5px #fff; -webkit-text-fill-color: transparent; }

Bien que text-stroke soit une propriété expérimentale et non dans une spécification W3C, maintenant que les navigateurs l'ont implémentée, il y a peu de chances qu'elle soit supprimée. Mais si vous êtes toujours préoccupé par la prise en charge d'un navigateur hérité, envisagez d'utiliser une requête de fonctionnalité pour tester la prise en charge text-stroke et leur fournir une solution de secours appropriée.

SVG possède également des propriétés de stroke , ainsi que quelques options qui ne sont pas disponibles dans CSS. Si vous avez besoin de plus d'options et de la prise en charge la plus large des navigateurs, SVG est la réponse. Mon en-tête SVG comprend six éléments tspan :

 <svg> <text> <tspan>'70's</tspan> <tspan>best-</tspan> <tspan>selling</tspan> <tspan>Cortina</tspan> <tspan>British</tspan> <tspan>car</tspan> </text> </svg>

En plus des styles de typographie de base, j'ajoute les propriétés SVG équivalentes pour text-stroke-color et text-stroke-width . Je réduis également l'opacité de mon trait, qui est une option indisponible en CSS :

 text { stroke: #fff; stroke-width: 1.5px; stroke-opacity=".8"; }

SVG inclut d'autres propriétés qui ajustent les aspects d'un trait. Contrairement au CSS, les traits SVG peuvent être en pointillés à l'aide de la propriété stroke-dasharray. Les valeurs alternatives définissent les zones remplies et les zones vides, de sorte que les tirets autour de mon texte de titre sont remplis d'une unité, puis vides de dix unités :

 text { stroke-dasharray: 1, 10; }

Si vous avez besoin de motifs plus complexes, ajoutez des nombres supplémentaires au motif, de sorte qu'une valeur de trait-dasharray de 1, 10, 1 donne un trait en pointillés qui est 1 (rempli,) 10 (vide,) 1 (rempli,) 1 ( vide,) 10 (rempli,) 1 (vide,) et se répète.

Optimiser l'accessibilité SVG

Les contrôles de typographie CSS sont désormais plus puissants que jamais, mais il arrive parfois qu'une conception nécessite plus que du texte HTML stylisé. Les techniques de remplacement d'image sont tombées en désuétude, mais SVG - que ce soit dans un fichier externe ou en ligne dans HTML - peut fournir des effets de texte évolutifs. SVG peut également être utile pour les performances globales lorsqu'il est bien optimisé et peut être rendu accessible.

Cet en-tête contient deux polices de caractères. L'un est Magehand, une écriture décorative de style rétro du créateur de caractères indonésien Arief Setyo Wahyudi. L'autre est Mokoko, un empattement en dalle de Dalton Maag, basé à Londres, qui est disponible en sept graisses allant du fin au noir.

L'intégration de ces deux polices dans les formats Web Open Font Format (WOFF) et WOFF2 ajouterait plus de 150 Ko à ma page. Alors qu'en convertissant ces polices en contours dans un éditeur graphique et en fournissant l'en-tête sous forme d'image SVG optimisée, cela n'ajouterait que 17 Ko.

L'image SVG dans mon en-tête contient trois chemins :

 <svg xmlns="https://www.w3.org/2000/svg"> <path>…</path> <path>…</path> <path>…</path> </svg>

L'ordre de ces chemins est important, car tout comme en HTML, les éléments sont empilés dans l'ordre dans lequel ils sont écrits. SVG comprend un ensemble de propriétés et de valeurs d'attributs qui peuvent être appliquées à n'importe quel élément. J'utilise la propriété fill pour colorer chaque chemin dans mon en-tête :

 <path fill="#bd1f3a">…</path> <path fill="#31609e">…</path> <path fill="#fff">…</path>

Pour un effet encore plus élégant, je peux définir un dégradé linéaire avec deux arrêts de couleur, et le référencer pour remplir mon script décoratif :

 <defs> <linearGradient gradientTransform="rotate(90)"> <stop offset="0%" stop-color="#bd1f3a" /> <stop offset="100%" stop-color="#31609e" /> </linearGradient> </defs> <path fill="#fff">…</path> <path fill="#fff">…</path> <path fill="url('#cortina')">…</path>

Les fichiers SVG sont souvent plus petits que les images bitmap ou la taille combinée de plusieurs fichiers de polices, mais ils nécessitent néanmoins une optimisation minutieuse pour obtenir les meilleures performances.

Chaque élément, poignée et nœud augmente la taille d'un fichier SVG, remplacez donc les chemins par des formes de base comme des cercles, des ellipses ou des rectangles lorsque cela est possible. Simplifiez les courbes pour réduire le nombre de nœuds et utiliser moins de poignées. Les logiciels graphiques populaires comme Adobe Illustrator, Affinity Designer et Sketch exportent des fichiers gonflés par des éléments non optimisés et des métadonnées inutiles. Mais, des outils comme SVGOMG du développeur Jake Archibald supprimeront les éléments inutiles et peuvent souvent réduire considérablement la taille du fichier SVG.

Les images SVG qui contiennent des contours de texte peuvent également être rendues accessibles en utilisant un texte alternatif et des propriétés ARIA. Lorsque vous créez un lien vers un fichier SVG externe, ajoutez un texte alternatif comme vous le devriez avec n'importe quelle image non décorative :

 <img src="header.svg" alt="Cortina. '70s best-selling British car">

La meilleure façon d'aider les personnes qui utilisent la technologie d'assistance est d'intégrer SVG dans HTML. Ajoutez un rôle ARIA et une étiquette descriptive et les lecteurs d'écran traiteront le SVG comme un seul élément et liront à haute voix la description de l'étiquette :

 <svg role="img" aria-label="Cortina. '70s best-selling British car"> … </svg>

L'ajout d'un élément de titre aide la technologie d'assistance à comprendre la différence entre plusieurs blocs de SVG, mais ce titre ne s'affichera pas dans un navigateur :

 <svg> <title>Cortina. '70s best-selling british car</title> </svg>

Lorsqu'il y a plusieurs blocs de SVG dans un document, attribuez à chacun un identifiant unique et ajoutez-le à son titre :

 <svg> <title>…</title> </svg>

ARIA a plusieurs attributs qui facilitent l'accessibilité SVG. Lorsque SVG est purement décoratif et n'a aucune valeur sémantique, cachez-le de la technologie d'assistance en ajoutant un attribut aria-hidden :

 <svg aria-hidden="true"> … </svg>

Pour ma conception, j'utilise SVG à la place d'un titre HTML. Pour remplacer la sémantique manquante pour la technologie d'assistance, utilisez un attribut de rôle ARIA et une valeur d'en-tête. Ajoutez ensuite un attribut de niveau qui correspond au code HTML manquant :

 <svg role="heading" aria-level="1"> … </svg>

Type d'écrêtage

La propriété CSS background-clip définit si l'arrière-plan d'un élément s'étend sous son border-box , padding-box ou content-box , selon le modèle de boîte CSS :

• border-box
  L'arrière-plan s'étend jusqu'au bord extérieur de la bordure (et sous la bordure).
• padding-box
  L'arrière-plan s'étend jusqu'au bord extérieur du rembourrage uniquement.
• content-box
  L'arrière-plan est rendu dans (coupé à) la zone de contenu uniquement.

Mais, il y a une autre valeur qui offre beaucoup plus d'opportunités pour une typographie inspirante. L'utilisation de text comme valeur pour background-clip coupe l'arrière-plan d'un élément à l'espace occupé par le texte qu'il contient.

In my next example, the brake disk background image is visible only where there's text in the headline. When my headline includes more content or its text size increases, more of that background image will be visible:

 h1 { background-image: url(pattern.svg); background-clip: text; -webkit-background-clip: text; color: transparent; }

You can apply the text value for background-clip to any element except the :root , HTML. As support for background-clip is limited, I use a feature query which delivers those styles only to supporting browsers:

 h1 { color: #fff; } @supports (background-clip: text) or (-webkit-background-clip: text) { h1 { background-color: #fff; background-image: url(pattern.svg); background-position: 50% 100%; background-repeat: no-repeat; background-size: 50%; background-clip: text; -webkit-background-clip: text; color: transparent; } }

Inspired by Lubalin, I want to place images inside the letters of my next headline, and the SVG image element allows me to do just that.

Comme cette image SVG représente un en-tête, j'ajoute un texte alternatif plus un rôle et un niveau ARIA pour m'assurer qu'elle reste accessible :

 <img src="header.svg" alt="Cortina" role="heading" aria-level="1">

En SVG, l'élément defs stocke des objets graphiques qui peuvent être référencés ailleurs dans un fichier. Ceux-ci incluent les motifs qui contiennent mes images et j'en ajoute un pour chaque lettre :

 <svg> <defs> <pattern>…</pattern> <pattern>…</pattern> <pattern>…</pattern> … </defs> … </svg>

Le contenu de l'élément defs n'est pas rendu directement et pour l'afficher, je le référence avec un attribut use ou une URL. Mon SVG contient un chemin pour chacune des sept lettres du mot « Cortina », et je remplis chaque chemin avec un motif en utilisant son ID unique :

 <svg> <defs>…</defs> <path fill="url(#letter-c)">…</path> <path fill="url(#letter-o)">…</path> <path fill="url(#letter-r)">…</path> … </svg>

Les éléments d'image permettent de restituer des images bitmap ou vectorielles dans un SVG. Ma conception intègre trois images de plan de pièce de voiture que je relie à l'aide d'un attribut href standard :

 <defs> <pattern width="100%" height="100%"> <image href="pattern-c.png" height="250" width="250"/> </pattern> … </defs>

Ces trois images de motifs de pièces de voiture remplissent chaque lettre, et le résultat est un design de titre saisissant qui exige de l'attention.

Combinaison de techniques

Il ne fait aucun doute que Herb Lubin avait une capacité magistrale à faire parler le type. Pour ce dernier exemple inspiré de Lubin, j'ai rassemblé les techniques que j'ai démontrées pour créer un design convaincant pour cette Ford classique des années 70.

Pour développer cette conception, j'ai besoin de deux éléments structurels qui devraient être très familiers maintenant, un principal et un accessoire :

 <main>…</main> <aside>…</aside>

Mon élément principal contient un élément d'en-tête avec un titre SVG suivi d'une division qui inclut mon texte courant. J'ajoute un rôle et un niveau ARIA à mon titre pour m'assurer que son texte SVG est accessible :

 <main> <header> <svg role="heading" aria-level="1">…</svg> </header> <div>…</div> </main>

Pour diffuser une image complète sur de petits écrans et la moitié sur des fenêtres plus grandes, j'utilise un élément d'image et une requête multimédia de largeur minimale :

 <aside> <picture> <source media="(min-width: 74em)"> <img src="full.svg" alt="Ford Cortina"> </picture> </aside>

Les conceptions de Lubalin sont souvent énergiques, donc pour remplir mon élément principal d'énergie, j'applique les propriétés de la grille et j'utilise trois colonnes et cinq rangées pour développer une disposition asymétrique.

 main { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(5, 1fr); }

Cette conception est dominée par un contour de la charismatique Cortina et une image d'arrière-plan textuelle qui couvre l'élément principal. Je redimensionne ce SVG pour remplir l'arrière-plan de l'élément et modifie l'origine de l'arrière-plan afin qu'il n'apparaisse que derrière le contenu et non sa bordure ou son rembourrage :

 main { background-image: url(main.svg); background-origin: content-box; background-position: top right; background-repeat: no-repeat; background-size: 100% 100%; }

Laisser les colonnes vides autour de mon en-tête et de ma division de texte crée un espace négatif qui aide à attirer l'attention de quelqu'un sur la composition. L'en-tête occupe les deux premières de mes trois colonnes tandis que la division remplit les deux dernières :

 header { grid-column: 1 / 3; grid-row: 2 / 3; } main div { grid-column: 2 / 4; grid-row: 3 / 6; }

L'un des avantages de l'utilisation de l'élément de texte SVG est la possibilité de positionner le texte en fonction de sa ligne de base ou par rapport à chaque élément. Mon titre SVG comprend deux éléments de texte pour le nom de cette voiture et un troisième pour la période de fabrication. Je souhaite placer cet élément de texte final précisément à 250 px de la gauche et à 60 px du haut de mon SVG :

 <svg> <text x="0" y="60">Ford</text> <text x="0" dy="70">Cortina</text> <text x="250" y="60">1962–1983</text> </svg>

Cette conception éblouissante devient plus mémorable sur des fenêtres plus grandes lorsque l'image d'arrière-plan SVG basée sur du texte et mon contour Cortina s'emboîtent l'un à côté de l'autre. J'applique une grille symétrique à deux colonnes à l'élément body :

 @media (min-width: 74em) { body { display: grid; grid-template-columns: [main] 1fr [aside] 1fr; } }

Ensuite, je place les éléments principaux et secondaires sur ma grille en utilisant les noms de ligne :

 main { grid-column: main; } aside { grid-column: aside; } }

Sur le Web, une typographie inspirante doit être attrayante et lisible, mais la lisibilité d'un texte courant peut facilement être affectée par l'arrière-plan.

Le filtre de fond applique des effets de filtre CSS aux éléments derrière le texte. Ces filtres incluent le flou, la luminosité et le contraste, ainsi que des effets de couleur qui peuvent tous contribuer à rendre le texte en cours d'exécution plus lisible par rapport aux images d'arrière-plan, aux graphiques ou aux motifs.

Appliquez un ou plusieurs filtres en utilisant la même syntaxe de filtre CSS que j'ai démontrée dans un numéro précédent :

 main { backdrop-filter: brightness(25%); } main { backdrop-filter: brightness(25%) contrast(50%); }

backdrop-filter fait partie de la spécification de niveau 2 du module d'effets de filtre. Il dispose déjà d'un support solide dans les navigateurs contemporains, bien que certains nécessitent toujours le préfixe du fournisseur Webkit :

 main div { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

En savoir plus sur la série

• Décisions de conception inspirées : Magazine Avaunt
• Décisions de conception inspirées : des questions urgentes
• Décisions de conception inspirées : Ernest Journal
• Décisions de conception inspirées : Alexey Brodovitch
• Décisions de conception inspirées : Bea Feitler
• Décisions de conception inspirées : Neville Brody
• Décisions de conception inspirées : Otto Storch
• Décisions de conception inspirées : Max Huber
• Décisions de conception inspirées : Giovanni Pintori
• Décisions de conception inspirées : Emmett McBain
• Décisions de conception inspirées : Bradbury Thompson

NB : Les membres de SmashingLes membres de Smashing ont accès à un PDF magnifiquement conçu du magazine Inspired Design Decisions d'Andy et à des exemples de code complets tirés de cet article. Vous pouvez acheter le PDF et les exemples de ce numéro ainsi que tous les autres numéros directement sur le site Web d'Andy.