The Proportional Web — feuille de style web pour une typographie proportionnelle

 (owickstrom.github.io)
1 points par GN⁺ 3 시간 전 | 1 commentaires | Partager sur WhatsApp
  • The Proportional Web est un design qui reprend certains principes de The Elements of Typographic Style de Robert Bringhurst et les applique au navigateur ; c’est à la fois le successeur proportionnel de The Monospace Web et une feuille de style réutilisable
  • Il utilise Alegreya et Alegreya SC pour le texte courant, Courier Prime pour le code, et harmonise de façon cohérente les tailles ainsi que le rythme vertical à partir d’une taille de police racine de 16px, des rem et d’une hauteur de ligne de 1.2rem
  • Il applique la justification en s’appuyant sur les word-break, text-wrap et hyphens des navigateurs modernes, tout en recommandant d’utiliser text-align: left si l’espacement des mots ou les rivières de blanc deviennent problématiques
  • Centré sur un HTML5 sémantique, il stylise les titres, citations, figures, tableaux et blocs de code, avec des notes marginales placées dans la marge de droite sur grand écran, puis transformées en paragraphes inline ornés sur petit écran
  • Il convient aux documents centrés sur la prose comme les livres, journaux, blogs, manuels ou wikis, n’est pas recommandé pour les applications web dynamiques, et peut être utilisé en téléchargeant les sources GitHub pour ajouter CSS et JavaScript ou avec Pandoc

De The Monospace Web au proportionnel

  • The Monospace Web s’est diffusé plus largement que prévu, au point d’être adopté pour des blogs personnels et des interfaces d’application
  • The Proportional Web est conçu comme le successeur spirituel de ce projet, en remplaçant la police à chasse fixe par une police proportionnelle tout en restant librement réutilisable
  • Le projet a commencé après la lecture de The Elements of Typographic Style de Robert Bringhurst, avec l’idée de reproduire dans le navigateur la mise en page et la typographie du livre
  • Contrairement à l’imprimé, le web n’a pas de taille de page fixe et constitue aussi une plateforme programmable, ce qui rend l’application des mêmes règles plus difficile
    • L’auteur le publie donc de manière à permettre à chacun de reprendre les éléments jugés utiles ou esthétiques
  • Pandoc a servi à générer le HTML, mais la feuille de style peut fonctionner dans d’autres environnements avec peu d’adaptations

Système typographique

  • Le design s’appuie sur le principe de Bringhurst consistant à choisir une seule famille polyvalente plutôt que de mélanger plusieurs polices
  • La famille Alegreya est répartie selon les usages
    • Alegreya Regular est utilisée pour le corps du texte et les titres de niveau 3
    • Alegreya SC est utilisée pour les titres de niveau 1 en capitales de style titre, les titres de niveau 2 en petites capitales, ainsi que pour les abréviations inline comme HTML
  • Courier Prime est utilisée pour les fragments de code à chasse fixe

Unités relatives et rythme vertical

  • Toutes les tailles sont définies en rem à partir d’une taille de police racine de 16px
  • Les tailles standard sont 0.75·0.875·1·1.125·1.25·1.375·1.5·2·2.5·3·4rem, ce qui correspond à 12·14·16·18·20·22·24·32·40·48·64px
  • En modifiant uniquement la taille de police racine, on peut agrandir ou réduire l’ensemble du design
    • Par exemple, lorsque la largeur de l’écran est inférieure ou égale à 480px, on peut faire passer font-size de :root à 14px
  • La hauteur de ligne est de 1.2rem, et l’objectif est d’aligner verticalement tous les éléments sur des multiples de cette valeur
  • Sans pousser le principe aussi loin que The Monospace Web, l’ensemble conserve un rythme d’alignement commun à tout le document

Une justification mise en œuvre dans les navigateurs modernes

  • Comme dans le livre de Bringhurst, le corps du texte est composé en justifié plutôt qu’en fer à gauche
  • Même si la justification reste souvent déconseillée sur le web, l’auteur estime qu’elle mérite d’être retentée grâce aux améliorations des navigateurs
  • Les retours à la ligne et la césure sont contrôlés avec les propriétés CSS suivantes
    • word-break
    • text-wrap
    • hyphens
    • hyphenate-limit-chars, qui contrôle l’application de la césure
  • La justification comporte le risque d’un espacement excessif entre les mots ou de rivières dans les paragraphes
  • Dans ce document, la combinaison longueur de ligne, taille de police et contenu donne des résultats satisfaisants, avec insertion manuelle de césures discrétionnaires pour certains mots difficiles
  • Si cela ne convient pas au contenu, il vaut mieux passer à text-align: left

Retrait de paragraphe et couleur

  • Les paragraphes consécutifs reçoivent un retrait de 3ch, soit la largeur de trois caractères 0
  • Cette méthode aide à repérer plus facilement le début et la fin des paragraphes ; elle est utilisée dans l’imprimé depuis au moins 500 ans
  • Sur le web, on préfère généralement un espacement vertical entre les paragraphes plutôt qu’un retrait, mais le retrait traditionnel reste un choix valable
  • Les couleurs sont limitées à un fond blanc et un texte noir
    • L’auteur privilégie cette composition minimaliste comme base pour les documents centrés sur la prose
    • En économisant la couleur, on peut attirer l’attention du lecteur sur les éléments les plus importants, comme les diagrammes destinés à transmettre des données complexes

HTML sémantique, titres et emphase

  • Hormis quelques classes supplémentaires, l’ensemble repose presque entièrement sur un balisage HTML5 sémantique
  • Les titres sont stylisés sur trois niveaux
    • h1 : titre principal au niveau du chapitre
    • h2 : titre de section
    • h3 : titre de sous-section
  • L’élément <em> est affiché en italique, conformément à l’usage attendu

Séparateurs et détails repliables

  • Le livre de Bringhurst ne donne pas d’instructions claires sur les séparateurs horizontaux, qui sont donc utilisés ici comme élément décoratif
  • Le séparateur emploie le symbole U+2767 Rotated Floral Heart Bullet du bloc Unicode Dingbats
  • L’élément <details> permet de masquer des informations dépliables en cliquant sur leur libellé

Notes marginales et noms propres

  • Les notes marginales utilisées par Bringhurst sont implémentées avec <aside> en HTML
  • Quand l’écran est suffisamment large, elles apparaissent dans la marge de droite, alignées sur le haut du paragraphe précédent
  • Sur petit écran, elles deviennent des paragraphes inline décorés afin de rester responsives
  • Les noms propres et dénominations officielles marqués avec la classe .canonical-name sont rendus en petites capitales, comme dans les exemples de Bringhurst

Citations et figures

  • Les citations en bloc sont composées d’un bloc en retrait et de guillemets autour du texte
  • Le pied de citation contient l’auteur, l’œuvre et l’année
  • Les images et leurs légendes sont placées respectivement dans les éléments <figure> et <figcaption>
  • Le nom de l’auteur et le titre de l’œuvre dans les figures utilisent, comme les citations, des petites capitales et de l’italique, avec le même système de retrait

Listes et tableaux

  • Les listes à puces et les listes ordonnées sont prises en charge, y compris la structure imbriquée des listes ordonnées
  • Les en-têtes de tableau sont fortement distingués à l’aide d’étiquettes en petites capitales et de bordures
  • Le reste du design des tableaux est volontairement simple et s’appuie surtout sur les espacements plutôt que sur l’ornement

Représentation du code

  • L’ensemble du design vise davantage les documents centrés sur la prose que la documentation technique centrée sur le code, mais les blocs de code et le code inline restent faciles à lire
  • Le code utilise Courier Prime, qui apporte une nostalgie de machine à écrire tout en s’accordant avec Alegreya et l’atmosphère générale du design
  • Les variables de style par défaut incluent la police, la hauteur de ligne, l’épaisseur de bordure, la couleur du texte et la couleur de fond
    • --font-family: "Alegreya", serif
    • --line-height: 1.2
    • --border-thickness: 1.5px
    • --text-color: #000
    • --background-color: #fff

Usages adaptés et licence

  • Il s’agit d’un design pour des documents web centrés sur la prose comme des livres, journaux, blogs ou manuels
  • Il peut servir de base à un site personnel, à un projet spécifique ou à un wiki plus vaste
  • Il risque de ne pas convenir à des applications web dynamiques
  • Il est possible de copier les parties souhaitées ou de forker le projet pour le modifier, à condition de fournir une attribution appropriée
  • Cette condition peut être respectée en conservant les informations de licence dans l’en-tête des fichiers source

Installation et utilisation avec Pandoc

  • Pour démarrer rapidement, il suffit de télécharger les sources GitHub et de les placer dans le répertoire the-proportional-web du projet
  • Dans le head du HTML, il faut ajouter les fichiers suivants
    • the-proportional-web/index.min.css
    • the-proportional-web/index.js
  • Avec Pandoc, on peut convertir du Markdown en HTML en définissant des arguments comme la profondeur de la table des matières, la numérotation des sections, la CSS, le JavaScript ou la désactivation de la coloration syntaxique
  • Si une coloration syntaxique est nécessaire, on peut envisager un modèle personnalisé tel que celui utilisé pour cette sortie HTML
  • Dans ce cas, la CSS incluse par défaut par Pandoc doit être supprimée du modèle personnalisé

Projets typographiques liés

  • Le projet de Richard Rutter, The Elements of Typographic Style Applied to the Web, reprend largement la structure du livre de Bringhurst tout en adaptant ses conseils au web design
    • Son périmètre est beaucoup plus large que celui de The Proportional Web et met l’accent sur la transmission de l’information elle-même
    • The Proportional Web, à l’inverse, tient davantage de la vitrine montrant directement ses idées et sa feuille de style
    • Le site concerné présentait sur téléphone des écarts de taille de police importants qui le rendaient difficile à lire ; il semble exister depuis au moins 20 ans et ne pas avoir été mis à jour depuis environ 8 ans
    • The Proportional Web a beaucoup travaillé à préserver à la fois réactivité et cohérence malgré les variations de taille d’écran, et les deux projets peuvent coexister car leurs objectifs diffèrent
  • Practical Typography de Matthew Butterick est une ressource pratique qui couvre avec suffisamment de détail presque tous les sujets nécessaires au grand public ou aux ingénieurs proches de la typographie
  • Tufte CSS est un travail influent et largement reconnu ; même si l’on peut être en désaccord avec certains détails de composition, l’ensemble reste solide

Portée et outils de production

  • Le projet ne reprend pas l’ensemble de la méthodologie de Bringhurst, mais seulement certaines idées adaptées au web
  • Les outils suivants ont été utilisés pour produire le document
  • Les idées de design et la mise en page concrète empruntent largement à The Elements of Typographic Style de Robert Bringhurst

À lire aussi

1 commentaires

 
GN⁺ 3 시간 전
Avis sur Lobste.rs

  • Il faut éviter de définir la taille de police en pixels comme ci-dessous, car cela nuit à l’accessibilité

    @media screen and (max-width: 480px) {  
  :root {  
    font-size: 14px;  
  }  
}
    • L’unité CSS px ne correspond plus à un pixel physique en 1:1, et signifie max(1/96in, 1 pixel)
    • La méthode que je préfère consiste à définir le font-size de :root à 0.625 pour faire correspondre 1rem à 10px, puis à utiliser 1.6rem ou 2rem sur body afin que toute la page en hérite
      Pour les polices, il ne faut pas utiliser px, et surtout pas wv ni wh, mais rem ou em ; pour les mises en page qui n’ont pas besoin de s’agrandir avec la taille du texte, on peut surtout utiliser px, wv, wh, etc.
      Pour que les utilisateurs malvoyants puissent utiliser la fonction de modification de la taille du texte du navigateur, il est fortement recommandé d’utiliser em ou rem plutôt que px pour les polices
      Il faut éviter wv ou wh pour la taille du texte, car sur desktop, lors d’un zoom avec Ctrl-+, innerWidth et innerHeight diminuent dans la même proportion, donc la taille du texte reste identique. Un usage mixte subtil comme font-size: calc(1.6rem + 2wv) pour agrandir légèrement uniquement sur les grands écrans peut en revanche convenir
    • Mieux vaut ne pas modifier la taille de police par défaut du navigateur. C’est acceptable pour un simple document texte, mais sur la plupart des sites web, cela peut casser la mise en page
      Concevoir un site complexe capable de gérer correctement des tailles de police arbitraires est en pratique très difficile, et les contraintes de design deviennent énormes
      En cas de handicap visuel ou d’autres besoins d’accessibilité, il faut plutôt modifier le niveau de zoom par défaut du navigateur. Le site n’a alors qu’à gérer normalement des tailles de viewport arbitraires via un design responsive classique, ce qui est réaliste
      Autrefois, les navigateurs permettaient aux utilisateurs d’ajuster directement la taille de police, mais l’expérience était mauvaise, et ils sont passés il y a des décennies à un zoom de page complet

  • Je me demande si cela a vraiment été conçu pour rester lisible aussi sur mobile

  • C’est impressionnant de voir à quel point cela reproduit bien la typographie du livre de Bringhurst
    Cela dit, on sort parfois de la grille uniforme à hauteur de ligne fixe. Par exemple, si un texte en Courier se retrouve mêlé sur une ligne, la hauteur de ligne augmente légèrement

    • Pour éviter cela, il faut définir line-height: 1 sur <code>. Je ne sais pas s’il existe un consensus disant que 0 serait préférable
      De plus, pour suivre The Elements of Typographic Style, il faudrait placer les puces et les numéros des listes dans la marge, mais je ne me souviens plus si c’était une exigence explicite

  • Le résultat de cette exploration des livres classiques de typographie est excellent, et je suis content de voir davantage de design fondé sur les contraintes en ligne

  • Dans ce domaine, http://lamb.cc/typograph/ reste encore pour moi la référence absolue, malgré sa sortie en 2009

  • Le dimensionnement relatif est excellent, mais écraser la taille de police racine me semble être une erreur
    Un site devrait respecter les réglages de taille de police de l’utilisateur, et un système de tailles relatives conçu autour des proportions et des relations s’accorde bien avec cela

  • Il est facile de prétendre que seul le texte compte et que la manière de le présenter importe peu, mais une mise en page soigneusement conçue donne à un billet de blog, un roman ou un article une allure bien plus professionnelle
    L’excellente composition de page est en train de devenir un art quelque peu oublié, donc ce genre de tentative fait plaisir à voir
    J’ai adopté tuft.css très tôt, et même si cela a demandé des ajustements pendant des années, je l’ai très bien utilisé jusqu’à aujourd’hui. Cela semble meilleur sur certains points, mais pas au point de me faire changer