Petite mise à jour du thème de ce blog pour y intégrer une nouvelle police : Classiq. Je profite de l’occasion pour revenir sur la composition de ce thème et expliquer les choix qui ont été faits.
Classiq est une interprétation linéale de Garamond. Elle a été dessinée par Yamaoka Yasuhiro, elle est le fruit de 20 ans de travail. Pas moins de trois variations sont disponibles (« regular », « choix », « queue ») et chacune propose des caractères alternatifs.
J’ai apprécié travailler avec cette police, les détails de chaque variation permettant en effet de nuancer la composition. Au final, je la trouve extrêmement versatile. Même si certains détails mériteraient d’être peaufinés, elle propose je pense une expérience de lecture satisfaisante.
Pourquoi ce changement ?
Si les fontes ne font pas le texte, elles demeurent tout de même un outil particulièrement puissant pour chorégraphier le phrasé. Ce changement est le résultat d’une réflexion de plusieurs mois dans ma quête d’une composition « de référence ». Pour rappel, voici les polices qui ont été utilisées depuis le début :
- Gill Sans + Palatino, cette dernière étant beaucoup trop fine sur écrans Retina/HD ;
- Journal + Computer Modern Variable, combinaison trop désuète mais ayant posé les bases de la composition existante ;
- Alegreya Sans, dont le gros bug de rendu sur Windows 10 a forcé le choix d’une nouvelle police.
Ce n’est pas la première fois que je connais des problèmes de rendu sur Windows (Bitter a également dû être remplacée à cause de Windows 8 par le passé). Je ne sais pas si ClearType est à remettre en cause ou si certains dessinateurs de fontes ne travaillent et vérifient que sur Mac mais, en tout cas, je ne peux que vous conseiller de vérifier sur un portable Windows avec un écran médiocre.
Pourquoi Classiq ?
Ayant découvert cette police il y a plusieurs années et, je l’admets volontiers, séduit par ce concept de Garamond sans serif, j’ai toujours eu envie de l’utiliser. Sa hauteur d’œil et ses contrepoinçons m’apparaissant trop petits en 16 pixels, je ne souhaitais simplement pas m’en servir pour les livres numériques. Ce changement contraint et forcé était donc l’occasion.
En outre, je n’ai jamais croisé de travaux web ou print utilisant Classiq. Je trouvais cela dommage, j’avais envie de corriger ce que je percevais comme une injustice.
J’aurais bien évidemment pu me tourner vers une police à empattements mais, sensible à la problématique d’accessibilité, une sans serif s’imposait (dyslexie).
Enfin, Classiq est relativement légère en comparaison d’autres polices : ses fontes, au complet, ne dépassent pas les 25 ko chacune.
Les choix
Les 3 variations sont utilisées dans la composition :
- « Choix » pour le corps du texte et les titres de niveau 3 ;
- « Queue » pour les italiques ;
- « Regular » pour les titres.
« Choix » me paraît le choix (sic) le plus sensé pour le corps puisqu’elle est la plus neutre du lot. Les formes de « Q » et « g » en particulier, me rappellent Georgia et Arial/Helvetica. On conserve toutefois la personnalité de Classiq ; disons qu’elle ne s’impose pas à travers ses arabesques.
Le choix de « Queue » pour l’italique sera peut-être sujet à critique. Nous avons là une fonte quasiment hybride, entre le serif et le sans, pas forcément des plus faciles à lire. Et c’est justement la raison de son utilisation : ralentir la lecture pour porter l’emphase, comme si l’on devait insister sur chaque syllabe à l’oral. Si je ne renierai probablement pas ce choix pour l’italique d’emphase, son utilisation pour les citations pourra être revu en fonction des retours.
« Regular », quant à elle, apporte de l’élégance aux (gros) titres ; elle se comporterait presque comme une display. « P », « Q » et « g » sauront affirmer sa personnalité.
« Choix » pour le modernisme et la (relative) neutralité, « Queue » pour la filiation et l’emphase, « Regular » pour l’élégance et le classicisme. Voilà comment j’aime à décrire cette combinaison. Sachez néanmoins que je ne me formaliserai pas si vous ne la concevez pas ainsi.
La composition
Il n’est peut-être pas inutile d’aborder les choix de composition pour « documenter » la démarche dans sa globalité.
- Les couleurs pour le fond et le texte sont
#fffet#444pour garantir un bon contraste, mais pas trop (un contraste trop grand pouvant se révéler inconfortable). - Le contenu est enveloppé dans un conteneur de maximum 60em de large. Après moult tests, C’est la valeur qui permet de gérer le drapeau au mieux tout en conservant une longueur de ligne raisonnable.
- La taille de corps est de 21 pixels, pour compenser la hauteur d’œil de Classiq et proposer une expérience satisfaisante sur mobile.
- L’interlignage est de 1.5, ce qui est un compromis bien connu des typographes web.
- Les paragraphes sont en bloc parce que mon style d’écriture (de billets) est très morcelé. Leur marge est égale à l’interlignage pour soigner le rythme vertical (instaurer un motif donc de la répétition).
- Les titres de niveaux 2 ont une marge supérieure double, pour bien marquer le passage à une nouvelle section. On cherche ici à dissocier à l’aide de l’espace blanc, pour casser le motif instauré à l’aide des paragraphes.
- Les titres de niveau 3 ont une marge simple puisqu’ils viennent préciser ou approfondir la logique dans la section. Des bordures viennent néanmoins marquer une pause.
- Les listes à puces utilisent des tirets, ce qui est une tradition française que d’autres cultures ont parfois bien du mal à comprendre.
- Les liens sont indiqués par un soulignement (au contraste très faible) et un astérisque – je considère ici les liens externes comme des notes de bas de page.
- La ligne horizontale est un astérisme modernisé, qui marque un changement thématique. D’aucuns y verraient une ellipse, ce qui est l’objectif.
- Les citations sont indiquées par des guillemets courbes avec opacité pour compenser leur poids visuel. Les sources de la situation sont indiquées en rouge, flottantes à droite, pour bien les faire ressortir au scan de la page.
- Le « header » est pensé pour mettre en avant la relation entre l’image et le titre. Les paragraphes visibles à l’écran sans scroller sont pensés comme une précision.
- Un seul détail est revu pour les petits écrans : l’astérisque est centrée.
Je ne prétends bien évidemment pas que cette composition soit parfaite, j’y vois simplement une proposition cohérente et susceptible de fonctionner dans des cas divers et variés (scan, lecture approfondie, mobile, grand-écran, &c.).
Quelle morale ?
Les choses les plus simples sont toujours les plus difficiles.
Composer du texte, ce que nous faisons tous sans forcément y réfléchir dans nos outils d’écriture, n’est pas chose si aisée. Si je me laisse le loisir d’adapter cette composition à mes besoins (articulation et phrasé), il ne faut pas oublier que l’équilibre prévaut entre le texte et son lecteur.
En ce sens, il me semble que Classiq puisse servir ce compromis : basée sur Garamond, elle rappelle le livre imprimé ; sans-serif, elle permet de résoudre bien des problématiques « écran ». En espérant donc qu’elle pourra vous inviter puis vous accompagner à la lecture.
Et de mon côté, elle ressemble bien à une fondation suffisamment solide pour continuer à construire 20simple.