Catégories
Astuces et Design

Conception Web lourde typographique

La tendance la plus marquante de cette année peut être résumée par le terme: TYPOGRAPHY-HEAVY DESIGN. Des améliorations récentes en CSS liées à la manipulation et à l'animation de textes nous permettent d'expérimenter avec des caractères et des paragraphes d'une manière jamais vue auparavant dans la conception web, et voit la typographie jouer un rôle central dans la conception de la mise en page.

Le désir de s'éloigner des mises en page GRID BASE classiques, est enfin devenu une réalité, proliférant une utilisation beaucoup plus créative du texte et nous permettant d'adopter des compositions plus proches du EDITORIAL DESIGN. À venir, nous examinerons les principales caractéristiques qui représentent l'utilisation de la typographie dans la scène de conception Web actuelle. La structure physique du type est un élément graphique de premier plan dans les compositions, et incorporant typographie avec une grande personnalité, surtout empattement et afficher polices, ajoute du rythme et du contraste.

📗 Consultez notre nouveau livre Hot Right Now Vol. 3, qui plonge dans les dernières tendances du design visuel, une lecture incontournable pour les créatifs numériques.

Mélanger des polices de caractères avec des qualités et des structures très différentes est une autre des pratiques fondamentales de la tendance. Vous pouvez voir comment serif, sans-serif, des polices de caractères décoratives avec différents poids, largeurs et styles, et surtout contour les styles fonctionnent maintenant tous ensemble. Les paragraphes ont acquis une valeur esthétique et sont une partie essentielle de la conception, la taille de la police dans les paragraphes étant exceptionnellement grande. Ils sont décorés avec une grande variété de Styles CSS et des éléments graphiques comme des icônes, des emojis et des images affichés en ligne avec le texte.

Nous assistons à une revisite des styles historiques, en émulant des compositions inspirées Style suisse, en utilisant des polices propres et modernes sans empattement, ainsi que des mises en page inspirées de compositions postmodernes avec des polices d'affichage puissantes.

La grande évolution du texte dans la conception Web

Polices variables, formes CSS, FlexBox et Grilles CSS modifient définitivement la façon dont nous mettons en page les textes et animent la typographie dans la conception web. Flexbox et CSS Grid nous donnent plus de contrôle sur la distribution des paragraphes et des colonnes, permettant la création de mises en page réactives complexes de manière cohérente et simple.

Formes CSS permet la transformation des dispositions de texte en dispositions non rectangulaires – en enveloppant le contenu autour de formes telles que des cercles, des triangles, des polygones ou des chemins personnalisés. Pendant longtemps, dans la conception Web, nous avons été contraints de contenir le texte dans des rectangles, ce qui peut être très limitant lorsqu'il s'agit de créer des mises en page complexes ou d'imiter des styles comme nous le voyons dans le monde éditorial.

Les formes CSS sont actuellement implémentées dans 91,38% des navigateurs, tandis que près de 100% des navigateurs implémentent FlexBox et CSS Grid. Enfin, les polices variables sont déjà implémentées à 87,58%, ce qui signifie que leur utilisation pourrait encore être légèrement problématique, en particulier sur les navigateurs mobiles.

Une Police variable OpenType est un fichier qui ne contient qu'un seul ensemble de contours de glyphes représentant le poids et la largeur normaux de la police. Les polices variables ont une série de propriétés définies qui nous permettent de modifier la largeur, le poids, l'inclinaison, la taille optique et d'autres caractéristiques établies par le concepteur de polices. De cette façon, nous pouvons avoir un seul fichier binaire contenant toutes les variantes de la famille de polices:

Regular, Light, Bold, Extended, etc … et bien sûr, toutes ces propriétés peuvent être "agrémentées" avec CSS pour créer des animations intéressantes.

La publicité pour la nouvelle API Google Font est une grande nouvelle, car l'API permettra l'utilisation de polices variables, y compris un ensemble varié de 10 empattements de haute qualité, sans, arrondis, dalles et à espacement fixe.

Typographie ludique

Il existe de nombreux exemples d'expériences animant différentes propriétés de polices variables ou utilisant des formes CSS pour encapsuler du texte dans une forme ou organiser les glyphes pour suivre un chemin.

Les expériences qui animent une police variable et divisent les caractères peuvent être vraiment impressionnantes mais elles posent des problèmes d'accessibilité, en particulier pour les lecteurs d'écran, car l'intégrité de la sémantique HTML est affectée par le texte divisé. Cependant, ce problème peut être très facilement résolu avec WAI-ARIA. Vous n'avez qu'à ajouter l'étiquette «aria-label» avec le texte complet, pour permettre aux lecteurs d'écran de trouver le contenu sémantiquement compréhensible. Même dans des projets très expérimentaux destinés à des designers professionnels, nous ne devons pas perdre de vue l'accessibilité, car parfois la solution est simple.

Typographie dans la collection de conception Web

Pour découvrir plus d'exemples de Typograpy audacieux et beau, consultez les sites Web de notre collection "Typography in Web Design" ou achetez notre nouveau livre Hot Right Now Vol. 3, qui plonge dans les dernières tendances du design visuel, une lecture incontournable pour les créatifs numériques.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *