Un site personnel est le seul projet où le client, c’est soi, et où la date limite est « quand tu arrêtes d’y prendre plaisir ». C’est à la fois le plaisir et le piège. Aucun chef de produit ne vient te dire que la serif est très bien. Il n’y a que cette sensation persistante, à une heure du matin, que l’espacement du tiret n’est pas tout à fait juste.
J’ai reconstruit le mien trois fois avant cette version. C’est la première que je montrerais sans m’excuser.
D’abord, des contraintes
Tout bon projet sur lequel j’ai travaillé a commencé par une contrainte que quelqu’un a décidé de respecter. Pour le site :
- Une seule colonne de 34rem — environ 544 pixels, soit 62 à 68 caractères par ligne.
- Deux familles et une monospace. Sans exception.
- Pas de template, pas de thème, pas de constructeur. Chaque rectangle est délibéré.
- Du HTML statique, un budget d’environ 100 Ko de JavaScript, aucune image au-dessus de la ligne de flottaison.
- Une couleur d’accent, utilisée assez parcimonieusement pour qu’elle signifie encore quelque chose.
Une contrainte n’est pas une limite : c’est une façon de prendre dix mille décisions à l’avance pour pouvoir dépenser son attention sur celle qui compte.
La typographie fait l’essentiel du travail
Sur un site d’écriture, l’interface, c’est le texte. Presque tout le reste est de la mesure.
Le corps est en serif à 1,0625rem, avec une hauteur de ligne de 1,78. La mesure est de 34rem parce que c’est là qu’une ligne cesse de paraître longue sans que la colonne paraisse étroite sur un ordinateur portable. Les titres resserrent légèrement l’interlettrage ; les métadonnées le desserrent et passent en sans, parce que les dates et les temps de lecture sont des étiquettes, pas des phrases.
.prose {
font-family: var(--font-serif);
font-size: 1.0625rem;
line-height: 1.78;
hanging-punctuation: first last;
}La dernière ligne fait plus qu’il n’y paraît. La ponctuation suspendue fait qu’un guillemet en début de ligne ou une virgule en fin de ligne se placent en dehors de la mesure au lieu de pousser le texte vers l’intérieur, si bien que le bord gauche du paragraphe se lit comme une verticale nette. Seuls quelques navigateurs le prennent en charge aujourd’hui. Les autres affichent normalement, ce qui est une très bonne définition de l’amélioration progressive.
J’ai aussi passé un temps déraisonnable sur le filet de séparation. Un cheveu à dix pour cent d’encre, pas dix-huit, car à dix-huit il entre en concurrence avec le texte qu’il est censé séparer.
Le budget de performance est une décision de design
La vitesse n’est pas une préoccupation d’ingénierie qui arrive une fois le design terminé. Elle fait partie de la sensation de la chose, et c’est la première chose que vit un visiteur.
Les règles que je me suis données : pas de framework côté client, pas de police tierce, pas de script d’analytics qui bloque le premier rendu, pas d’image plus grande que le texte qu’elle illustre. Le site compile en HTML et un peu de CSS, avec quelques lignes de JavaScript pour le thème et la barre de progression de lecture.
La barre de progression, ce sont deux pixels de couleur d’accent en haut de la page, mis à l’échelle du défilement. Cela coûte un élément, une propriété et une douzaine de lignes. C’est aussi le seul mouvement non optionnel de la page, et la seule pièce d’interface pour laquelle je me battrais.
Le mode sombre n’est pas une inversion du mode clair. Le thème clair, c’est du papier chaud et de l’encre ; le thème sombre, du vert persistant et un blanc cassé plus doux, parce que du blanc pur sur fond sombre vibre. L’accent doit être choisi à nouveau dans chaque thème, pas recoloré. Les tokens rendent cela possible sans chercher une valeur égarée dans les composants.
Pourquoi six langues
Le site est en anglais, chinois, japonais, espagnol, français et allemand. Ce n’est pas une stratégie de croissance. C’est pour qui je veux que le site soit lisible : ma famille à Shanghai, mes amis à Tokyo, les clients et collaborateurs accumulés au fil des fuseaux horaires.
Écrire dans une autre langue n’est pas traduire. C’est une seconde tentative de la même idée, par une autrice moins bonne, avec des instincts différents. J’écris d’abord l’anglais, puis je réécris le texte en chinois comme s’il était neuf, puis je fais de même en japonais. Certaines phrases s’améliorent. D’autres se perdent. Le site garde une note discrète quand un texte n’est pas encore arrivé dans une langue, parce que faire semblant est pire que d’être honnête.
À quoi sert le site
Pas à générer des contacts. Pas à construire une marque personnelle. C’est un jardin où je vais quand je veux réfléchir sérieusement à quelque chose, et l’excuse dont j’ai besoin pour continuer à faire des choses à la main.
Le meilleur, avec un site qu’on possède, c’est qu’il peut être imparfait en public. On peut changer la largeur de colonne un mardi parce que ça sonne mieux. On peut laisser une phrase légèrement fausse parce qu’on y croit encore. Personne ne va l’envoyer en revue.
Le site changera encore. C’est tout l’intérêt de le construire soi-même.
La mesure de 34rem est un point de départ, pas une loi. Vers 62 caractères par ligne, l’œil est à l’aise ; en dessous de 50, le texte paraît haché, et au-delà de 80, revenir à la ligne suivante devient une petite décision. Si vous ne devez choisir qu’un seul nombre aujourd’hui, que ce soit celui-là.