L'allure de votre site

Site public → Apparence. Typoza ne propose pas des thèmes à installer, mais une dizaine de réglages qui composent une allure.

C'est une position assumée : on ne déplace pas des blocs sur une grille, on ne choisit pas la couleur d'un bouton en particulier. C'est ce qui permet à un texte publié aujourd'hui d'être encore correctement affiché dans cinq ans.

Les couleurs

Le réglage

Ce qu'il touche

Couleur des liens

Les liens dans le corps des textes

Couleur d'accent

Boutons, éléments mis en avant

Le mode de couleur

Trois valeurs : Clair, Sombre, ou Selon le système du lecteur.

La troisième est la bonne réponse dans presque tous les cas. Un lecteur qui a choisi un fond sombre sur son appareil l'a choisi pour une raison, et le lui reprendre au milieu d'une lecture est désagréable.

Les polices

Trois familles, réglables séparément :

• Police des titres

• Police du texte

• Police du code

Séparer les trois permet un titre marqué et un corps sobre, ce qui est la combinaison la plus lisible sur un texte long.

La mise en page

Le réglage

Ce qu'il fait

Largeur du contenu

La longueur des lignes, en pixels

Arrondi

Le rayon des coins — jusqu'à « Aucun »

La largeur est le réglage le plus sous-estimé de l'écran. Une ligne trop longue fatigue : au-delà d'une certaine largeur, l'œil perd le début de la ligne suivante. Si vous n'y touchez qu'une fois, touchez à celui-là.

La marque : logo et icône d'onglet

Un bloc à part, sur le même écran. « Le logo de votre bandeau et l'icône de l'onglet. »

Le champ

Ce qu'il demande

Logo

Affiché à la place du nom de l'atelier, en 256 px de haut. PNG, WebP ou AVIF, 512 Ko au maximum

Logo sur fond sombre

Facultatif. Sans lui, le logo clair sert sur les deux fonds

Icône de l'onglet

Carrée, 128 px de côté au minimum. PNG, WebP ou AVIF, 256 Ko au maximum

Icône sur fond sombre

Facultative, même repli

Deux comportements qui se remarquent, et qui ne sont pas des défauts :

• Un logo n'est jamais recadré. C'est la seule image du produit dont la forme appartient à quelqu'un d'autre. Donnez-la à la bonne hauteur.

• L'icône sombre suit le système du lecteur, pas son choix dans la page. Un navigateur ne relit pas les icônes après le chargement : basculer le soleil et la lune en cours de lecture ne change pas l'onglet.

Sans rien poser, rien ne manque : le nom de l'atelier s'affiche à la place du logo, et une icône est générée depuis vos initiales et votre couleur d'accent.

Le thème du code

Trois thèmes : GitHub, Vitesse, Catppuccin. Chacun en version claire et sombre, qui suit le mode de couleur choisi par le lecteur.

Voir Le code et sa coloration.

Prévisualiser avant d'appliquer

Un aperçu en bas de l'écran montre un titre, un paragraphe, un lien et un bouton avec vos réglages en cours. Il se met à jour pendant que vous bougez les curseurs.

Rien n'est appliqué tant que vous n'avez pas cliqué Enregistrer l'apparence.

Ce que vos lecteurs règlent pour eux-mêmes

Vos réglages font l'allure du site ; trois autres appartiennent à celui qui lit, et ne changent rien pour personne d'autre. Ils sont en haut à droite de chaque page, dans le gris discret du bandeau.

Le réglage

Ce qu'il fait

Le soleil et la lune

Le fond clair, sombre ou automatique, qui l'emporte sur votre mode de couleur

« Aa »

La taille du texte, en quatre crans — la colonne s'élargit avec elle —, et la police : la vôtre, ou l'une de deux polices dessinées pour lire plus facilement, Atkinson Hyperlegible et Lexend

Mode concentration

Près du titre d'un article : tout s'efface, sauf le titre, le texte et ses images. Échap le referme

À sa première visite, une courte phrase sous « Aa » les présente, puis s'efface. Rien de tout cela ne se désactive, et c'est voulu : l'accessibilité ne s'achète pas, et un lecteur qui lit mal les petits caractères ne doit pas dépendre de la largeur que vous avez choisie.

Ce qui ne se règle pas ici

• La disposition. Pas de colonnes, pas de barre latérale au choix, pas de blocs déplaçables.

• Les menus. L'en-tête et les trois colonnes du pied ont leur propre onglet, à côté de celui-ci : les menus.

• Les comptes de réseaux sociaux, qui sont dans Site public → Réseaux.

• Le CSS. Il n'y a pas de champ de feuille de style. Ce qui n'est pas dans cet écran n'est pas réglable, et c'est le prix de la promesse du début.

Un changement d'apparence laisse une trace dans le journal d'activité.