Des décisions de conception inspirées avec Max Huber : transformer des sujets banals en une communication visuelle passionnante

Il y a des années, j'aurais aimé pouvoir travailler sur des projets publicitaires pour des noms familiers parce que je pensais que le travail au-dessus de la ligne apporterait une satisfaction créative. J'ai eu la chance de travailler avec de nombreuses entreprises et organisations caritatives bien connues, mais avec le recul, mes petits projets étaient les plus satisfaisants sur le plan créatif.

Souvent, les grandes marques ont déjà établi des directives qui signifient qu'il y a moins de place pour moi pour expérimenter et exercer mes muscles créatifs. Je ne dis pas que les directives de la marque sont sans importance, mais je préfère travailler sur des projets où je sens que j'ajoute le plus de valeur et un peu de moi-même.

De nos jours, les entreprises de produits semblent plus intéressées par le raffinement des interfaces et la simplification des expériences utilisateur. J'apprécie ces choses quand j'utilise un produit, mais je trouve que travailler sur ces projets est moins gratifiant. Les clients bien connus ont toujours un certain attrait — et avoir des logos dans mon portefeuille a été bon pour les affaires — mais je recherche maintenant des projets qui m'offrent la liberté de développer mes intérêts créatifs.

Je suis fasciné par la façon dont le design peut raconter des histoires engageantes sur des produits et des services, même ceux qui pourraient être considérés comme banals par certains. J'aime explorer comment les images, la mise en page et la typographie peuvent être utilisées pour communiquer des messages de manière visuellement distinctive. Par-dessus tout, j'aime utiliser mon expérience et mes intérêts en direction artistique et en conception graphique pour aider les entreprises, les organismes de bienfaisance et parfois les particuliers, qui pourraient autrement y être exposés.

« Je n'essaie pas de parler au nom des machines. Au lieu de cela, j'ai essayé de les faire parler d'eux-mêmes, à travers la présentation graphique de leurs éléments, de leurs opérations et de leur utilisation.

—Giovanni Pintori

Même des designers renommés et très appréciés ont passé du temps à travailler avec des sujets banals et ont produit des œuvres emblématiques. Après avoir déménagé de la Suisse aux États-Unis, Erik Nitsche pour des magazines tels que Harper's Bazaar, Life et Vanity Fair. Mais c'est son travail pour General Dynamics qui est devenu le plus reconnu. Au cours de ses cinq années en tant que directeur artistique de l'entreprise aérospatiale et de défense, Nitsche a développé un système de conception d'informations qui a abouti à des rapports annuels, des affiches, des données techniques et Dynamic America, un livre de 420 pages retraçant l'histoire de l'entreprise.

Le designer italien Giovanni Pintori a travaillé pour le fabricant de produits commerciaux Olivetti pendant 31 ans, où le style simple et les formes géométriques qu'il a appliqués aux publicités, calendriers et affiches se sont développés dans le vocabulaire de conception de l'entreprise.

Né en Suisse, Max Huber a également passé la majeure partie de sa carrière à travailler en Italie. Alors que son portefeuille contient des travaux pour de nombreuses grandes marques italiennes, ses étiquettes alimentaires et ses conceptions de papier d'emballage pour les supermarchés La Rinascente sont également fascinantes.

Ce que ces trois designers, et bien d'autres comme eux, peuvent nous apprendre que même les sujets les plus banals peuvent offrir des opportunités passionnantes de communication à travers le design. Et c'est quelque chose dont j'essaie de me souvenir tous les jours.

Inspiré par Max Huber

Bien que moins connu que beaucoup de ses contemporains, Max Huber était l'un des designers suisses les plus distingués. Né à Baar en 1919, Huber a voyagé entre la Suisse et l'Italie jusqu'à la fin de la Seconde Guerre mondiale.

Au début de sa carrière à Milan, Huber a travaillé au studio d'Antonio Boggeri où il a été influencé pour mélanger les médias, y compris l'illustration, la photographie et la typographie. De 1950 à 1954, Huber a travaillé pour la chaîne de grands magasins italienne haut de gamme La Rinascente et a remporté le premier de ses prix Golden Compass ( Compasso d'Oro ) en 1954.

Dans les années 1940, Milan était le centre du mouvement d'avant-garde italien. Là-bas, Huber côtoie des artistes, des designers et des intellectuels. Ce mélange a stimulé Huber, et il a expérimenté le mélange du travail créatif de nombreux disciples.

Huber n'a jamais pris ces influences au pied de la lettre. Il a manipulé des photographies, découpé des sujets dans leur arrière-plan et les a mélangés avec des blocs de couleurs et de formes. Des bandes colorées ajoutent du mouvement aux créations de Huber et ses conceptions d'affiches pour Monza Autodromo - le célèbre circuit de course de Milan - sont aussi excitantes que les courses elles-mêmes.

Huber utilisait souvent des formes plates - flèches, cercles et motifs tourbillonnants - et les superposait à des photographies monochromes et bicolores. Ses pochettes de disques et les étuis qu'il a réalisés pour sa propre collection de jazz swinguent avec énergie.

Bien qu'il ne soit pas toujours reconnu pour ses compétences en tant que typographe, le travail de Huber est rempli d'une typographie inspirante. Il a basculé sans effort entre les polices de caractères modernes avec empattement et contemporaines sans empattement et semblait à l'aise lorsqu'il utilisait les deux. Alors que le style suisse est le plus associé aux polices de caractères sans empattement néo-grotesques, le travail de Huber avec les empattements est tout aussi inspirant.

Huber a défini des grilles pour souligner l'alignement du texte, puis a utilisé de grands titres suivis de texte dans une hiérarchie stricte. Mais il n'avait pas non plus peur de jouer avec la typographie, de la placer sous des angles inhabituels et d'expérimenter la perspective.

Des années 1960 jusqu'à sa mort en 1992, Huber a travaillé sur diverses commandes, notamment une refonte de la marque et un design de papier peint basé sur le jazz mettant en vedette Louis Armstrong, qu'il a appelé Rhythm. Son client, Oscar Braendli, a chargé Huber de concevoir des expositions.

Huber a également conçu pour Adriano Olivetti et a embrassé ces projets avec le même enthousiasme pour l'expérimentation. Les deux sont des exemples clairs de la façon dont un design distinctif peut transformer même les sujets les plus banals en une communication visuelle passionnante.

Ils prouvent que la synergie et la confiance dans une relation entre le client et le designer peuvent apporter des résultats extraordinaires qui peuvent durer des décennies.

Bien que son style de signature se soit développé tout au long de sa vie, l'engagement de Huber à expérimenter est resté. Même s'il a inclus des éléments individuels de son style - blocs de couleurs audacieux, formes emblématiques, manipulation photographique et typographie forte - tout au long de sa vie, Huber a construit un portefeuille de travaux remarquablement varié. Plus tard dans sa vie, Huber a enseigné le graphisme dans la ville de Lugano, dans le sud de la Suisse, où je séjourne par hasard lorsque je travaille en Suisse. Il est mort à Mendrisio – où se trouve mon bureau suisse – en 1992 et il y a un musée dédié à son travail dans la ville voisine de Chiasso.

Il n'y a eu qu'un seul livre sur Max Huber et vous devriez trouver de la place pour lui sur votre étagère ou votre table basse. "Max Huber" (2006) de Stanislaus von Moos, Mara Campana et Giampiero Bosoni. Il s'agit d'un catalogue complet d'œuvres de toute sa carrière écrites par des personnes qui connaissaient personnellement Max Huber.

Identification des polices de style ancien (humaniste)

Les périodes où les changements de conception vont souvent de pair avec les progrès de la technologie. Ce qui est vrai du Web aujourd'hui - et comment les développements de CSS affectent ce qui est possible en ligne - était également le cas avec les premiers développements de la typographie. Certaines premières polices de caractères étaient humanistes parce que leurs origines étaient dans l'écriture manuscrite du milieu du XVe siècle.

Mais lorsque les techniques de découpage de l'acier - les blocs de métal utilisés pour la composition jusqu'au XIXe siècle - sont devenues plus précises, les polices de caractères sont devenues plus raffinées.

Cette précision a permis aux concepteurs de caractères d'ajouter des fioritures à ce que nous appelons maintenant les polices de style ancien.

Alors que les polices humanistes incluent généralement un « e » minuscule avec une barre transversale inclinée, les polices de style ancien ont introduit une barre transversale horizontale.

Le stress dans une police de caractères est l'angle tracé entre les parties les plus fines d'une lettre. Dans les polices à accent vertical, cette ligne est tracée verticalement de haut en bas. Dans les polices de caractères avec un accent diagonal (humaniste), la ligne entre les parties les plus fines d'une lettre est tracée en biais.

Les polices de style ancien continuent dans le style humaniste de l'accent diagonal, mais ont plus de contraste entre leurs traits les plus épais et les plus fins. Les polices de style ancien sont souvent entre crochets car elles ont des courbes qui relient leurs empattements à un trait.

Baskerville a été conçu dans les années 1750 par John Baskerville. Ses polices de caractères sont restées populaires et il existe de nombreuses interprétations modernes. Les polices de style Garamond restent populaires dans la conception d'impression et Monotype Garamond est fourni avec plusieurs produits Microsoft.

Type de style ancien

Malgré sa disposition non conventionnelle, je n'ai besoin que de quatre éléments conventionnels pour développer ce design à l'ancienne. Un élément d'en-tête, de division de bannière, de paragraphe et de pied de page :

 <header>…</header> <div>…</div> <p>…</p> <footer> <svg>…</svg> </footer>

Comme je l'ai montré dans les numéros précédents, mon processus commence par l'ajout de styles de base, y compris cette police de caractères de style ancien :

 body { background-color: #6e2838; font-family: "old-style"; color: #f7eed7; }

Un en-tête Trabant domine ma conception, même sur les plus petits écrans. Cet en-tête mélange deux images. Le premier est une marque de logo SVG Trabant évolutive. Pour masquer cette image de présentation de la technologie d'assistance, j'ajoute un rôle ARIA et je définis son attribut caché sur true. Ensuite, j'ajoute un rôle ARIA différent d'img à la deuxième image, une image de ce qu'on appelle "la pire voiture jamais fabriquée :"

 <header> <img src="header.svg" alt="" role="presentation" aria-hidden="true"> <img src="header.png" alt="Trabant" role="img"> </header>

J'ai besoin que le grand logo Trabant reste parfaitement circulaire quelle que soit la largeur de son élément parent. Un rapport d'aspect est un rapport entre la largeur (x) et la hauteur (y) d'un élément. Un rapport de 1: 1 pour les carrés, 1,618: 1 est le nombre d'or et 16: 9 pour les médias à écran large.

Une technique populaire pour maintenir le rapport intrinsèque a été développée en 2009 par Thierry Koblentz, et elle utilise le padding-top appliqué à un élément ou un pseudo-élément à l'intérieur. Différents pourcentages de rembourrage créent différents ratios :

 1:1 100% 4:3 75% 16:9 56.25%

Ce logo étant circulaire, la case qu'il occupe doit toujours rester carrée. J'ajoute un pseudo-élément :before et règle son rembourrage supérieur à 100% :

 header:before { content: ""; display: block; padding-top: 100%; }

J'ai maintenant trois éléments dans mon en-tête. En plaçant le pseudo-élément et mes images dans la même zone de grille, CSS Grid facilite leur empilement :

 header { display: grid; } header:before, header img { grid-column: 1; grid-row: 1; }

Pour centrer ces images horizontalement et verticalement - quelle que soit leur largeur ou leur hauteur - je les aligne et les justifie toutes les deux au centre :

 header { align-items: center; justify-content: center; }

Enfin, pour fusionner la photo de ma Trabant et son logo SVG, j'ajoute un mode mix-blend avec une valeur de superposition :

 header img:last-of-type { mix-blend-mode: overlay; }

Ma division bannière contient un gros titre bicolore suivi de trois courts paragraphes :

 <div> <h1>Sparkplug <span>with a roof</span></h1> <p>VEB Sachsenring Automobilwerke Zwickau</p> <p>Manufactured in East Germany</p> <p>1957–1990</p> </div>

J'aligne ce titre vers la droite, puis resserre son interligne pour compléter sa grande taille. Ensuite, j'applique une couleur d'accentuation à l'élément span à l'intérieur, ce qui ajoute l'effet bicolore :

 h1 { font-size: 4.875rem; line-height: 1.1; text-align: right; } h1 span { color: #f85981; }

Pour désaccentuer le deuxième paragraphe de la bannière, j'utilise un sélecteur de pseudo-classe : nth-of-type et je réduis sa taille :

 #banner p { font-size: 1.424rem; } #banner p:nth-of-type(2) { font-size: 1rem; }

Avec ces styles de base en place pour chaque taille d'écran, j'introduis la mise en page pour les écrans de taille moyenne en ajoutant une grille symétrique à trois colonnes avec trois lignes automatiquement dimensionnées :

 @media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto; padding: 4rem; } }

La division de l'en-tête et de la bannière remplit toute la largeur de ma mise en page. Je place la bannière dans la première ligne, même si elle vient en deuxième dans mon HTML :

 header, #banner { grid-column: 1 / -1; } header { grid-row: 2 / 4; } #banner { grid-row: 1; }

L'ajustement des tailles de caractères pour maintenir une hiérarchie équilibrée est l'un des aspects les plus satisfaisants du développement de conceptions sur toutes les tailles d'écran. C'est aussi l'un des plus difficiles. J'augmente la taille du titre et de deux paragraphes en les déplaçant vers le haut de mon échelle typographique :

 h1 { font-size: 8rem; line-height: 1.1; text-align: center; } #banner p { font-size: 2.027rem; } #banner p:nth-of-type(2) { font-size: 1.266rem; }

Mon en-tête domine un grand écran en remplissant la moitié de sa largeur, et j'équilibre son poids visuel avec le contenu restant, y compris le titre surdimensionné. Bien que cette conception semble asymétrique, sa grille est symétrique et contient six colonnes de largeur égale :

 @media (min-width: 82em) { body { grid-template-columns: repeat(6, 1fr); grid-column-gap: 2vw; grid-row-gap: 2vh; } }

L'en-tête couvre les trois premières colonnes et les trois lignes de ma mise en page :

 header { grid-column: 1 / 4; grid-row: 1 / 4; }

Je dois placer le titre et la division de la bannière sur ma grille, et non la bannière qui les contient. Je change la propriété d'affichage de cette division en contenu, ce qui la supprime efficacement du DOM à des fins de style :

 #banner { display: contents; }

Je place les éléments enfants de la bannière en face de mon en-tête en utilisant les numéros de ligne de colonne et de ligne. Ensuite, j'augmente à nouveau la taille de mon titre, puis place la division et le paragraphe du texte courant, en laissant la colonne devant eux division vide. Cela crée un espace pour mon pied de page :

 #banner h1 { grid-column: 4 / -1; grid-row: 1; font-size: 6.5rem; } #banner div { grid-column: 5 / -1; grid-row: 2; } body > p { grid-column: 5 / -1; grid-row: 3; }

Enfin, je place le pied de page à côté de mon texte courant, ce qui ajoute à l'aspect asymétrique de cette conception de style ancien :

 footer { grid-column: 4; grid-row: 3; }

La fusion de l'illustration et de la photographie avec des formes audacieuses et une typographie claire était un aspect déterminant du style de signature de Huber. En choisissant des polices de caractères contemporaines de style ancien et en utilisant les technologies d'aujourd'hui, y compris les modes de fusion et les polices Web, nous pouvons suivre l'exemple de Huber et créer des designs modernes avec une touche classique.

Polices de caractères de transition

Au XVIIe siècle, le Siècle des Lumières était un mouvement intellectuel qui rejetait l'art, la littérature et la philosophie traditionnels. En 1692, Louis XIV a commandé une nouvelle police de caractères basée sur des principes scientifiques plutôt que sur la calligraphie. Le résultat est Romain du Roi, une police de caractères avec des lettres basées sur une grille de 2 304 cases.

Romain du Roi était plus précis dans sa conception que la plupart des polices de caractères précédentes et comportait des traits avec un contraste plus net entre épais et mince. Il a influencé les dessinateurs de caractères désormais célèbres John Baskerville, Giambattista Bodoni et William Caslon. Leur travail a supprimé toute trace de calligraphie humaniste pour créer des polices de caractères transitionnelles (néo-classiques) qui ont profité de nouvelles encres et de papiers de meilleure qualité.

Dans les polices de caractères de transition, les lettres minuscules ont un accent vertical ou presque vertical. Les empattements de tête sur les lettres ascendantes, y compris « b », « d », « h » et « l », sont généralement plus horizontaux. Les extrémités de nombreux traits sont marquées par des bornes à bille à la place d'angles, d'émoussés ou d'empattements.

Les polices de caractères transitionnelles contemporaines sont populaires, y compris Cambria qui a été conçue par Jelle Bosma en 2004 pour la collection de polices ClearType de Microsoft. Cambria est sorti avec Windows Vista. Georgia a été conçu par Matthew Carter en 1993. Conçu par Zuzana Licko en 1996, Mrs Eaves est une variante de Baskerville et porte le nom de Sarah Eaves, l'épouse de John Baskerville.

Identifier les polices de caractères modernes

Alors que les polices de caractères Old Style et Transitional accentuaient le contraste entre les traits épais et fins, les polices de caractères modernes ont poussé cette caractéristique à l'extrême. Le terme Moderne peut être trompeur car la première police de ce style a été conçue en 1784 par Firmin Didot. Didot était le fils de François-Ambroise dont plusieurs polices de caractères, dont Ambroise et, bien sûr, Didot, portent le nom.

Giambattista Bodoni a donné son nom aux polices de caractères de style Didone avec un changement soudain de contraste entre les traits épais et fins. Ces polices de caractères comportent également des empattements sans crochets avec des angles aigus entre les épais et les fins, des axes verticaux et de petites ouvertures en lettres ouvertes, y compris la lettre minuscule "a".

Les polices de caractères modernes sont souvent considérées comme des choix élégants et stylés. C'est pourquoi, lorsque vous parcourez des étagères pleines de magazines de mode, vous constaterez qu'ils utilisent souvent des polices de caractères Didone pour leurs têtes de mât.

Mais ces mêmes caractéristiques - contraste extrême, ouvertures plus petites et axes verticaux - se retrouvent également dans les polices de caractères modernes aux personnalités très différentes.

Polices de caractères modernes

J'ai besoin de seulement trois éléments structurels pour mettre en œuvre mon prochain design inspiré de Huber ; un en-tête contenant les deux logos Trabant, une division de bannière et mon contenu principal :

 <header> <div><svg>…</svg></div> <div><svgv…</svg></div> </header> <div class="banner">…</div> <main> <ul>…</ul> <p>…</p> </main>

Ces styles de base ajoutent de la personnalité à chaque écran, quelle que soit sa taille. Ils ajoutent une police de caractères moderne à contraste élevé et un arrière-plan mélangeant un contour de la Trabant avec un dégradé linéaire pour ajouter de la profondeur à cette conception :

 body { background-color: #34020B; background-image: url(body.svg), linear-gradient(180deg, #6E2838 0%, #98304D 21%, #34020B 99%); font-family: "modern"; color: #fff; }

Je positionne le plan Trabant à mi-chemin horizontalement, tandis que le dégradé se répète sur ma page :

 body { background-position: 50vw 2rem, 0 0; background-repeat: no-repeat, repeat-x; }

La bannière comprend un gros titre. J'ajoute des sauts de ligne explicites à mon HTML et un élément span pour ajouter de la couleur à des mots spécifiques. Ensuite, je regroupe les paragraphes de ma bannière en une division. Cela me permettra de modifier sa position dans ma mise en page sur des écrans plus grands plus tard dans le processus :

 <div> <h1>The worst <span> car ever made</span></h1> <div> <p>VEB Sachsenring Automobilwerke Zwickau</p> <p>Manufactured in East Germany</p> <p>1957–1990</p> </div> </div>

La position de l'image de fond de mon plan laisse place à un gros titre. Pour m'assurer qu'il n'échappe pas à l'espace que je lui ai alloué, je limite la largeur maximale de ce titre à la moitié de la largeur de la fenêtre :

 #banner h1 { max-width: 50vw; }

Ensuite, j'ajoute de la couleur à l'élément span et dimensionne le type de la bannière, en augmentant la taille du titre et en réduisant son interligne pour créer un bloc de texte solide :

 #banner h1 { font-size: 4rem; line-height: 1; text-transform: uppercase; } #banner h1 span { color: #f85981; } #banner p { font-size: 1.424rem; } #banner p:nth-of-type(2) { font-size: 1rem; }

Cette conception comprend une liste de spécifications Trabant; sa capacité et sa consommation de carburant, plus le prix de la voiture, qui a été défini par le gouvernement est-allemand :

 <li> <h3>Two-stroke fuel tank</h3> <p><b>6.3</b>gallon</p> </li> <li>…</li> <li>…</li>

Cet ordre HTML a du sens lors de la lecture sans styles, mais j'ai besoin que la combinaison de titre et de paragraphe soit inversée visuellement pour former un bloc de copie plus serré. J'inverse l'ordre de mon titre et de mon paragraphe en spécifiant les éléments de la liste en tant que conteneurs flexibles et en changeant leur direction par défaut de la ligne à la colonne inversée :

 li { display: flex; flex-direction: column-reverse; } ul p { font-size: 1.802rem; } ul p { color: #f85981; }

La conception numérique est une considération importante lors du choix d'une police de caractères. Votre choix peut dépendre de la clarté et de la lisibilité lorsque le type est défini sur de petites tailles. Les chiffres de nombreuses polices de caractère modernes ont des courbes distinctives et d'autres caractéristiques qui peuvent contribuer à la personnalité d'un dessin lorsqu'ils sont utilisés dans des tailles plus grandes.

Je veux faire une caractéristique des chiffres dans cette conception, donc je surdimensionne l'élément en gras. Et même si je ne préconiserais normalement pas de modifier le suivi d'une police de caractères, l'augmentation de l'espacement des lettres de ces chiffres aide à accentuer leur caractère :

 ul pb { font-size: 4.5rem; letter-spacing: .05em; line-height: .8; color: #fff; }

Le prix dans ma liste de spécifications comprend également un élément span qui contient le code de devise est-allemand, DDM :

 <li> <h3>Official state price</h3> <p><b>7,450</b> <small>DDM</small> </li>
 <li> <h3>Official state price</h3> <p><b>7,450</b> <small>DDM</small> </li>

Pour moi, chaque élément typographique, aussi petit soit-il, est une opportunité d'expérimenter des traitements typographiques intéressants. La petite empreinte de ce petit élément le rend parfait pour pivoter en position verticale afin qu'il se place parfaitement à côté du grand chiffre :

 ul p small { font-size: .889rem; text-align: right; transform: rotate(180deg); writing-mode: vertical-rl; }

Ce niveau de détails typographiques peut sembler excessif pour les styles de base, mais j'ai autant réfléchi à la conception de caractères pour les petits écrans qu'à la mise en page des plus grands.

Cela signifie également que je n'ai besoin de faire que des ajustements mineurs pour les écrans de taille moyenne, d'abord en modifiant les valeurs de couleur dans mon arrière-plan dégradé CSS et en repositionnant mon plan Trabant au centre de l'écran et à 30 rem du haut :

 @media (min-width: 48em) { body { background-image: url(body.svg), linear-gradient(180deg, #6E2838 0%, #98304D 20%, #34020B 100%); background-position: 50% 30rem, 0 0; } }

L'introduction de la mise en page sur des écrans de taille moyenne implique un peu plus que de placer les deux logos d'en-tête sur les côtés opposés de l'écran. J'ajoute deux colonnes symétriques à l'en-tête et j'aligne les logos pour équilibrer leurs lignes centrales :

 header { display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: 100%; }

J'aligne le premier logo à gauche et le second à droite :

 header > *:first-child { text-align: left; } header > *:last-child { text-align: right; }

Superdimensionner un titre est un moyen fabuleux de mettre en valeur les détails complexes de nombreuses polices de caractères modernes. J'augmente donc sa taille et j'utilise l'espace blanc que j'ai ajouté à mon code HTML pour diviser ses mots en trois lignes :

 #banner h1 { white-space: pre; max-width: 100vw; font-size: 8rem; }

Alors que sur les petits écrans, les paragraphes de la bannière suivent le titre comme ils le font dans le HTML, je souhaite les combiner avec mon titre pour créer un élément typographique intéressant.

J'utilise le positionnement absolu pour déplacer la division qui contient ces paragraphes en place. Les valeurs haut et gauche basées sur le texte permettent à ces paragraphes de rester dans la bonne position lorsque le titre change de taille :

 #banner { position: relative; margin-bottom: 25rem; } #banner div { position: absolute; top: 8.25em; left: 20em; }

Pour mon dernier ajustement d'écran de taille moyenne, je transforme ma liste non ordonnée en un conteneur flexible et configure ses éléments pour qu'ils occupent une quantité égale d'espace horizontal disponible :

 ul { display: flex; } li { flex: 1; }

Adapter un design pour plusieurs tailles d'écran est un défi que j'apprécie beaucoup. Pour utiliser l'espace supplémentaire disponible sur les grands écrans, j'applique des valeurs de grille à l'élément body pour créer trois colonnes symétriques :

 @media (min-width: 82em) { body { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 2vw; }

Les éléments de cette conception ne se chevauchent pas, j'utilise donc des zones de modèle de grille pour leur simplicité. Cette conception a neuf zones de grille, et je donne à chacune un nom qui reflète son contenu ; en-tête, bannière, données et principal :

 body { grid-template-areas: "header header ." "banner banner data" ". . main"; }

Je place ces éléments en utilisant des noms de zone, ce qui me permet de changer leur emplacement dans ma mise en page sans modifier leur position dans mon code HTML :

 header { grid-area: header; } #banner { grid-area: banner; } main { display: contents; } main > p { grid-area: main; } ul { display: block; grid-area: data; }

Repérage des polices de caractères Slab Serif (égyptiennes)

Cette classification finale des polices de caractères à empattement est apparue pour la première fois dans les affiches publicitaires du début du XIXe siècle et, avec ses formes de lettres en blocs, a été conçue pour capter l'attention. Une caractéristique déterminante d'un empattement Slab est un empattement souvent sans crochet qui rencontre la tige à un angle de 90 °.

Clarendon n'est pas seulement le nom d'une police de caractères, mais d'un style de polices Slab serif. Alors que les formes de lettres de nombreux empattements Slab ont une largeur de ligne uniforme, le style Clarendon rompt avec les conventions avec une différence plus prononcée entre les traits les plus épais et les plus fins. Contrairement aux autres empattements Slab, Clarendon a des crochets incurvés.

Les bornes à bille d'Archer lui confèrent un look distinctif qui est populaire auprès des concepteurs imprimés et en ligne. Sentinel, également de Hoefler & Co., a été utilisé par Barack Obama lors de sa campagne de réélection en 2012. Comme Archer, il existe dans une variété de poids et comprend un italique.

J'ai choisi ITC Officina Serif d'Erik Spiekermann et Ole Schafer pour mon premier livre Transcending CSS, même si à l'époque je ne connaissais pas bien la conception typographique. FF Unit Slab, également d'Erik Spiekermann, est disponible en plusieurs graisses, en italique et prend en charge 107 langues différentes.

Dalton Maag est la fonderie de caractères dont j'utilise le plus souvent les polices. J'ai choisi leur Lexia pour mes couvertures de livres les plus récentes, et j'aime la personnalité de son poids publicitaire le plus épais, en particulier en italique. Vous devriez connaître Mokoko, également de Dalton Maag, car je l'ai choisi pour les gros titres et les titres de cette série.

Alors que Barack Obama a choisi son empattement Slab de Hoefler & Co., son collègue candidat démocrate Bernie Sanders a choisi Jubilat de Joshua Darden pour sa campagne présidentielle de 2016. Jubilat est l'un des empattements Slab les plus polyvalents et est disponible en 11 graisses avec des italiques assortis.

Les empattements de dalle demandent de l'attention

Développer mon design final nécessite très peu d'éléments structurels, malgré sa complexité visuelle. Les éléments que j'ai choisis devraient vous sembler familiers car je les ai déjà utilisés dans plusieurs combinaisons.

L'en-tête contient à nouveau deux images SVG, une division de bannière comprend le titre et le premier paragraphe du stand, et une liste non ordonnée qui affiche les spécifications Trabant. Cette fois, j'inclus également deux éléments SVG. Un pour les 57 chiffres massifs, le second pour le texte décoratif qui suit un chemin courbe :

 <header> <svg>…</svg> <svg>…</svg> </header> <svg>…</svg> <div>…</div> <div>…</div> <ul>…</ul> <div> <svg>…</svg> </div>

La réunion de trois de ces éléments forme une introduction graphique à cette conception. Je commence par les styles de base qui incluent la couleur et introduisent la police de caractères slab serif :

 body { background-color: #8a8988; font-family: "slab"; color: #f7eed7; }

Je limite la largeur de mon en-tête à 220px et j'aligne son contenu de manière centralisée :

 header { margin-bottom: 2rem; width: 220px; text-align: center; }

Pour me donner un contrôle précis sur leur apparence et pour leur permettre de s'adapter à la largeur de n'importe quelle fenêtre, j'ai développé mes chiffres surdimensionnés à l'aide de SVG. Ce graphique évolutif comprend deux chemins et pour m'assurer qu'il communique son contenu à tout le monde, j'ajoute une étiquette ARIA et un élément de titre à mon SVG :

 <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 750 690" role="img" aria-label="1957. The year Trabants were first produced"> <title>The year 1957</title> <path d="…"/> <path d="…"/> </svg>

Les deux chiffres de ce SVG se chevauchent, afin d'ajouter de la profondeur ; Je baisse leur opacité, puis j'utilise un mode de fusion pour mélanger leurs couleurs :

 body > svg path { opacity: .75; } body > svg path:nth-of-type(1) { fill: #f5e3B4; } body > svg path:nth-of-type(2) { fill: #ba0e37; mix-blend-mode: multiply; }

Le dernier composant de mon graphique d'introduction est le mot vertical «Duroplast», le plastique renforcé de fibres utilisé pour fabriquer les corps Trabant. Vous pouvez chercher cet élément dans mon HTML, mais vous ne le trouverez pas, car je génère ce contenu à l'aide d'un pseudo-élément. Je positionne le contenu généré, change son mode d'écriture en vertical, puis le fais pivoter de 180 degrés :

 body { position: relative; } body:after { content: "duroplast"; position: absolute; top: 2rem; right: 2rem; font-size: 7rem; transform: rotate(180deg); writing-mode: vertical-rl; }

Comme ce pseudo-élément suit effectivement le contenu du flux, il apparaît au-dessus de celui-ci dans l'ordre d'empilement, ce qui permet de le mélanger avec d'autres éléments et d'ajouter une profondeur supplémentaire à cette conception :

 body:after { mix-blend-mode: overlay; }

Le nombre de Trabant produites au cours de sa durée de vie est développé à l'aide d'un titre de niveau inférieur, suivi de deux paragraphes :

 <div> <h3>Units produced</h3> <p>1957–1990</p> <p>3,096,999</p> </div>

L'ordre visuel de ces éléments est différent de celui HTML, et j'utilise Flexbox pour modifier leur ordre au sein de leur division parente. Tout d'abord, je change la direction flexible de la ligne par défaut à la colonne :

 #content { display: flex; flex-direction: column; }

Ensuite, j'utilise la propriété order pour réorganiser les trois éléments, en plaçant mon titre en dernier :

 #content h3 { order: 3; font-weight: normal; text-transform: uppercase; }

Enfin, j'augmente la taille de mon deuxième paragraphe pour qu'il corresponde aux numéros d'éléments de la liste ci-dessous. Cela donne l'impression que ce contenu et la liste non ordonnée qui suit font partie du même élément :

 #content p:nth-of-type(2) { font-size: 4.5rem; }

L'espace sur les petits écrans peut être limité, mais cela ne signifie pas que nous ne pouvons pas être audacieux avec notre typographie. À mesure que les écrans deviennent plus grands, il y a encore plus d'occasions d'être aventureux avec des conceptions typographiques.

J'introduis la mise en page sur les écrans de taille moyenne en appliquant des valeurs de grille à l'élément body pour créer six colonnes symétriques et quatre lignes automatiquement dimensionnées :

 @media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, auto); } }

Ensuite, je place ma division d'en-tête et de bannière dans la première rangée en utilisant les numéros de ligne. Ma bannière occupe les trois premières colonnes, tandis que l'en-tête remplit les trois dernières :

 header { grid-column: 5 / -1; grid-row: 1; } #banner { grid-column: 1 / 4; grid-row: 1; }

Je place les chiffres désormais énormes sur ma grille et diminue leur valeur d'index z pour qu'ils apparaissent derrière d'autres éléments de ma mise en page :

 body > svg { grid-column: 1 / -1; grid-row: 2 / 4; z-index: -1; }

Je remplace le positionnement précédent de la pseudo-classe :after par des valeurs de grille et augmente sa taille de police pour remplir davantage l'espace disponible :

 body:after { position: static; grid-column: 4; grid-row: 1 / 3; z-index: 1; font-size: 10rem; }

Bien qu'il soit construit sur une grille symétrique, le fait de laisser certaines colonnes vides crée une conception asymétrique inhabituelle :

 #content { grid-column: 2 / -1; grid-row: 3; mix-blend-mode: difference; } ul { grid-column: 1 / -1; grid-row: 4 / -1; }

J'augmente ensuite la taille de mon type dans l'ensemble pour faire forte impression sur les écrans de taille moyenne :

 #content h3, #content p { color: #31609e; } #content h3 { font-size: 1.75rem; } #content p:nth-of-type(1) { font-size: 3rem; } #content p:nth-of-type(2) { font-size: 8rem; }

Texte SVG sur le chemin

L'une des raisons les plus excitantes d'utiliser SVG pour le rendu du texte est qu'il suit un chemin, un dispositif de conception qui n'est pas possible en utilisant CSS seul. Mon SVG sinueux comprend un chemin arrondi, plus un élément de texte qui contient mon contenu. J'inclus ce texte dans un élément SVG textPath et j'utilise sa valeur d'attribut href pour le lier à l'ID du chemin ci-dessus :

 <div> <svg viewBox="0 0 750 700" xmlns="https://www.w3.org/2000/svg"> <path fill="none" stroke="none" d="…"/> <text> <textPath href="#curve-path">…</textPath> </text> </svg> </div>

Je ne veux pas que cette courbe apparaisse sur de petits écrans, donc je change la valeur d'affichage de sa division parente en aucune dans mes styles de base. À l'aide d'une requête multimédia de largeur minimale, je rétablis ensuite cette valeur en bloc pour la révéler pour les écrans de taille moyenne, en la plaçant sur ma grille et en augmentant sa valeur d'index z. Cela l'avance dans l'ordre d'empilement :

 #curve { display: none; } @media (min-width: 48em) { #curve { display: block; grid-column: 1 / 6; grid-row: 2 / 4; z-index: 2; transform: translateY(-1.5rem); } }

Avec ce texte en place, j'utilise des styles familiers de taille de police et de transformation de texte, suivis des propriétés de remplissage SVG et d'ancrage de texte qui définissent mon texte depuis le début de son chemin :

 #curve text { font-size: .889rem; text-transform: uppercase; fill: #fff; text-anchor: start; }

Mes choix typographiques confiants exigent que je sois également courageux dans mon choix de mise en page pour les écrans plus grands. Les six colonnes symétriques et les quatre rangées que j'ai choisies précédemment offrent la possibilité de placer mes éléments de différentes manières.

Avec tous mes styles de typographie déjà définis, il ne reste plus qu'à déplacer mes éléments dans de nouvelles positions qui placent l'en-tête, la division de la bannière et la liste non ordonnée à côté de mes chiffres désormais gigantesques :

 @media (min-width: 64em) { body { grid-column-gap: 2vw; align-items: start; } body > svg { grid-column: 1 / 5; grid-row: 2 / 5; z-index: -1; } header { grid-column: 5 / -1; grid-row: 1; } #banner { grid-column: 5 / -1; grid-row: 2; } #content { grid-column: 1 / 4; grid-row: 4; } #curve { grid-column: 1 / 5; grid-row: 1 / 4; } ul { grid-column: 5 / -1; grid-row: 3 / -1; display: block; } }

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 : Herb Lubalin
• 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.