Composer, c'est soustraire

Cette page est le spécimen typographique de Markit. Elle est deux choses à la fois : un essai qu'on peut réellement lire, et une liste qui passe en revue chaque élément de syntaxe Markdown pris en charge par l'éditeur. Les deux doivent tenir ensemble — un spécimen qui ne fait qu'empiler la syntaxe ne trompe personne, et seul un vrai texte suivi révèle la ligne qui flotte, la marge qui fuit, la couture maladroite entre lettres et chiffres.

Le critère de la typographie n'a jamais été « est-ce joli », mais « à quel point les yeux sont-ils fatigués après mille mots ». Cela sonne comme une évidence, et pourtant cela disqualifie la plupart des maquettes qui photographient bien.

Première règle de la page : soustraire

La seule chose, à l'écran d'un éditeur, qui appartienne vraiment au contenu, c'est le texte lui-même. Tout le reste — barres d'outils, panneaux latéraux, boutons, indicateurs d'état — lui dispute l'attention. D'où notre première règle : à l'état par défaut, les éléments d'interface sont invisibles, ou repoussés au bord du champ de vision.

En chiffres :

Les nombres du tableau s'alignent en chiffres tabulaires — petit détail, mais une colonne qui tangue oblige le lecteur à comparer au lieu de comprendre.

Le blanc groupe mieux que les filets

Découper le contenu avec des filets est le geste du débutant ; le découper avec de l'espace, celui du métier. Le filet laisse une arête dure sur la page, le blanc reste invisible :

• 16 px entre les paragraphes, pour que les phrases forment des groupes
• 24 px au-dessus d'un intertitre, 8 px en dessous — serré dessous, ample dessus colle le titre à ce qu'il gouverne
• 40 px au-dessus d'un grand titre, pour que l'œil marque une pause naturelle

Que cet étagement soit aplati — par une règle de margin uniforme, disons — et la page dégénère aussitôt en une chaîne de blocs équidistants, la hiérarchie ne tenant plus qu'au corps des lettres. La panne est silencieuse : les déclarations sont toujours dans le code, et tout semble sain au premier regard.

Polices : le latin et le CJC sont deux métiers

Le repli de police en CSS se fait caractère par caractère : l'ordre de la pile décide donc qui dessine votre latin. Placez une police CJC en tête, et camelCase, les numéros de version comme v1.522, chaque lettre de l'alphabet tomberont sur les glyphes occidentaux embarqués par hasard dans cette police — le plus souvent un accessoire.

L'ordre correct met la police latine en premier :

font-family: Charter, 'LXGW WenKai', -apple-system, 'PingFang SC', sans-serif;

Les deux ordres « tournent ». La différence ne se voit que dans les glyphes ; une revue de code ne l'attrape pas — il faut qu'un test monte la garde.

Un contre-exemple

L'extrait ci-dessous commet les deux erreurs classiques d'un coup — police CJC en tête, et style synthétique par-dessus :

// ⚠️ faux aux deux endroits
const stack = "'PingFang SC', Charter, sans-serif"  // CJC en tête : le latin part à la dérive
const emphasis = { fontStyle: 'italic' }            // une oblique n'est pas une italique

La vraie italique est un autre dessin des lettres ; l'oblique obtenue par cisaillement est le même dessin, simplement couché. Aux petits corps, les traits s'empâtent là où ils se croisent.

Le gras synthétique relève de la même famille de problèmes. Si une police n'a pas de vrai gras, le navigateur épaissit les contours — et le rapport des pleins et des déliés est détruit.

La liste de syntaxe

Ce qui suit parcourt la syntaxe restante, et vérifie au passage que rien ne se bat sous cette feuille de style.

Éléments en ligne

Le texte courant peut contenir du gras, de l'emphase, du barré, du code en ligne et un lien externe. Les adresses reconnues automatiquement comptent aussi : https://example.com . Quand tout cela se mélange dans un paragraphe, la première victime est l'interlignage — un seul élément doté de son propre padding suffit à disloquer la ligne.

Les étiquettes sont des métadonnées, pas la pointe de la phrase ; elles se dessinent en pastilles désaturées plutôt qu'en mur de couleurs : #typographie #polices #métier

Listes

Les listes ordonnées servent aux étapes, les listes à puces aux éléments parallèles :

1. D'abord, établir quel problème on résout
2. Ensuite, établir s'il mérite d'être résolu
   1. Combien de gens il touche
   2. À quelle fréquence il mord
3. En dernier seulement : comment le résoudre

Les listes de tâches servent aux vérifications :

• Fixer la justification et l'interlignage
• Fixer l'ordre de la pile de polices
• Décider de l'allure de l'emphase dans le texte courant
• Vérifier la ponctuation en débord sur un vrai appareil

Une liste imbriquée :

• Polices
  • Latines : Charter, Georgia, Palatino
  • CJC : LXGW WenKai, Source Han Serif, la linéale du système
• Composition
  • Espacement là où le latin rencontre le CJC
  • Compression de la ponctuation

Citations et encadrés

Un bon texte mérite une bonne page.

Le but de la typographie n'est pas de rendre les lettres jolies, mais de faire oublier au lecteur que la page existe.

Les cinq encadrés portent chacun leur ton. C'est une sémantique choisie par l'auteur, pas un ornement ajouté par l'interface :

Pour la lecture longue, une police de labeur dotée d'une vraie italique vaut son pesant d'or ; les caractères de titrage restent dans les titres.

Le fichier .md sur le disque est la seule vérité. Tout effet typographique vit dans la couche de rendu, et nulle part ailleurs.

Ne touchez jamais au texte de l'utilisateur pendant qu'il tape. Une espace insérée automatiquement sera écrite sur le disque au prochain enregistrement.

Blocs de code

Un bloc de code doit défiler latéralement plutôt que crever la justification, et sa palette doit rester sobre — mots-clés dans la couleur d'accent, commentaires retirés dans le gris, le reste à l'encre du texte. La coloration arc-en-ciel crie sur papier chaud :

/// Révéler le document courant dans le Finder
@objc private func revealInFinder(_ sender: Any?) {
    guard let url = session.url else { return }
    NSWorkspace.shared.activateFileViewerSelecting([url])
}

Une très longue ligne doit défiler, pas se replier :

curl -sSL "https://raw.githubusercontent.com/example/repo/main/very/long/path/to/some/file.txt" -o output.txt

Images

Quand une légende suit une image, l'écart entre les deux doit être plus étroit qu'un écart de paragraphe ordinaire — c'est à cette condition qu'on les lit d'un seul tenant.

Pour finir

Le filet ci-dessus est l'un de ses emplois légitimes : il marque une rupture réelle — « l'essai s'achève, la coda commence » —, pas la respiration entre paragraphes. Moins on l'emploie, plus sa seule apparition a de force.

Qu'un parti typographique tienne se ramène à une seule question : en lisant cette page de haut en bas, y a-t-il eu un endroit où l'on s'est arrêté pour remarquer la page elle-même ? Là où c'est arrivé, là reste du travail.