Souvent, les grandes marques ont déjà établi des lignes directrices, ce qui signifie 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 marque sont sans importance, mais je préfère travailler sur des projets où j'estime que j'apporte le plus de valeur et un peu de moi-même.

De nos jours, les sociétés de produits semblent plus intéressées à affiner les interfaces et à simplifier l'expérience utilisateur. J'apprécie ces choses lorsque j'utilise un produit, mais je trouve que travailler sur ces projets est moins gratifiant. Des clients connus ont encore une certaine allure – 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 les produits et 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 distincte. Par-dessus tout, j'aime utiliser mon expérience et mes intérêts dans la direction artistique et la 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 réputés et bien connus ont passé du temps à travailler avec des sujets banals et produit une œuvre emblématique. Après avoir déménagé de la Suisse aux États-Unis, Erik Nitsche pour des magazines comme 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 la société 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 la société.

Italien le designer 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ées aux publicités, calendriers et affiches ont évolué dans le vocabulaire de la 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 beaucoup plus comme eux, peuvent nous apprendre que même les sujets les plus banals peuvent offrent des opportunités passionnantes de communiquer par la conception. Et c'est quelque chose dont j'essaie de me souvenir tous les jours.

Lire la suite de la série

Inspiré par Max Huber

Bien que moins connu que beaucoup de ses contemporains, Max Huber était l'un des designers les plus distingués de Suisse. Né à Baar en 1919, Huber a déménagé 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, photographie et typographie. De 1950 à 1954, Huber a travaillé pour la chaîne italienne de grands magasins La Rinascente et a remporté le premier de ses prix Compass d'or (Compasso d'Oro) en 1954.

Dans les années 40, Milan était le centre de l'Italie avant -mouvement de garde. Pendant son séjour, Huber a côtoyé 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 à leur valeur nominale. Il manipula des photographies, coupa des sujets de leurs arrière-plans et les mélangea avec des blocs de couleurs et de formes. Les bandes colorées ajoutent du mouvement aux conceptions de Huber et ses conceptions d'affiches pour Monza Autodromo – le célèbre circuit 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 chevauchait avec du monochrome et photographies bichromiques. Ses créations de pochettes de disques et les boîtiers qu’il a réalisés pour sa propre collection de jazz swinguent avec énergie. Il a basculé sans effort entre les polices modernes avec empattement moderne et sans empattement et semblait à l'aise lors de l'utilisation des deux. Alors que le style suisse est le plus associé aux polices néo-grotesques sans empattement, 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 gros titres suivis de texte dans une hiérarchie stricte. Mais il n'avait pas peur non plus de jouer avec le type, de le placer sous des angles inhabituels et d'expérimenter la perspective.

Des années 1960 à la mort en 1992, Huber a travaillé sur diverses commandes, notamment une refonte de la marque et un design de papier peint à base de jazz qui 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 adopté 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 s'est développé tout au long de sa vie, l'engagement de Huber envers l'expérimentation est resté. Même s'il a inclus des éléments individuels de son style – des blocs de couleurs audacieux, des formes emblématiques, une manipulation photographique et une typographie forte – tout au long de sa vie, Huber a construit un portefeuille de travaux remarquablement varié. Plus tard, Huber a enseigné le design graphique dans la ville de Lugano, dans le sud de la Suisse, où je reste par hasard lorsque je travaille en Suisse. Il est décédé à Mendrisio – où se trouve mon bureau suisse – en 1992 et il y a un musée dédié à son travail à Chiasso à proximité.

Il n'y a eu qu'un seul livre sur Max Huber et vous devriez en trouver de l'espace sur votre étagère ou votre table basse. «Max Huber» (2006) de Stanislaus von Moos, Mara Campana et Giampiero Bosoni. C'est un catalogue complet de travaux de toute sa carrière écrit par des gens qui connaissaient personnellement Max Huber.

Identifier les polices de caractères (humanistes) à l'ancienne

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

Mais lorsque les techniques de découpe à l'acier – les blocs métalliques 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. [19659003] Cette précision a permis aux concepteurs de caractères d'ajouter de l'éclat à ce que nous appelons aujourd'hui les polices de caractères à l'ancienne.

Alors que les polices humanistes comprennent 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 est l'angle dessiné entre les parties les plus fines d'une lettre. Dans les polices à contrainte verticale, cette ligne est tracée verticalement de haut en bas. Dans les polices avec une contrainte diagonale (humaniste), la ligne entre les parties les plus fines d'une lettre est dessinée sous un angle.

Les polices de style ancien continuent dans le style humaniste de la contrainte diagonale, mais ont plus de contraste entre leurs traits les plus épais et les plus fins . Les polices de style ancien sont fréquemment 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.

Old Style Type

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

… 

… 

… 

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

 body {
couleur de fond: # 6e2838;
font-family: "old-style";
couleur: # 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 définit 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 a appelé «la pire voiture jamais faite:»

J'ai besoin du grand logo Trabant pour rester 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 1: 1 pour les carrés, 1,618: 1 est le nombre d'or et 16: 9 pour les supports grand écran.

Une technique populaire pour le maintien du rapport intrinsèque a été développé en 2009 par Thierry Koblentz et il utilise un rembourrage appliqué sur un élément ou un pseudo-élément à l'intérieur. Différents pourcentages de remplissage créent des ratios différents:

 1: 1 100%
4: 3 75%
16: 9 56,25%

Ce logo est circulaire, donc la boîte qu'il occupe doit toujours rester carrée. J'ajoute un pseudo-élément a: before et définit son remplissage supérieur à 100%:

 header: before {
contenu: "";
bloc de visualisation;
rembourrage: 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 {
affichage: grille; }

en-tête: avant,
en-tête img {
grille-colonne: 1;
grille-ligne: 1; } 

Pour centrer ces images horizontalement et verticalement – peu importe leur largeur ou leur hauteur – je les aligne et les justifie toutes les deux au centre:

 header {
align-items: centre;
justifier-contenu: centre; } 

Enfin, pour fusionner la photographie de mon Trabant et son logo SVG, j'ajoute un mode de mélange-mélange avec une valeur de superposition:

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

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

 Bougie d'allumage  avec un toit 
 VEB Sachsenring Automobilwerke Zwickau 
 Fabriqué en Allemagne de l'Est 
 1957–1990 
 

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

 h1 {
taille de police: 4.875rem;
hauteur de ligne: 1,1;
alignement du texte: à droite; }

h1 span {
couleur: # f85981; } 

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

 #banner p {
taille de police: 1.424rem; }

#banner p: nième type (2) {
taille de police: 1rem; } 

Avec ces styles de fondation en place pour chaque taille d'écran, j'introduis la disposition pour les écrans de taille moyenne en ajoutant une grille symétrique à trois colonnes avec trois lignes de taille automatique:

 @media (min-width: 48em) {

corps {
affichage: grille;
grille-modèle-colonnes: répéter (3, 1fr);
grille-modèle-lignes: auto auto auto;
rembourrage: 4rem; }
} 

Les divisions en-tête et bannière remplissent toutes les deux toute la largeur de ma mise en page. Je place la bannière dans la première ligne, même si elle arrive en deuxième position dans mon en-tête HTML:

,
#banner {
grille-colonne: 1 / -1; }

entête {
quadrillage: 2/4; }

#banner {
grille-ligne: 1; } 

L'ajustement de la taille des caractères pour maintenir une hiérarchie équilibrée est l'un des aspects les plus satisfaisants du développement de conceptions à travers 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 {
taille de police: 8rem;
hauteur de ligne: 1,1;
alignement du texte: centre; }

#banner p {
taille de police: 2.027rem; }

#banner p: nième type (2) {
taille de police: 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 même largeur:

 @media (min-width: 82em) {

corps {
grille-modèle-colonnes: répéter (6, 1fr);
écart grille-colonne: 2vw;
grille-écart de ligne: 2vh; }
} 

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

 header {
grille-colonne: 1/4;
quadrillage: 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 effectivement du DOM à des fins de style:

 #banner {
affichage: contenu; } 

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

 #banner h1 {
grille-colonne: 4 / -1;
grille-ligne: 1;
taille de police: 6.5rem; }

#banner div {
grille-colonne: 5 / -1;
grille-ligne: 2; }

corps> p {
grille-colonne: 5 / -1;
grille-ligne: 3; } 

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

 footer {
grille-colonne: 4;
grille-ligne: 3; } 

Fusionner l'illustration et la photographie avec des formes audacieuses et une typographie claire était un aspect déterminant de Huber. style signature. En choisissant des polices 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 sensation classique.

Transitional Typefaces

Au XVIIe siècle, The Age of Enlightenment é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 fut Romain du Roi, une police de caractères avec des lettres basées sur une grille de 2 304 carrés.

Romain du Roi était plus précis dans sa conception que la plupart des polices de caractères précédentes et présentait des traits avec un contraste plus net entre les épais et les fins. Il a influencé les concepteurs 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éoclassiques) qui tiraient parti de nouvelles encres et de papiers de meilleure qualité.

Dans les polices de caractères transitionnelles, les lettres minuscules ont une contrainte verticale ou presque verticale. Les empattements de tête sur les lettres ascendantes comprenant «b», «d», «h» et «l» sont généralement plus horizontaux. Les extrémités de nombreux traits sont marquées par des bornes à billes à la place des angles ou des contours ou des empattements.

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

Identifying Modern Typefaces

Alors que les polices Old Style et Transitional ont rehaussé la contraste entre les traits épais et fins, les polices modernes ont poussé cette caractéristique à l'extrême. Le terme Modern peut être trompeur car la première police de caractères 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 sont nommées d'après.

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 comportent également des empattements non crochets avec des angles vifs entre les épaisseurs et les minces, 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 remplies de magazines de mode, vous constaterez qu'ils utilisent souvent les 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. avec des personnalités très différentes.

Design Modern Typefaces

Je n'ai besoin que de trois éléments structurels pour implémenter mon prochain design inspiré de Huber; un en-tête qui contient les deux logos Trabant, une division de bannière et mon contenu principal:

 
 <svgv… 


… 


… 
… 
 

Ces styles de fondations 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 du Trabant avec un dégradé linéaire pour ajouter de la profondeur à cette conception:

 body {
couleur de fond: # 34020B;
background-image: url (body.svg),
gradient linéaire (180deg, # 6E2838 0%, # 98304D 21%, # 34020B 99%);
famille de polices: "moderne";
couleur: #fff; } 

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

 body {
position de fond: 50vw 2rem, 0 0;
background-repeat: pas de répétition, répétition-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:

 Le pire 
voiture
jamais fabriqué 

 VEB Sachsenring Automobilwerke Zwickau 
 Fabriqué en Allemagne de l'Est 
 1957–1990 

 

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

 #banner h1 {
largeur max: 50vw; } 

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

 #banner h1 {
taille de police: 4rem;
hauteur de ligne: 1;
transformation de texte: majuscule; }

#banner h1 span {
couleur: # f85981; }

#banner p {
taille de police: 1.424rem; }

#banner p: nième type (2) {
taille de police: 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:

 Réservoir de carburant à deux temps 
 6,3 ​​ gallon 


… 
… 
 

Cet ordre HTML est logique 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é. Je retourne l'ordre de mon titre et de mon paragraphe en spécifiant les éléments de liste en tant que conteneurs flexibles et en changeant leur direction par défaut de ligne en colonne inversée:

 li {
affichage: flex;
flex-direction: colonne-inverse; }

ul p {
taille de police: 1,802rem; }

ul p {
couleur: # 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 dans de nombreuses polices de caractères modernes ont des courbes distinctives et d'autres caractéristiques qui peuvent contribuer à la personnalité d'un design lorsqu'ils sont utilisés dans des tailles plus grandes.

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

 ul p b {
taille de police: 4.5rem;
espacement des lettres: .05em;
hauteur de ligne: .8;
couleur: #fff; } 

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

 Prix officiel d'État 
 7 450   DDM 
 

Pour moi, chaque élément typographique – aussi petit soit-il – est l'occasion d'expérimenter des traitements de type intéressants. L'encombrement minuscule de ce petit élément le rend parfait pour une rotation en position verticale, de sorte qu'il se trouve parfaitement à côté du grand chiffre:

 ul p small {
taille de police: .889rem;
alignement du texte: à droite;
transformer: tourner (180deg);
mode d'écriture: vertical-rl; } 

Ce niveau de détails typographiques peut sembler excessif pour les styles de fondation, mais je mets autant d'attention à la conception de texte pour les petits écrans que je le fais dans une mise en page pour les plus grands.

Cela signifie également que je n'ai qu'à effectuer 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 30rem à partir du haut:

 @media (min-width: 48em) {

corps {
background-image: url (body.svg),
gradient linéaire (180deg, # 6E2838 0%, # 98304D 20%, # 34020B 100%);
position de fond: 50% 30rem, 0 0; }
} 

L'introduction de la mise en page sur les é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 {
affichage: grille;
grille-modèle-colonnes: 1fr 1fr;
align-items: centre;
largeur: 100%; } 

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

 en-tête> *: premier enfant {
alignement du texte: gauche; }

en-tête> *: dernier enfant {
alignement du texte: à droite; } 

Le fait de surdimensionner un titre est un moyen fabuleux de présenter les détails complexes de nombreuses polices modernes. J'augmente donc sa taille et j'utilise l'espace blanc que j'ai ajouté à mon HTML pour diviser ses mots en trois lignes:

 #banner h1 {
espace blanc: pré;
largeur max: 100vw;
taille de police: 8rem; } 

Alors que sur les petits écrans, les paragraphes de la bannière suivent le titre comme ils le font dans le HTML, je veux 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 supérieure et gauche basées sur le texte permettent à ces paragraphes de rester à la bonne position lorsque le titre change de taille:

 #banner {
position: relative;
marge en bas: 25rem; }

#banner div {
position: absolue;
haut: 8.25em;
gauche: 20em; } 

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

 ul {
affichage: flex; }

li {
flex: 1; } 

Adapter un design pour plusieurs tailles d'écran est un défi que j'apprécie vraiment. 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) {

corps {
affichage: grille;
grille-modèle-colonnes: répéter (3, 1fr);
écart grille-colonne: 2vw; } 

Les éléments de cette conception ne se chevauchent pas, donc j'utilise 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 {
zones de modèle de grille:
"en-tête d'en-tête."
"données de bannière de bannière"
". . principale"; } 

Je place ces éléments en utilisant des noms de zone qui me permettent de changer où ils apparaissent dans ma mise en page sans modifier leur position dans mon HTML:

 en-tête {
grille-zone: en-tête; }

#banner {
zone de grille: bannière; }

principale {
affichage: contenu; }

main> p {
zone de grille: principale; }

ul {
bloc de visualisation;
zone de grille: données; } 

Spotting Slab Serif (Egyptian) Polices de caractères

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 attirer l'attention. Une caractéristique déterminante d'un empattement Slab est un empattement souvent sans parenthèse 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 à empattement Slab. Alors que les formes de lettres de nombreux empattements Slab ont une largeur de ligne uniforme, le style Clarendon rompt la convention 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 supports incurvés.

Les terminaux à billes d'Archer lui donnent un aspect distinctif qui est populaire auprès des concepteurs sur papier et en ligne. Sentinel, également par Hoefler & Co., a été utilisé par Barack Obama dans sa campagne de réélection de 2012. Comme Archer, il est disponible dans une variété de poids et comprend un italique.

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

Dalton Maag est la fonderie de types 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, surtout en italique. Vous devriez être familier avec Mokoko, également par Dalton Maag, car je l'ai choisi pour les titres et les titres de cette série.

Alors que Barack Obama a choisi son empattement Slab de Hoefler & Co., son collègue 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 poids avec des italiques correspondants.

Les empattements de dalle exigent l'attention

Le développement de ma conception finale nécessite très peu d'éléments structurels, malgré sa complexité visuelle. Les éléments que j'ai choisis devraient 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 de 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 incurvé:

… 
… 

… 



 

Le rapprochement de trois de ces éléments forme une introduction graphique à ce design. Je commence par les styles de fond de teint qui incluent la couleur et présente la police serif slab:

 body {
couleur de fond: # 8a8988;
famille de polices: "slab";
couleur: # f7eed7; } 

Je limite la largeur de mon en-tête à 220 pixels et j'aligne de manière centrale son contenu:

 en-tête {
marge en bas: 2rem;
largeur: 220 px;
alignement du texte: centre; } 

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 en utilisant SVG. Ce graphique évolutif comprend deux chemins et pour s'assurer qu'il communique son contenu à tout le monde, j'ajoute une étiquette ARIA et un élément de titre à mon SVG:

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

 body> svg path {
opacité: 0,75; }

corps> chemin svg: nième type (1) {
remplissage: # f5e3B4; }

corps> chemin svg: nième type (2) {
remplissage: # ba0e37;
mix-blend-mode: multiplier; }

The final component in my introduction graphic is the vertical word “Duroplast,” the fibre-reinforced plastic used to make Trabant bodies. You can look for this element in my HTML, but you won’t find it, because I generate this content using a pseudo-element. I position the generated content, change its writing-mode to vertical, then rotate it by 180 degrees:

body {
position: relative; }

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

As this pseudo-element effectively follows the flow content, it appears above it in the stacking order, making it possible to blend it with other elements and add extra depth to this design:

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

The number of Trabants produced during its lifetime is developed using a lower-level heading, followed by two paragraphs:

Units produced
1957–1990
3,096,999

The visual order of these elements is different from that HTML, and I use Flexbox to change their order within their parent division. First, I change the flex-direction from the default row to column:

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

Then, I use the order property to reorder the three elements, placing my headline last:

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

Finally, I increase the size of my second paragraph to match the list-item numbers below. This gives the impression this content and the unordered list which follows are part of the same element:

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

Space on small screens may be at a premium, but that doesn’t mean we can’t be bold with our typography. As screens become larger, there are even more opportunities to be adventurous with typographic designs.

I introduce layout to medium-size screens by applying grid values to the body element to create six symmetrical columns and four automatically sized rows:

@media (min-width: 48em) {

body {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, auto); }
}

Then, I place my header and banner division into the first row using line numbers. My banner occupies the first three columns, while the header fills the last three:

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

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

I place the now enormous numerals onto my grid and lower their z-index value so they appear behind other elements in my layout:

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

I replace the previous :after pseudo-class positioning with grid values and increase its font-size to fill more of the space available:

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

Despite being built on a symmetrical grid, leaving some columns empty creates an unusual asymmetrical design:

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

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

I then increase the size of my type overall to make a big impression on medium-size screens:

#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; }

SVG Text On Path

One of the most exciting reasons to use SVG for rendering text is so it follows a path, a design device which isn’t possible using CSS alone. My curvy SVG includes a rounded path, plus a text element which contains my content. I enclose this text within an SVG textPath element and use its href attribute value to link it to the ID of the path above:

I don’t want this curve to appear on small screens, so I change its parent division’s display value to none in my foundation styles. Using a min-width media query, I then revert that value to block to reveal it for medium-size screens, placing it onto my grid and increasing its z-index value. This brings it forward in the stacking order:

#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); }
}

With this text in place, I use familiar font-size and text-transform styles, followed by SVG fill and text-anchor properties which sets my text from the start of its path:

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

My confident typography choices demand I’m also courageous with my choice of layout for larger screens. The six symmetrical columns and four rows I chose earlier offer the potential to place my elements in any number of ways.

With all my typography styles already defined, all that remains is to move my elements into new positions which place the header, banner division, and unordered list alongside my now gigantic numerals:

@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; }
}

NB: Smashing members have access to a beautifully designed PDF of Andy’s Inspired Design Decisions magazine and full code examples from this article. You can also buy the PDF and examples from this, and every issue from Andy’s website.

Read More From The Series

(ra, yk, il)