Bastardica: cómo crear fuentes experimentales sin sacrificar la lectura en la web

Hola HaWkers, una herramienta llamada Bastardica llamó la atención de quienes siguen el diseño y la programación. La demostración alcanzó 700 puntos y 94 comentarios en Hacker News, según la señal editorial recopilada para este artículo. Su invitación es sencilla: mezcla glifos de distintas fuentes, ajusta el resultado en el navegador y exporta una fuente nueva. Parece un juego, pero plantea preguntas reales para cualquier producto digital.

¿Pondrías una fuente deliberadamente extraña en la página de inicio de un proyecto? Vamos a probar la idea con un método: entender qué hace la herramienta, preparar un prototipo funcional, comprobar la lectura y la carga, y revisar las licencias antes de publicar. Así será posible conservar la personalidad del experimento sin trasladar sus problemas a las personas que usan la interfaz.

Lo que Bastardica hace realmente

En la interfaz de Bastardica eliges una fuente base y una o varias fuentes para mezclar. Puedes sustituir un glifo según un intervalo definido, usar controles de desplazamiento y escala, y observar una muestra antes de crear el archivo. La página ofrece descarga en TTF y opciones para generar OTF y WOFF2. También acepta tus propias fuentes y ofrece ajustes predefinidos para explorar combinaciones. Conviene mirar la muestra con las palabras que realmente aparecerán en tu proyecto, porque una demostración atractiva puede ocultar problemas en otros caracteres.

El FAQ de la propia herramienta afirma que el procesamiento ocurre localmente en el navegador mediante Pyodide y fontTools. Esa explicación respalda la propuesta de manipular archivos sin enviarlos al servidor del servicio. Aun así, un equipo prudente consulta las políticas de su organización antes de abrir archivos internos en cualquier herramienta nueva. El procesamiento local es una característica declarada de la implementación; no concede por sí mismo permiso para redistribuir el resultado. La decisión técnica y la decisión legal requieren comprobaciones diferentes.

El efecto más sencillo de entender es el intervalo. Si la fuente alternativa aparece cada cinco glifos, el dibujo de la frase cambia en puntos previsibles. La mezcla puede parecer un fallo de impresión, una textura de collage o una identidad editorial intencional. El control de escala ayuda a acercar las alturas; el desplazamiento vertical corrige caracteres que parecen flotar. Ninguno de esos controles sustituye una revisión visual del alfabeto completo, con signos y números incluidos.

Hay una diferencia importante entre generar una fuente y elegir una fuente para una interfaz. Un archivo exportado puede funcionar técnicamente y, aun así, ser malo para navegar, leer instrucciones o distinguir cifras. El producto final necesita criterios propios. Antes de decidir el estilo, define dónde aparecerá el efecto: título breve, portada, cartel, botón, cuerpo del texto o marca. Cada lugar admite una cantidad distinta de sorpresa, y cada error de lectura tiene consecuencias diferentes.

Por qué una fuente extraña puede ayudar a un producto

Una identidad visual memorable puede hacer reconocible un lanzamiento incluso cuando la página aparece fuera de su contexto, en una captura de pantalla o en una publicación social. La tipografía tiene ese poder porque ocupa mucho espacio y se repite en casi todas las pantallas. Mezclar familias de letras puede crear tensión visual sin exigir una ilustración inédita para cada pieza. Esa repetición también obliga a pensar en la coherencia: un recurso que sorprende una vez puede cansar cuando aparece en todas partes.

El beneficio depende de la intención. Una letra desplazada en un cartel puede reforzar una idea de improvisación; la misma letra en un formulario bancario puede parecer un error. La elección debe dialogar con el contenido, el público y el momento de lectura. Un producto que necesita generar confianza inmediata probablemente utilizará el efecto con más cuidado que un festival de arte o un portafolio experimental. Antes de exportar nada, escribe en una frase qué comunica la anomalía y por qué esa idea pertenece a la marca.

Bastardica resulta interesante porque transforma esa conversación en un prototipo. En vez de debatir solo referencias, el equipo puede generar alternativas, colocarlas en pantallas reales y compararlas. El resultado podría ser una familia principal discreta y otra experimental reservada para frases cortas. Si el proyecto ya explora la nostalgia, conviene relacionar la prueba con esta guía sobre efectos retro en diseño web. El objetivo es crear coherencia, no acumular efectos visuales que compitan entre sí.

Elige una frase representativa del producto, pero no te quedes ahí. Una fuente puede parecer magnífica en «Bienvenido» y fallar en «Configuración», en precios, en letras acentuadas o en nombres propios. Haz que la muestra incluya mayúsculas, minúsculas, números, puntuación y caracteres de todos los idiomas de la interfaz. Para una web en español, «acción», «año», «¿qué?» y «pingüino» revelan problemas que una frase escrita solo en inglés escondería. Prueba también frases largas: ahí aparecen las roturas de línea que un título de dos palabras no deja ver.

Primer prototipo: dónde aplicar la fuente

Empieza con una página pequeña que separe el reclamo principal del contenido destinado a una lectura continua. El siguiente ejemplo permite cambiar la fuente experimental sin reorganizar toda la interfaz. Utiliza un archivo WOFF2 exportado por Bastardica únicamente después de comprobar los derechos de las fuentes originales. El nombre del archivo es ilustrativo y debe coincidir con el de tu exportación real. Mantener el experimento en un área concreta facilita revertirlo si una prueba de lectura detecta problemas.

<main class="vitrine">
  <p class="rotulo">Coleção de ideias</p>
  <h1 class="titulo-experimental">Uma nova forma de olhar</h1>
  <p class="resumo">
    Explore o projeto com calma. A fonte do texto continua simples para facilitar a leitura.
  </p>
  <a class="acao" href="#detalhes">Conhecer o projeto</a>
</main>
<section id="detalhes"><h2>Detalhes</h2><p>Conteúdo acessível e direto.</p></section>

El HTML tiene una jerarquía previsible: un título principal, una explicación y un enlace de acción. La fuente experimental aparecerá solo en el título. Esta decisión reduce el riesgo de que una mezcla difícil obstaculice la orientación de la persona. El enlace conserva un texto descriptivo, con independencia de la forma elegida para las letras. Al llevar el ejemplo a producción, cambia también el contenido de muestra por el texto definitivo de tu idioma y repite la revisión con esa versión.

Carga, fuente de respaldo y rendimiento

Una fuente personalizada añade un recurso a la carga de la página. Si el archivo tarda en llegar, el navegador necesita una alternativa legible; si nunca llega, la interfaz debe seguir funcionando. El CSS siguiente reserva la experiencia visual para el título y utiliza una pila habitual para el resto. Ajusta la ruta según la ubicación del archivo WOFF2. Comprueba además que el servidor entrega el archivo correctamente y que ninguna regla de caché te deja evaluando una versión antigua.

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

El valor font-display: swap prioriza la visibilidad del texto mientras se descarga la fuente. No elimina un posible cambio de tamaño cuando aparece la familia definitiva; por eso conviene comparar la anchura de los títulos antes y después de la carga. Si una frase salta inesperadamente a otra línea, acórtala, ajusta el tamaño o busca una alternativa con métricas más parecidas. Evalúa también el peso del archivo exportado y la política de caché de tu proyecto. Una ventaja estética pequeña puede no compensar una descarga grande en una conexión lenta.

No conviertas toda la pantalla en una imagen para preservar la apariencia del experimento. El texto real sigue siendo seleccionable, se puede buscar y responde al zoom. Una fuente creativa debe convivir con esas propiedades en lugar de borrarlas. Si la legibilidad cae a un tamaño pequeño, desactiva el estilo especial en ese contexto en vez de exigir un esfuerzo adicional a quien lee. El efecto debe adaptarse al contenido y al dispositivo, no al revés.

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

Esta alternativa para pantallas estrechas es solo un punto de partida. Haz pruebas en el dispositivo y el idioma reales. Un título en francés puede ocupar más espacio que su versión en español; un nombre de producto no puede desaparecer porque el diseño se calibró con una frase corta. La respuesta tipográfica a distintos tamaños también implica una revisión editorial. Mira dónde se cortan las palabras y si el botón principal sigue visible cuando aumenta el tamaño del texto.

Prueba la lectura, no solo la apariencia

Haz dos pruebas distintas. En la primera, muestra una pantalla durante unos segundos y pide a la persona que diga qué producto vio y qué acción realizaría. En la segunda, deja que complete una tarea sencilla, como encontrar detalles o abrir una sección. La fuente funciona cuando refuerza la identidad sin esconder información ni confundir el siguiente paso. Una respuesta rápida y correcta aporta más información que un comentario general sobre el gusto personal.

Compara al menos una versión con la fuente experimental y otra con una fuente convencional. Mantén iguales el contenido, el contraste y la disposición. Si cambias todo a la vez, será imposible saber qué ayudó o perjudicó. Anota errores de lectura, vacilaciones y saltos de línea observables. Una opinión como «parece moderno» puede orientar el gusto; una persona que lee mal un precio revela un problema concreto. Registra las condiciones de la prueba para poder repetirla cuando cambie el diseño.

Incluye letras parecidas y combinaciones difíciles en la revisión: I, l, 1, O, 0, tildes y signos de puntuación. En títulos artísticos, cierta ambigüedad puede ser aceptable. En un botón, un precio, un plazo o una alerta, puede alterar el sentido. Da prioridad a los lugares donde una lectura incorrecta cuesta tiempo o dinero a la persona. Pide a alguien que no haya participado en el diseño que lea esas cadenas; conocer de antemano el texto facilita pasar por alto un defecto.

El navegador también puede informar si la familia terminó de cargarse. El siguiente fragmento funciona en la consola de una página que usa el CSS anterior. No mide la comprensión: solo ayuda a distinguir un problema de carga de otro relacionado con el dibujo de los caracteres. Comprueba primero la carga y después solicita opiniones sobre la fuente que de verdad se mostró.

// Confirma que la fuente está disponible antes de comparar capturas de pantalla.
await document.fonts.ready;
const pronta = document.fonts.check('40px "BastardicaDemo"');
console.log(pronta ? "Fonte carregada" : "Verifique o arquivo e o caminho");

Si la prueba visual ocurrió antes de document.fonts.ready, quizá evaluaste únicamente la fuente de respaldo. Repite las capturas con la misma anchura, nivel de zoom e idioma. Considera también una comprobación manual con el archivo inaccesible: la página debe permanecer comprensible cuando falla la red. Ese escenario permite ver si el título conserva sentido y si la composición soporta una familia distinta.

Licencias: la etapa que no cabe en la vista previa

El FAQ de Bastardica recuerda que la mezcla de dos fuentes crea una obra derivada y te pide que revises las licencias de las fuentes de origen, especialmente antes de un uso comercial. La herramienta afirma que no añade condiciones propias al resultado. Eso no significa que cualquier archivo de entrada pueda incorporarse a una web, venderse o distribuirse libremente. Si una fuente permite mostrar texto pero limita su modificación o redistribución, hay que aclarar esos términos antes de integrar la mezcla.

Para un proyecto real, conserva una ficha breve: nombre de la fuente base, nombre de cada fuente mezclada, procedencia, versión del archivo, licencia consultada y fecha de la consulta. Registra también el formato exportado y dónde se utilizará. Esa ficha facilita la revisión cuando alguien modifica la identidad visual, cambia una fuente o pregunta por qué cierto archivo está en el repositorio. Si la licencia resulta ambigua, busca la documentación de quien posee los derechos antes de publicar. Guarda el enlace a la licencia junto con la decisión para que el siguiente miembro del equipo pueda comprobarla.

El propio sitio explica una regla útil para tres o más fuentes: cuando distintos intervalos coinciden en el mismo glifo, gana la primera fuente mezclada. Sugiere utilizar números primos para los intervalos porque coinciden con menos frecuencia. La regla puede observarse en una simulación sencilla. No reemplaza la inspección del archivo exportado, pero ayuda a prever la textura del resultado y a conversar sobre ella antes de ajustar cada carácter a mano.

// Simula dónde dos fuentes alternativas compiten por el mismo glifo.
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 simulación es deliberadamente limitada: trabaja con posiciones de una cadena y no reproduce cómo Bastardica trata cada detalle interno del archivo de fuente. Sirve para discutir el patrón con el equipo antes de dedicar tiempo a cada glifo. Si la composición resulta demasiado agitada, aumenta los intervalos o reserva la fuente para una palabra clave. Después vuelve a mirar el archivo real, porque una distribución numérica agradable no garantiza una lectura cómoda.

Cuándo usarla y cuándo dar un paso atrás

Utiliza la fuente experimental cuando aporte personalidad a un mensaje breve y el resto de la interfaz sostenga la lectura. La portada de una campaña, una página de presentación creativa o el título de un portafolio pueden adquirir una firma visual clara. Pide a otra persona que lea la pieza sin contexto: si no identifica el mensaje, el efecto ocupó el lugar de la comunicación. También observa si recuerda el nombre del producto después de ver la pantalla; una letra peculiar debería apoyar esa memoria, no entorpecerla.

Retroceder también es una decisión de diseño. Evita la mezcla en textos largos, instrucciones críticas, formularios, precios y estados de error hasta tener evidencia de que funciona en esos escenarios. En la navegación, la repetición de caracteres irregulares puede cansar; en un aviso, un glifo sustituido puede hacer que alguien pierda información importante. El mismo archivo puede ser excelente para un titular e inadecuado para un producto entero. Limitar su uso conserva la fuerza del gesto visual y protege las tareas habituales.

Existe una oportunidad de producto más allá del resultado visual: Bastardica muestra cómo una herramienta pequeña puede acortar la distancia entre idea y prototipo. Su valor consiste en permitir comparaciones rápidas, ajustes locales y exportación, mientras la decisión final queda en manos de quienes conocen el contexto. Un equipo no necesita adoptar una estética «maldita» para aprender de este flujo. Necesita poder probar hipótesis visuales sin confundir la diversión del editor con la calidad de la pantalla publicada. Documenta qué versión probaste y por qué la elegiste: ese registro ayudará cuando lleguen nuevos contenidos o idiomas.

Perspectivas: más experimentación, más criterio

Las herramientas de creación en el navegador hacen más accesible la tipografía para quienes no se dedican diariamente al diseño de tipos. Eso amplía la cantidad de ideas que se pueden probar. También aumenta la responsabilidad de elegir bien: cada exportación plantea preguntas sobre licencias, legibilidad, idiomas, tamaño del archivo y mantenimiento. La velocidad para producir variantes solo resulta útil cuando existe tiempo para evaluar sus consecuencias.

Mi regla práctica es tratar la fuente mezclada como un componente de la interfaz. Define dónde aparece, qué ocurre cuando falla, cómo responde a las pantallas estrechas y cómo se revisará cuando cambie el contenido. Si el estilo supera esas preguntas, habrá dejado de ser una simple curiosidad visual y empezará a servir al producto. Si no las supera, el experimento habrá cumplido igualmente su función: descubrir pronto un problema que sería más caro encontrar después del lanzamiento. Probar, medir y decidir son parte del trabajo creativo.

¡Vamos con todo! 🦅

📚 ¿Quieres seguir lo que viene por delante?

Este artículo explicó Bastardica y el uso de fuentes experimentales, pero el ecosistema cambia cada semana y no todas las novedades se convierten en artículos aquí.

En X comparto lo que estoy probando, los detalles de mis proyectos y las novedades que aparecen antes de convertirse en una publicación del blog.

Sígueme allí

👉 Seguir a @jeffbruchado en X

💡 Contenido diario sobre desarrollo, carrera profesional y las herramientas que utilizo de verdad