Bien qu'une bonne utilisation du type aide les gens à lire, une excellente typographie peut faire bien plus encore. La typographie peut articuler avec éloquence une idée et communiquer de façon colorée un message 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 dans les 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 hardboiled 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 probablement le graphiste le plus connu de son époque et pour les années 1950 et 1960, il a créé des affiches de cinéma qui sont aussi reconnaissables que le signe lui-même. Pour la conception de son affiche pour Vertigo de 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 de Bass pour Pyscho – encore une fois pour Alfred Hitchcock – est à la fois intelligente et évidente. Bien que Saul Bass soit souvent attribué à tort à la conception d'une de mes affiches de films préférées de West Side Story, – Bass a conçu la séquence de titre – l'affiche a été conçue par Joseph Caroff qui a également créé le célèbre logo 007 de James Bond.

Bien que nous n'ont pas encore le même contrôle sur la typographie sur le Web que dans l'impression, 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 en 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 de telles utilisations créatives pour la saisie en ligne, en étudiant le travail de graphistes et de talentueux typographes. ouvrez nos yeux sur ce que nous pouvons réaliser en utilisant les technologies de type d'aujourd'hui. Herb Lubalin est l'un de mes concepteurs et typographes préférés personnels et en apprendre davantage sur lui et son travail a transformé ma propre approche de la typographie.

En savoir plus sur la série

Inspiré par Herb Lubalin

Herb Lubalin était un Américain graphiste 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 la façon dont la conception typographique peut les faire sonner. Lubalin a compris comment en combinant art, copie et typographie, les graphistes ajoutent de la conviction lorsqu'ils communiquent des messages. Il a dit:

"Plus les gens communiqueront mieux, plus la nécessité d'une meilleure typographie expressive sera grande."

– Herb Lubalin

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

Ces concepteurs ont importé de nouveaux processus 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 de Sudler & Hennessey – un studio de création spécialisé dans l'industrie pharmaceutique – où il dirige une équipe de designers, d'illustrateurs et de photographes. Le processus que Lubalin a établi d'abord à Sudler & Hennessey et à partir de 1964 dans son propre studio est fascinant. Il a conduit le processus de conception en réalisant 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, les tailles et les poids de police. ( Grand aperçu )

Au début de tout nouveau projet, Lubalin a commencé par esquisser des arrangements de titres, de copies et d'images sur du papier de soie. Ensuite, il poserait un autre tissu sur le dessus pour affiner ses idées, puis un autre, et un autre, pour développer rapidement son design. Après que ses assistants ont récupéré les tissus jetés du sol ou des ordures, ils sont devenus des objets de collection.

Lubalin était un perfectionniste obsessionnel de la typographie. Pour "Parlons type" – une publicité commerciale pour Sudler & Hennessey – Lubalin a précisément placé le seul paragraphe. Cette copie se trouve 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 Avant Garde. Il prenait souvent une lame de scalpel pour taper, ajustant l'espacement entre les lettres et modifiant la hauteur des ascendants et des descendants pour s'adapter à ses conceptions. Les lettres dans le titre de «No More War» sont dimensionnées et alignées avec précision. Le suivi du premier majuscule bleu crée un bloc de copie qui s'intègre parfaitement dans son espace.

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

"Pour que tout s'aligne, vous devez le faire encore et encore, puis, si le client modifie le texte, vous devez refaire le tout. Pour lui (Lubalin), cela en valait la peine. Combien de temps cela a pris ou combien cela n'a pas été aussi important pour lui que pour les autres designers. »

En raison de sa conviction implacable ainsi que de son talent, Lubalin est devenu l'un des graphistes les plus célèbres et typographes du XXe siècle. Il y a beaucoup à apprendre 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: directeur artistique, graphiste et typographe» (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.

Pré-formatage des titres

Les titres sont un endroit parfait pour commencer à être plus aventureux avec le type. La typographie expressive n'a pas besoin de polices de fantaisie. 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 (espacement des lettres) et l'interlignage serré (hauteur de ligne) se combinent pour créer un bloc de type qui demande de l'attention.

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

 UK’s 

meilleur- 

vente 

voiture  

 pendant 

le 

1970s 

D'autres fois, vous pouvez utiliser le renvoi à la ligne de chaque mot avec un élément span en ligne, puis modifier sa propriété d'affichage en la bloquant:

  Royaume-Uni 
 best- 
 vendant 
 voiture 
 pendant 
 les 
 années 1970  

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

 UK's
meilleur-
vente
voiture 
pendant
la
Années 1970 

Les navigateurs ignorent autre chose qu'un simple espace entre les mots, donc sur les petites fenêtres, ce titre se lit comme une phrase. Je n'ai besoin que de styles de fondation qui définissent ses couleurs, sa taille et ses poids, ainsi que le suivi négatif et le début serré qui rendent ce titre distinctif:

 h1 {
taille de police: 6vmax;
poids de police: 300;
hauteur de ligne: 0,75;
espacement des lettres: -.05em;
transformation de texte: majuscule;
couleur: #fff; }

h1 fort {
poids de police: 600;
couleur: # bd1f3a; } 

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

1. espace blanc: normal;
   Le texte remplit les encadrés et saute comme requis
2. espace blanc: nowrap; [19659049] Le texte ne se terminera pas et il risque de 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;
   L'espace blanc est respecté, mais le texte sera également habillé pour remplir les encadrés

Je n'ai besoin que des effets de la propriété white-space sur des fenêtres plus grandes, donc j'isoler avec une requête média:

 @media (min-width: 64em) {

h1 {
espace blanc: pré; }
} 

L'utilisation de plusieurs styles d'une même 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 de caractères sans empattement pour produire une variété de traitements de texte.

Tout d'abord, j'ai besoin de deux éléments structurels pour accomplir ma conception, principale et mise à part:

… 
 

Alors que l'élément principal inclut mon titre et le texte en cours d'exécution, le côté contient quatre images dans une division et cinq articles sur les versions de la Cortina classique:

Premièrement, je spécifie les styles de paragraphes dans chacun de mes articles à l'aide de sélecteurs de pseudo-classe. Chaque paragraphe utilise une combinaison différente de styles de police et de poids, avec des lettres majuscules et minuscules:

 article: nth-of-type (1) p {
famille de polices: 'light';
transformation de texte: majuscule; }

article: nième type (2) p {
famille de polices: 'bold-condensed';
poids de police: 600;
transformation de texte: majuscule; }

article: nième type (3) p {
famille de polices: 'bold-condensed';
poids de police: 600; }

article: nième type (4) p {
famille de polices: 'light';
transformation de texte: majuscule; }

article: nième type (5) p {
famille de polices: 'bold-condensed';
poids de police: 600; } 

Avec ces styles de fondation en place pour chaque taille d'écran, j'introduis la disposition de l'élément apart qui sera visible sur les écrans de taille moyenne. Pour des 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 le déplacement des éléments autour de ma grille:

 @media (min- largeur: 48em) {

de côté {
affichage: grille;
zones de modèle de grille:
"a b c"
"d e f"
"g h i";
écart de grille: 1,5rem; }
} 

J'ai besoin de 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 effectivement du DOM à des fins de style:

 apart div {
affichage: contenu; } 

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 aucune modification de leur ordre dans mon HTML:

 côté img: nth-of-type (1) {
surface de la grille: a; }

côté img: nième type (2) {
surface de la grille: e; }

côté img: nième type (3) {
surface de la grille: g; }

côté img: nième type (4) {
zone de grille: i; } 

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

 article de côté: nth-of-type (1) {
surface de la grille: b; }

côté article: nième type (2) {
surface de la grille: c; }

côté article: nième type (3) {
surface de la grille: d; }

côté article: nième type (4) {
surface de la grille: f; }

côté article: nième type (5) {
surface de la grille: h; } 

Sur les écrans de petite et moyenne taille, les éléments principal et latéral s'empilent verticalement dans l'ordre où ils apparaissent dans mon HTML. L'espace supplémentaire disponible dans les grandes fenêtres me permet de les placer côte à côte afin que le poids visuel soit équilibré des 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) {

corps {
affichage: grille;
grille-modèle-colonnes: répéter (5, 1fr); }
} 

Ensuite, je place les éléments principal et latéral à l'aide de 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 {
grille-colonne: 1; }

de côté {
grille-colonne: 3 / -1; }
} 

Réorganisation et rotation

CSS Grid est désormais le meilleur outil à utiliser pour implémenter 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 du sens lorsqu'ils sont lus sans aucun style appliqué:

 Cortina 
 Voiture la plus vendue au Royaume-Uni 
 De  1962–1983  
 

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

 en-tête h1,
en-tête p {
marge: 0;
alignement du texte: centre; }

en-tête h1 {
taille de police: 10vmax;
couleur: # ebc76a;
hauteur de ligne: 1; }

en-tête p {
taille de police: 4vmax;
hauteur de ligne: 1,1;
transformation de texte: majuscule; } 

J'ai commandé mon HTML pour une structure de phrase sémantique, plutôt que pour toute 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 de flex-direction dans la colonne:

 header {
affichage: flex;
flex-direction: colonne; } 

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 de commande 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, ce qui le place en haut:

 en-tête p: dernier de type {
ordre: -1; } 

Ma conception pour les écrans de taille moyenne comprend deux grandes bandes de couleurs d'arrière-plan, développées à l'aide d'un dégradé CSS. Alors ensuite, je change les couleurs de premier plan de mon titre et de mes paragraphes pour les mettre en contraste avec ce nouveau fond:

 @media (min-width: 48em) {

corps {
image d'arrière-plan: gradient linéaire (à droite,
# 0a0a08 0%,
# 0a0a08 50%,
#fff 50%,
#fff 100%); }

en-tête h1 {
couleur: #fff; }

en-tête p {
couleur: # ebc76a; }
} 

L'alignement inhabituel des trois éléments de cet en-tête est possible en combinant CSS Grid avec Flexbox. Bien que cela puisse ne pas être é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) {

entête {
affichage: grille;
grille-modèle-colonnes: répéter (4, 1fr);
align-items: start;
padding-top: 0; }
} 

Mon titre se propage sur les quatre colonnes:

 en-tête h1 {
grille-colonne: 1 / -1; } 

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

 en-tête p: premier du type {
grille-colonne: 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:

 en-tête p: dernier type {
grille-colonne: 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, alors j'ajoute une transformation qui la fait pivoter négativement de 30 degrés et la déplace verticalement de 150 pixels vers le bas:

 header {
transformer: tourner (-30deg) translateY (150px);
origine de transformation: 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 - en haut à gauche (0 0) en haut à droite (100% 0) en bas à droite (100% 100%) ou en bas à gauche (0 100%) . Vous pouvez également spécifier une origine en pixels, em ou unités rem.

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

 header {
transition: transformer .5s avec facilité; }

en-tête: survoler {
transformer: tourner (-25deg) translateY (150px); } 

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:

… [19659122]… 

 

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 d'envergure en ligne:

 Best 
 Best-seller 
 Cortina 

Le choix le plus sémantique pour marquer ma liste de modèles Cortina et les années pendant 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 des styles de navigateur par défaut:

 Mark I  1962–1966 
 Mark II  1966– 1970 
 Mark III  1970–1976 
 Mark IV  1976–1979 
 Mark V  1979–1983 
 

Pour les petites fenêtres, je n'ai besoin que de quelques styles de fond de teint. 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 en 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 {
taille de police: 18vmin;
hauteur de ligne: .9;
couleur: #fff; }

h1 span {
bloc de visualisation; }

étendue h1: nième type (1) {
couleur: # ba0e37; }

plage h1: nième type (3) {
couleur: # 31609e; } 

Je veux 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 {
type de liste: aucun;
affichage: grille;
grille-modèle-colonnes: 1fr 1fr; } 

Ensuite, je resserre le début des éléments et j'ajoute une bordure bleue continue au bas de tous sauf du dernier élément de liste:

 li {
affichage: bloc en ligne;
hauteur de ligne: 1,2; }

li: not (: dernier de type) {
bordure inférieure: 1px solide # 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 ajouter une plus grande emphase, je change les valeurs d'affichage des éléments forts pour les bloquer et les mettre en majuscules:

 li strong {
bloc de visualisation;
taille de police: 1.266rem;
poids de police: 600;
transformation de texte: majuscule; } 

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

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

 @media (min-width: 48em) {

entête {
affichage: flex;
align-items: centre;
justifier-contenu: centre; }
} 

Le contenu étant 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 seront redimensionnées automatiquement:

 header> div {
affichage: grille;
grille-modèle-colonnes: répéter (3, contenu min);
grille-modèle-lignes: auto auto; } 

Les trois lignes multicolores dans le titre sont le fondement de cette conception d'en-tête. Je veux les placer dans des colonnes et des lignes spécifiques de cette grille, alors j'ajoute display: contents; au titre:

 h1 {
affichage: contenu; } 

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) {
grille-colonne: 1;
grille-ligne: 2; }

étendue h1: nième type (2) {
grille-colonne: 2;
quadrillage: 1/3; }

plage h1: nième type (3) {
grille-colonne: 3;
quadrillage: 1/3; } 

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

 h1 span {
transformer: tourner (180deg);
mode d'écriture: vertical-lr; } 

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

 ol {
bloc de visualisation; }

li {
alignement du texte: à droite; } 

SVG et texte

Il m'a fallu beaucoup de temps pour apprécier le SVG et me familiariser avec la façon d'en tirer le meilleur parti, et j'apprends toujours. 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 texte.

Comme le texte HTML, le texte SVG est accessible et sélectionnable. Il est également infiniment stylable 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, c'est comme 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 vous le souhaitez, mais mon prochain titre n'en a besoin que d'un:

SVG comprend un ensemble de propriétés et de valeurs d'attribut 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 propres à SVG qui contribuent à rendre le texte SVG si attrayant.

Par exemple, textLength définit la largeur du texte rendu, qui se rétrécira et s'étirera pour remplir l'espace en fonction de la valeur lengthAdjust

• textLength
  Le texte sera mis à l'échelle pour s'adapter. Définissez textLength en pourcentages ou utilisez n'importe quelle valeur numérique. 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'il est utilisé directement sur un élément de texte, Les propriétés SVG agissent de la même manière que les styles en ligne:

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 incorporé 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:

HTML a son élément span et SVG comprend 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 de texte entre six éléments tspan :

 '70's ​​
 best- 
 best- 
 best-seller 
 Cortina 
 British 
 car 
 car 
 

En divisant mon titre en plusieurs éléments, je suis en mesure de 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 pour la ligne de base du texte;
• dx décale le texte horizontalement d'un élément précédent;
• dy décale le texte verticalement d'un élément précédent.