Bastardica: How to Create Experimental Fonts Without Sacrificing Readability on the Web

Hello HaWkers, a tool called Bastardica has drawn the attention of people who follow design and programming. Its demonstration reached 700 points and 94 comments on Hacker News, according to the editorial signal collected for this post. The invitation is simple: mix glyphs from different typefaces, adjust the result in your browser, and export a new font. It sounds like a playful experiment, but it raises serious product questions.

Would you put a deliberately strange font on a project's home page? Let's approach the idea methodically. We will look at what the tool actually does, build a working prototype, test reading and loading behavior, and check licenses before publishing anything. A memorable visual effect is useful only if people can still understand what the page says and do what they came to do.

What Bastardica Actually Does

In Bastardica's interface, you choose a base font and one or more fonts to mix into it. You can swap in a glyph at a chosen interval, use offset and scale controls, and inspect a sample before creating a file. The page offers a TTF download and build options for OTF and WOFF2. It also lets you upload your own fonts and provides presets for exploring combinations. That makes it possible to move from an odd idea to something you can try in a real page.

The tool's FAQ says processing happens locally in the browser with Pyodide and fontTools. That explains the appeal of manipulating files without sending the font to the service's server. Even so, a careful team should confirm its organization's policy before opening internal assets in any new tool. Local processing is a stated property of the implementation; it does not automatically grant permission to redistribute the exported result.

The easiest setting to understand is the interval. If an alternative font enters every fifth glyph, the appearance of the phrase changes at predictable positions. The mixture might evoke a printing mistake, a collage texture, or a deliberate editorial identity. Scale can bring character heights closer together; vertical offset can correct letters that seem to float. None of these controls replaces a visual review of the entire alphabet, including the characters your interface actually needs.

There is an important difference between creating a font and choosing an interface font. The exported file may work technically yet still be poor for navigation, instructions, or telling digits apart. The finished product needs its own criteria. Before thinking about style, decide where the effect belongs: a short headline, a cover, a poster, a button, body copy, or a wordmark. Each location tolerates a different amount of surprise, and the consequences of a misread character differ just as much.

Why a Strange Font Might Help a Product

A memorable visual identity can make a launch recognizable even when someone sees the page outside its original context, perhaps in a screenshot or a social post. Typography has this power because it occupies substantial space and repeats across screens. Mixing letterforms can create visual tension without requiring a new illustration for every asset. For a small team, that can be an efficient way to give a campaign a distinct voice.

That benefit depends on intention. A shifted letter on a poster can support a theme of improvisation; the same letter in a banking form can look like an error. The choice has to fit the content, audience, and moment of reading. A product that asks for immediate trust will probably use the effect more cautiously than an arts festival or an experimental portfolio. Distinctive design still has to serve the promise the product makes.

Bastardica is interesting because it turns that discussion into prototyping. Instead of debating references alone, a team can generate alternatives, place them in actual screens, and compare the results. The final direction might use a restrained main typeface and reserve the experimental one for short statements. If your project already explores nostalgia, compare the test with this guide to retro effects in web design. The goal is a coherent design language, not a growing collection of unrelated effects.

Choose a phrase that represents the product, but do not stop there. A font can look excellent in “Welcome” and fail in “Settings,” in prices, in accented letters, or in proper names. Include uppercase and lowercase letters, numbers, punctuation, and the characters used by every language in the interface. A site that serves Portuguese readers needs samples such as “ação,” “coração,” and “você”; an English-only sample would hide problems with those glyphs. The same principle applies to every locale you intend to support.

First Prototype: Where to Apply the Font

Start with a small page that separates the prominent headline from the content people need to read. The example below lets you replace the experimental font without rebuilding the whole interface. Use a WOFF2 file exported by Bastardica only after checking the rights attached to its source fonts. The filename is illustrative and should match the file you actually exported and host on your site.

<main class="vitrine">
  <p class="rotulo">A collection of ideas</p>
  <h1 class="titulo-experimental">A new way to see things</h1>
  <p class="resumo">
    Explore the project at your own pace. The body font stays simple to make reading easier.
  </p>
  <a class="acao" href="#detalhes">Explore the project</a>
</main>
<section id="detalhes"><h2>Details</h2><p>Clear, accessible content.</p></section>

The HTML has a predictable hierarchy: one main heading, a short explanation, and a link for the next action. The experimental font appears only in the heading. That choice reduces the risk that a difficult mixture will interfere with orientation. The link still has a descriptive label regardless of how the letters in the title look. If the font fails to load, the structure and the task remain understandable.

Loading, Fallbacks, and Performance

A custom font adds a resource to the page load. If the file is delayed, the browser needs a readable alternative; if it never arrives, the interface still has to work. The CSS below confines the visual experiment to the heading and uses a familiar stack for everything else. Change the URL to the place where you host your actual WOFF2 file. The font name here is only a local CSS label, so it does not have to match the export's original name.

@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; }

The font-display: swap value prioritizes visible text while the font downloads. It does not prevent a possible size change when the final family appears, so compare the headline width before and after loading. If it wraps in an unexpected place, shorten the phrase, adjust the size, or choose a fallback with closer metrics. Check the exported file's weight and your project's cache policy too. A striking font can be worth downloading, but visitors should not pay for unused glyphs or a file that is fetched again on every page.

Do not convert every screen into an image just to preserve the appearance of the experiment. Real text remains selectable, searchable, and responsive to zoom. A creative font should work with those properties instead of erasing them. If readability collapses at a small size, turn off the special styling in that context rather than demanding extra effort from the reader. A graceful fallback is part of the design, not an admission of failure.

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

This narrow-screen fallback is only a starting point. Test on real devices and in the actual languages you support. A French heading may take more room than its Portuguese counterpart; a product name must not disappear because the layout was tuned around one short sentence. Responsive typography is also an editorial review: line breaks, translation length, and the order of words all affect the final screen.

Test Reading, Not Just Appearance

Run two different tests. In the first, show a screen for a few seconds and ask the person what product they saw and what they would do next. In the second, let them complete a simple task, such as finding details or opening a section. The font works when it strengthens identity without hiding content or confusing the next action. You can learn more from one observed mistake than from a long discussion of whether the typeface looks fashionable.

Compare at least one version with the experimental font and another with a conventional font. Keep the content, contrast, and layout the same. If everything changes at once, you cannot tell what helped or hurt. Record reading errors, hesitation, and observable line breaks. An opinion such as “it looks modern” can guide taste; a person reading a price incorrectly reveals a concrete problem. Ask them to read important words aloud when you need to understand the source of a mistake.

Include similar-looking characters and difficult combinations in the review: I, l, 1, O, 0, accents, and punctuation. Ambiguity may be acceptable in an artistic headline. In a button, price, deadline, or warning, it can change the meaning. Prioritize the places where a mistaken reading costs a person time or money. The same test can also reveal whether the font feels expressive at one size but turns into noise when scaled down.

The browser can tell you whether a font family has finished loading. The following snippet runs in the console on a page using the CSS above. It does not measure comprehension; it only helps distinguish a loading problem from a design problem. Use it before taking comparison screenshots so both versions are tested under conditions you understand.

// Confirm font availability before comparing screenshots.
await document.fonts.ready;
const pronta = document.fonts.check('40px "BastardicaDemo"');
console.log(pronta ? "Font loaded" : "Check the file and its path");

If your visual test happened before document.fonts.ready, you may have judged only the fallback. Repeat screenshots at the same width, zoom, and language. Also check the page manually with the font unavailable: the content should remain understandable when the network fails. That check matters especially for headlines that carry the only explanation of a product or campaign. The effect may be optional; the message is not.

Licensing: The Step That Does Not Fit in a Preview

Bastardica's FAQ notes that mixing two fonts creates a derivative work and asks you to check the source fonts' licenses, particularly before commercial use. The tool says it adds no conditions of its own to the result. That does not mean every input file can be embedded in a site, sold, or distributed freely. A file being technically easy to export says nothing about whether you have the rights required for your intended use.

For a real project, keep a short record: the base font's name, the name of each font mixed into it, its source, the file version, the license you reviewed, and the date you checked it. Record the exported format and where the result will be used as well. That record makes later review easier when someone changes the visual identity, replaces a source font, or asks why a particular asset sits in the repository. If a license is ambiguous, consult the rights holder's documentation before publishing.

The site also explains a useful rule for three or more fonts: when different intervals coincide on the same glyph, the first mixed font wins. It suggests prime numbers for the intervals because they collide less often. You can observe the basic pattern in a simple simulation. The simulation does not replace inspection of the exported file, but it helps a team anticipate the result before spending time adjusting individual glyphs.

// Simulate positions where two alternative fonts compete for the same glyph.
const texto = "Experimental typography with intention";
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);

The simulation is deliberately limited: it works with positions in a string and does not reproduce every internal detail of how Bastardica handles a font file. Use it to discuss a pattern with the team before fine-tuning each glyph. If the composition feels too restless, increase the intervals or restrict the font to a keyword. Then export a sample and inspect the actual letters; a numerical pattern cannot judge whether a particular shape is readable.

When to Use It and When to Step Back

Use the experimental font when it adds personality to a short message and the rest of the interface supports reading. A campaign cover, a creative landing page, or a portfolio headline may gain a clear visual signature. Ask another person to read it without context: if they cannot identify the message, the effect has displaced communication. The test is particularly useful when your own familiarity with the wording makes a difficult letter seem obvious.

Stepping back is a design decision too. Avoid the mixture in long passages, critical instructions, forms, prices, and error states until you have evidence that it works in those situations. In navigation, repeated irregular characters may become tiring; in a warning, one substituted glyph may make a person miss something important. The same file can be excellent for a headline and unsuitable for an entire product. Scope is often what makes an expressive choice usable.

There is also a product lesson beyond the visual result. Bastardica shows how a small tool can shorten the distance between an idea and a prototype. Its value lies in quick comparison, local adjustment, and export, while leaving the final decision to people who know the context. A team does not have to adopt a “cursed” aesthetic to learn from that flow. It needs a way to test visual hypotheses without confusing enjoyment in an editor with quality on the published screen.

Looking Ahead: More Experiments, Better Judgment

Browser-based creation tools make typography more accessible to people who do not draw type every day. That expands the number of ideas a team can test. It also makes careful selection more important: every export brings questions about licensing, readability, languages, file size, and maintenance. The easier it becomes to produce a novel artifact, the more valuable it is to have a clear reason for using it.

My practical rule is to treat a mixed font as an interface component. Define where it appears, what happens when it fails, how it responds to narrow screens, and how you will review it when content changes. If the style survives those questions, it has moved beyond a visual curiosity and started serving the product. If it does not, the experiment still did its job: it exposed a problem early, when fixing it costs far less than after launch.

Let's go! 🦅

📚 Want to Keep Up With What Is Coming?

This article covered Bastardica and experimental fonts, but the ecosystem changes every week, and not every useful discovery becomes a full article here.

On X I share what I am testing, behind-the-scenes notes from my projects, and new ideas before they turn into posts.

Follow Me There

👉 Follow @jeffbruchado on X

💡 Daily content about development, careers, and the tools I actually use