Polices de caractères chromatiques et design plat
L'engouement croissant du web pour le design plat a conduit à un rejet rapide des artifices comme les ombres portées, en faveur d'un look plus propre, basé sur la forme. Mais cela laisse le concepteur avec un problème: comment est-ce que le style est dynamique tout en respectant les principes du design plat?
L'une des solutions réside dans le regain d'intérêt pour les caractères chromatiques. Utilisées de manière très répandue au XIXe siècle dans les blocs de bois, les faces de type chromatique utilisent plusieurs couleurs pour définir différentes zones. Il s’agit de l’approche opposée au design de logo moderne, dans lequel nous avons appris que les formes doivent fonctionner sur un seul ton.
L'avantage des dessins chromatiques est qu'ils ajoutent de la profondeur, de l'emphase et du caractère. sans la nécessité d'une décoration de texte plus intrusive telle que des ombres.
L'un des meilleurs exemples de ceci est Sodachrome. Conçu par Dan Rhatigan et Ian Moore, Sodachrome se compose de deux polices distinctes. une dans laquelle les empattements pointent vers la gauche et une dans laquelle ils pointent vers la droite. Définies individuellement, les deux polices semblent nettement déséquilibrées, bien que placées l'une sur l'autre dans des couleurs différentes, elles produisent un empattement attrayant. L'avantage supplémentaire de Sodachrome est que le chevauchement entre les deux couleurs crée une troisième face, un sans-serif moderne, au cœur du design. L'intérêt visuel de Sodachrome est créé par l'interaction entre ces trois conceptions différentes.
Sodachrome par Dan Rhatigan et Ian Moore.
Développer des polices chromatiques à utiliser sur le Web représente un véritable défi. Considérant que des dessins tels que Lisa Lonergan's Knoxville suivre des contours romains très traditionnels, des dessins tels que Le pigment de Mark Frömberg - qui comporte 600 caractères - ne rentre pas facilement dans les formats vectoriels.
Knoxville par Lisa Lonergan.
Pigment par Mark Frömberg.
Les caractères, même les grunge-faces, sont conçus comme un contour. Les contours peuvent être mis à l'échelle, colorés et espacés selon le choix du concepteur. OpenType (OT), TrueType (TT), Web Open Font Format (WOFF) et presque tous les autres formats disponibles fonctionnent de cette manière. Cela signifie qu'un dessin chromatique ne peut pas être spécifié dans un seul fichier. Cependant, à condition que la police de caractères chromatique soit livrée sous la forme de deux fichiers de police distincts, nous pouvons facilement les superposer.
CSS nous permettra même de dupliquer le titre dans les styles en utilisant la propriété content , évitant de doubler le contenu du balisage, ce qui aurait un impact négatif sur le référencement et l'accessibilité.
Le format de base est le suivant:
Any old title
Et dans le CSS:
h1{font-family:"Some Chromatic Font A";color: rgba(50, 0, 0, 0.5);position:relative;}h1:after{font-family:"Some Chromatic Font B";color: rgba(0, 50, 50, 0.5);position:absolute;left:0;content:"Any old title";}Pour l'instant, le manque de polices chromatiques produites pour une utilisation sur le Web est susceptible de signifier que leur utilisation est une étape trop éloignée pour des sites tels que les blogs qui nécessitent de nombreux en-têtes. Mais pour les logos, ou les en-têtes qui changent rarement, où l'utilisation d'une image est acceptable, les caractères chromatiques sont une manière vibrante et attrayante de définir un type qui conserve une esthétique plate.
Avez-vous travaillé avec des caractères chromatiques? Quelles difficultés techniques avez-vous rencontrées? Faites le nous savoir dans les commentaires.