Bastardica : créer des polices expérimentales sans sacrifier la lecture sur le Web

Salut HaWkers, un outil nommé Bastardica a attiré l’attention de celles et ceux qui suivent le design et le développement. Sa démonstration a atteint 700 points et 94 commentaires sur Hacker News, selon le signal éditorial recueilli pour cet article. Son invitation est simple : mélanger des glyphes provenant de différentes polices, ajuster le résultat dans le navigateur, puis exporter une nouvelle police. L’idée ressemble à un jeu, mais elle soulève de vraies questions de conception de produit.

Placeriez-vous volontairement une police étrange sur la page d’accueil d’un projet ? Essayons cette idée avec méthode : comprendre ce que fait l’outil, construire un prototype fonctionnel, vérifier la lecture et le chargement, puis examiner les licences avant toute publication. Une expérience intéressante dans l’éditeur doit encore résister aux conditions réelles d’utilisation.

Ce Que Fait Réellement Bastardica

Dans l’interface de Bastardica, vous choisissez une police de base et une ou plusieurs polices à mélanger. Vous pouvez remplacer un glyphe à intervalles définis, régler son décalage et son échelle, et observer un échantillon avant de créer le fichier. La page propose un téléchargement en TTF ainsi que des options de création en OTF et WOFF2. Elle accepte aussi l’importation de vos propres polices et fournit des préréglages pour explorer des associations.

La FAQ de l’outil indique que le traitement s’effectue localement dans le navigateur, avec Pyodide et fontTools. Cette architecture explique la possibilité de manipuler les fichiers sans envoyer la police à un serveur du service. Une équipe prudente vérifiera néanmoins les règles de son organisation avant d’ouvrir des fichiers internes dans un nouvel outil. Le traitement local décrit le fonctionnement annoncé ; il ne donne aucun droit automatique de redistribuer le résultat.

L’effet le plus simple à comprendre est l’intervalle. Si une police alternative intervient tous les cinq glyphes, le dessin de la phrase change à des endroits prévisibles. Le mélange peut évoquer un défaut d’impression, une texture de collage ou une identité éditoriale volontaire. Le réglage de l’échelle rapproche les hauteurs ; le décalage vertical corrige les caractères qui semblent flotter. Aucun de ces contrôles ne remplace l’examen visuel de l’alphabet complet.

Il faut distinguer la fabrication d’une police du choix d’une police d’interface. Un fichier exporté peut être techniquement valide et rester pénible à utiliser pour naviguer, lire des consignes ou distinguer des chiffres. Le produit final a besoin de critères qui lui sont propres. Avant de penser à l’esthétique, précisez où l’effet apparaîtra : titre court, couverture, affiche, bouton, texte courant ou marque. Chacun de ces emplacements tolère un degré différent de surprise.

Pourquoi Une Police Étrange Peut Servir Un Produit

Une identité visuelle mémorable peut rendre un lancement reconnaissable même lorsqu’une page apparaît hors contexte, sur une capture d’écran ou dans une publication sociale. La typographie possède ce pouvoir parce qu’elle occupe une grande surface et revient sur presque tous les écrans. Mélanger des familles de lettres peut créer une tension visuelle sans commander une illustration inédite pour chaque support.

Ce bénéfice dépend toutefois de l’intention. Une lettre décalée sur une affiche peut renforcer une impression d’improvisation ; la même lettre dans un formulaire bancaire peut ressembler à une erreur. Le choix doit correspondre au contenu, au public et au moment de lecture. Un produit qui doit inspirer immédiatement confiance emploiera probablement cet effet avec davantage de retenue qu’un festival d’art ou un portfolio expérimental.

Bastardica est intéressant parce qu’il transforme cette discussion en prototype. Au lieu de débattre uniquement de références, l’équipe peut générer plusieurs versions, les placer sur de vrais écrans et les comparer. Elle peut conserver une famille principale plus discrète et réserver la famille expérimentale aux phrases courtes. Si votre projet joue déjà avec la nostalgie, rapprochez ce test de notre guide sur les effets rétro dans le web design. Cherchez une cohérence visuelle qui aide à comprendre la page.

Choisissez une phrase représentative du produit, mais ne vous arrêtez pas là. Une police peut être superbe pour « Bienvenue » et échouer pour « Paramètres », les prix, les lettres accentuées ou les noms propres. Votre échantillon doit inclure majuscules, minuscules, chiffres, ponctuation et caractères employés dans toutes les langues de l’interface. En français, « été », « à bientôt », « œuvre » et « sécurité » révèlent des défauts qu’une seule phrase en anglais masquerait. Pensez aussi aux libellés que les utilisateurs rencontrent réellement, et pas seulement à ceux de la présentation marketing.

Premier Prototype : Où Appliquer La Police

Commencez par une petite page qui sépare l’accroche du contenu destiné à être lu longtemps. L’exemple suivant permet de remplacer la police expérimentale sans reconstruire toute l’interface. Utilisez un fichier WOFF2 exporté depuis Bastardica seulement après avoir vérifié les droits des polices d’origine. Le nom de fichier indiqué ici est illustratif : adaptez-le à votre exportation réelle et à l’emplacement choisi dans votre projet.

<main class="vitrine">
  <p class="rotulo">Collection d’idées</p>
  <h1 class="titulo-experimental">Une nouvelle façon de voir</h1>
  <p class="resumo">
    Découvrez le projet à votre rythme. La police du texte reste simple pour faciliter la lecture.
  </p>
  <a class="acao" href="#detalhes">Découvrir le projet</a>
</main>
<section id="detalhes"><h2>Détails</h2><p>Un contenu accessible et direct.</p></section>

Le HTML présente une hiérarchie prévisible : un titre principal, une explication et un lien d’action. La police expérimentale apparaît uniquement dans le titre. Cette limite réduit le risque qu’un mélange difficile perturbe l’orientation de la personne. Le lien conserve un libellé descriptif, quel que soit le dessin des lettres. Lorsque vous testerez la page, vous pourrez ainsi attribuer plus facilement un problème de lecture à la typographie plutôt qu’à un contenu absent.

Chargement, Police de Secours Et Performances

Une police personnalisée ajoute une ressource au chargement de la page. Si son fichier arrive en retard, le navigateur a besoin d’une solution de secours lisible ; s’il n’arrive jamais, l’interface doit continuer de fonctionner. Le CSS suivant réserve l’expérience visuelle au titre et emploie une pile de polices courante pour le reste. Modifiez le chemin selon l’emplacement où vous hébergez réellement le fichier WOFF2.

@font-face {
  font-family: "BastardicaDemo";
  src: url("/fonts/bastardica-demo.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

body { font-family: system-ui, sans-serif; line-height: 1.55; }
.vitrine { max-width: 58rem; margin: 4rem auto; padding: 1.5rem; }
.titulo-experimental {
  font-family: "BastardicaDemo", Georgia, serif;
  font-size: clamp(2.25rem, 7vw, 5rem);
  line-height: 1.1;
}
.resumo { max-width: 42rem; }
.acao { display: inline-block; margin-top: 1rem; }

La valeur font-display: swap privilégie l’affichage du texte pendant le téléchargement de la police. Elle ne supprime pas un éventuel changement de taille lorsque la famille définitive arrive. Comparez donc la largeur des titres avant et après le chargement. Si une expression passe à la ligne de manière inattendue, raccourcissez-la, ajustez sa taille ou choisissez une police de secours dont les métriques sont plus proches. Vérifiez aussi le poids du fichier exporté et la politique de cache de votre propre site.

Ne transformez pas toute la page en image pour préserver l’apparence de l’expérience. Le vrai texte reste sélectionnable, recherchable et adaptable au zoom. Une police créative doit profiter de ces propriétés plutôt que les effacer. Si la lisibilité baisse sur un petit écran, désactivez l’effet dans ce contexte. Une capture idéale sur ordinateur ne prouve rien sur un téléphone tenu à bout de bras, dans des conditions d’éclairage ordinaires.

@media (max-width: 36rem) {
  .titulo-experimental {
    font-family: Georgia, serif;
    font-size: 2.25rem;
    line-height: 1.2;
  }
}

Cette solution de secours pour les écrans étroits n’est qu’un point de départ. Testez-la sur les appareils et dans les langues réellement utilisés. Un titre français peut occuper plus de place que sa version portugaise ; le nom d’un produit ne doit pas disparaître parce que la mise en page a été calibrée avec une seule phrase courte. La typographie responsive exige donc aussi une révision éditoriale des textes et des traductions.

Tester La Lecture, Pas Seulement L’Apparence

Réalisez deux tests distincts. Pour le premier, affichez un écran pendant quelques secondes et demandez à la personne quel produit elle a vu et quelle action elle ferait. Pour le second, laissez-la accomplir une tâche simple, comme trouver les détails ou ouvrir une section. La police remplit son rôle lorsqu’elle renforce l’identité sans cacher le contenu ni rendre l’étape suivante incertaine.

Comparez au moins une version avec la police expérimentale et une autre avec une police conventionnelle. Gardez le même contenu, le même contraste et la même disposition. Si vous modifiez tout à la fois, vous ne saurez plus ce qui a aidé ou gêné la lecture. Notez les erreurs, les hésitations et les retours à la ligne observables. « Ça fait moderne » peut guider une préférence esthétique ; une personne qui lit mal le prix signale un problème concret.

Ajoutez à la revue les caractères proches et les combinaisons délicates : I, l, 1, O, 0, les accents et les signes de ponctuation. Dans un titre artistique, une certaine ambiguïté peut être acceptable. Sur un bouton, un prix, une date limite ou une alerte, elle peut changer le sens du message. Donnez la priorité aux endroits où une mauvaise lecture coûte du temps ou de l’argent. Les développeurs et les designers doivent observer ensemble ces scénarios, car l’exportation du fichier seule ne les révèle pas.

Le navigateur peut également vous indiquer si la famille a fini de charger. L’extrait suivant fonctionne dans la console d’une page utilisant le CSS précédent. Il ne mesure ni la compréhension ni l’accessibilité : il aide seulement à distinguer un problème de chargement d’un problème de dessin des caractères.

// Vérifiez que la police est disponible avant de comparer les captures d’écran.
await document.fonts.ready;
const pronta = document.fonts.check('40px "BastardicaDemo"');
console.log(pronta ? "Fonte carregada" : "Verifique o arquivo e o caminho");

Si le test visuel a eu lieu avant document.fonts.ready, il est possible que vous ayez seulement évalué la police de secours. Reprenez les captures dans les mêmes conditions de largeur, de zoom et de langue. Faites aussi une vérification manuelle avec la police indisponible : la page doit rester compréhensible lorsque le réseau échoue. Cette répétition évite de confondre une belle image de démonstration avec une expérience fiable.

Licence : L’Étape Que L’Aperçu Ne Montre Pas

La FAQ de Bastardica rappelle que le mélange de deux polices crée une œuvre dérivée et demande de vérifier les licences des polices d’origine, surtout avant un usage commercial. L’outil indique qu’il n’ajoute pas de conditions propres au résultat. Cela ne signifie pas que chaque fichier importé peut ensuite être intégré à un site, vendu ou distribué librement. La réponse dépend des droits attachés aux fichiers de départ.

Pour un projet réel, conservez une fiche courte : nom de la police de base, nom de chaque police mélangée, provenance, version du fichier, licence consultée et date de consultation. Notez également le format exporté et l’endroit où il sera utilisé. Cette fiche facilite les revues quand quelqu’un change l’identité visuelle, remplace une police ou demande pourquoi un fichier figure dans le dépôt. Si la licence est ambiguë, consultez la documentation du titulaire des droits avant de publier.

Le site explique lui-même une règle utile lorsque trois polices ou plus entrent dans le mélange : si plusieurs intervalles correspondent au même glyphe, la première police mélangée l’emporte. Il suggère des nombres premiers pour les intervalles, car leurs collisions sont moins fréquentes. On peut observer cette règle dans une simulation simple. Cette simulation ne remplace pas l’inspection du fichier exporté, mais elle aide à anticiper la texture du résultat et à discuter des réglages avec l’équipe.

// Simulez les positions où deux polices alternatives réclament le même glyphe.
const texto = "Tipografia experimental com intenção";
const intervalos = [5, 7];
const mapa = [...texto].map((letra, indice) => {
  const posicao = indice + 1;
  const fonte = intervalos.findIndex((passo) => posicao % passo === 0);
  return { letra, posicao, fonte: fonte < 0 ? "base" : `mistura-${fonte + 1}` };
});
console.table(mapa);

La simulation est volontairement limitée : elle travaille avec les positions d’une chaîne de caractères et ne reproduit pas tous les détails internes de la manipulation d’une police par Bastardica. Elle suffit pour discuter du motif avant de passer du temps à régler chaque glyphe. Si la composition paraît trop agitée, augmentez les intervalles ou limitez la police à un mot clé. Vérifiez ensuite le rendu réel dans le navigateur, car une logique prévisible ne garantit pas une lecture agréable.

Quand L’Utiliser Et Quand Revenir En Arrière

Employez la police expérimentale lorsqu’elle donne de la personnalité à un message court et que le reste de l’interface soutient la lecture. Une couverture de campagne, une page de lancement créative ou un titre de portfolio peuvent y gagner une signature visuelle nette. Demandez à une autre personne de lire la création sans contexte : si elle n’identifie pas le message, l’effet visuel a pris la place de la communication.

Revenir en arrière est aussi une décision de design. Évitez d’abord ce mélange dans les longs textes, les consignes critiques, les formulaires, les prix et les messages d’erreur, jusqu’à disposer d’éléments montrant qu’il fonctionne dans ces situations. Dans une navigation, la répétition de caractères irréguliers peut fatiguer ; dans un avertissement, un glyphe remplacé peut masquer une donnée essentielle. Le même fichier peut convenir parfaitement à une manchette et être inadapté à l’ensemble d’un produit.

Au-delà du résultat visuel, il existe ici une leçon de conception : Bastardica montre comment un petit outil réduit la distance entre une idée et un prototype. Sa valeur vient de la comparaison rapide, des réglages locaux et de l’exportation, puis laisse la décision finale aux personnes qui connaissent le contexte. Une équipe n’a pas besoin d’adopter une esthétique volontairement étrange pour apprendre de ce processus. Elle doit pouvoir tester des hypothèses visuelles sans confondre le plaisir de l’éditeur avec la qualité de l’écran publié.

Perspectives : Plus D’Expériences, Plus De Critères

Les outils de création dans le navigateur rendent la typographie plus accessible aux personnes qui ne dessinent pas des caractères tous les jours. Ils augmentent le nombre d’idées que l’on peut essayer. Ils accroissent aussi la responsabilité du choix : chaque exportation soulève des questions de licence, de lisibilité, de langues, de taille du fichier et de maintenance. Ces questions méritent une réponse avant que la police devienne un élément partagé par tout le site.

Ma règle pratique consiste à traiter la police mélangée comme un composant d’interface. Définissez où elle apparaît, ce qui se passe si elle ne charge pas, comment elle réagit sur les écrans étroits et comment elle sera réexaminée quand le contenu changera. Si le style résiste à ces questions, il dépasse la simple curiosité visuelle et sert le produit. Dans le cas contraire, l’expérience a quand même rempli son rôle : elle a révélé assez tôt ce qui aurait coûté cher après le lancement.

Allez, on y va! 🦅

📚 Vous Voulez Suivre Ce Qui Arrive ?

Cet article a présenté Bastardica et l’usage des polices expérimentales. L’écosystème change pourtant chaque semaine, et toutes les découvertes ne deviennent pas un article ici.

Sur X, je partage mes essais, les coulisses de mes projets et les nouveautés que je découvre avant qu’elles ne deviennent des publications sur le blog.

Suivez-Moi Là-Bas

👉 Suivre @jeffbruchado sur X

💡 Du contenu quotidien sur le développement, la carrière et les outils que j’utilise vraiment