⏱️ Lectura: 12 min

Generar un código de barras escaneable suele implicar una librería que produce una imagen o un SVG, y a veces hasta un servicio aparte. Libre Barcode propone algo distinto y elegante: que el código de barras sea, literalmente, una fuente tipográfica. Escribís un texto, le aplicás la fuente y el resultado se puede leer con cualquier lector.

📑 En este artículo
  1. TL;DR
  2. Qué es Libre Barcode
  3. Los tres formatos: Code 39, Code 128 y EAN/UPC
  4. Cómo funciona Libre Barcode: tipografía que se vuelve barras
  5. Manos a la obra: usar Libre Barcode en la web
  6. El encoder de Code 128 y el checksum
  7. Instalación local en Windows, macOS y Linux
  8. Casos de uso e implicaciones
  9. Limitaciones y cuándo no usarlo
  10. Preguntas frecuentes
    1. ¿Los códigos de barras de Libre Barcode realmente se escanean?
    2. ¿Necesito una librería de JavaScript para usarlas?
    3. ¿Puedo usar Libre Barcode en un proyecto comercial?
    4. ¿Qué diferencia hay entre Code 39 y Code 128?
    5. ¿Sirve para generar códigos QR?
    6. ¿Dónde calculo el dígito verificador de un EAN-13?
  11. Referencias

El proyecto, mantenido por Lasse Fister bajo la licencia SIL Open Font License, cubre los tres estándares más usados —Code 39, Code 128 y EAN/UPC— y resuelve la parte difícil (checksums incluidos) con un encoder en el navegador. Veamos cómo funciona y cómo integrarlo en tus proyectos.

TL;DR

  • Libre Barcode es una familia de fuentes open source (licencia SIL OFL) que dibuja códigos de barras escaneables a partir de texto.
  • Soporta tres estándares: Code 39, Code 128 y EAN/UPC, con y sin texto legible debajo de las barras.
  • Code 39 se escribe directo: basta envolver el texto entre asteriscos (*PROGRAMACION*) y aplicar la fuente.
  • Code 128 es más compacto pero exige un encoder que calcule el checksum y los códigos de inicio/parada.
  • Está disponible en Google Fonts, GitHub y como paquete npm, así que se integra con un @import de CSS.
  • No necesita librerías de generación de imágenes ni servidores: el render ocurre en el motor de fuentes del navegador.
  • Ideal para etiquetas, entradas, inventario y prototipos; para impresión crítica conviene validar DPI y quiet zone.

Qué es Libre Barcode

Libre Barcode es un conjunto de fuentes OpenType pensadas para una sola tarea: transformar texto en barras que un escáner puede interpretar. En lugar de calcular píxeles, el proyecto delega el dibujo en el motor de fuentes del sistema operativo o del navegador, el mismo que renderiza cualquier letra que estás leyendo ahora. La diferencia es que sus glifos no son letras: son las franjas negras y blancas que componen un símbolo de código de barras.

Esta idea tiene una ventaja enorme para desarrolladores. No hay que instalar generadores de imágenes, no hay dependencias binarias que compilar, ni un endpoint que devuelva un PNG. Una fuente pesa pocas decenas de kilobytes, se cachea como cualquier recurso estático y el render es vectorial, así que escala sin perder nitidez. Para LATAM, donde muchos equipos despliegan en hosting compartido o en planes gratuitos con recursos limitados, eliminar una librería pesada del lado del servidor es una ganancia concreta.

El proyecto se publica bajo la SIL Open Font License, la misma que usan fuentes como Roboto o Source Sans. Eso significa que podés usarla en proyectos comerciales, redistribuirla e incluso modificarla, siempre que respetes las condiciones de la licencia (básicamente, no vender la fuente por separado y conservar el aviso de licencia).

Ejemplo de código de barras Code 128 renderizado con tipografía
Las barras son glifos de una fuente, no una imagen generada.

Los tres formatos: Code 39, Code 128 y EAN/UPC

No todos los códigos de barras son iguales. Cada estándar tiene un propósito, un conjunto de caracteres soportados y reglas de validación propias. Libre Barcode cubre los tres más habituales y, en varias variantes, ofrece versiones con el texto legible impreso debajo de las barras (las que terminan en Text).

  • Code 39 — El más simple. Codifica letras mayúsculas (A-Z), dígitos (0-9) y unos pocos símbolos. No requiere checksum obligatorio y delimita el contenido con asteriscos. Es perfecto para inventario interno, etiquetas de almacén y prototipos rápidos.
  • Code 128 — Mucho más denso y capaz de codificar todo el ASCII. A cambio, exige un dígito de control (checksum) y códigos de inicio y parada. Es el estándar para logística, paquetería y etiquetas de envío.
  • EAN/UPC — El código de los productos de supermercado. EAN-13 maneja 13 dígitos con un dígito verificador final. Su estructura es fija, pensada para puntos de venta.
💡 Tip: Si solo necesitás algo que funcione hoy para inventario interno, empezá con Code 39. Al no requerir checksum, lo escribís a mano y lo ves funcionar en segundos.

Cómo funciona Libre Barcode: tipografía que se vuelve barras

La magia detrás de Libre Barcode está en las características de OpenType. Una fuente moderna no se limita a mapear un carácter a un glifo: puede aplicar ligaduras, alternativas contextuales y sustituciones. Estas fuentes aprovechan ese mecanismo para que cada carácter o secuencia de caracteres se reemplace por el patrón exacto de barras anchas y angostas que define el estándar.

En Code 39 la relación es casi uno a uno: cada letra o dígito tiene su propio glifo de barras, y los asteriscos de apertura y cierre le dicen al lector dónde empieza y termina el símbolo. Por eso podés escribir el texto directamente. En Code 128 el proceso tiene un paso extra: antes de aplicar la fuente, hay que pasar el texto por un encoder que añade el código de inicio, calcula el checksum y agrega el código de parada. El sitio oficial incluye ese encoder funcionando en el navegador.

graph LR
A["Texto: PROGRAMACION"] --> B{"Estandar?"}
B -->|"Code 39"| C["Envolver en *...*"]
B -->|"Code 128"| D["Encoder + checksum"]
C --> E["Aplicar fuente Libre Barcode"]
D --> E
E --> F["Codigo de barras escaneable"]

Lo interesante de este enfoque es que separa la lógica (qué dice el código) de la presentación (cómo se dibuja). El navegador, que ya sabe renderizar fuentes con precisión subpíxel, se encarga del trabajo pesado. El desarrollador solo prepara la cadena correcta.

Manos a la obra: usar Libre Barcode en la web

La forma más rápida de probar Libre Barcode es a través de Google Fonts, que aloja toda la familia. Importás la fuente con una línea de CSS y la aplicás como cualquier otra. Para Code 39, además, escribís el texto entre asteriscos:

/* CSS */
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39+Text&display=swap');

.codigo-39 {
  font-family: 'Libre Barcode 39 Text', cursive;
  font-size: 48px;
}
<!-- HTML: Code 39 se escribe directo entre asteriscos -->
<span class="codigo-39">*PROGRAMACION*</span>

Ese span se renderiza como un código de barras escaneable. Si lo apuntás con la cámara de un lector o una app de escaneo, devolverá PROGRAMACION. La variante 39 Text imprime además el texto legible debajo de las barras; si querés solo las barras, usá Libre Barcode 39 a secas.

⚠️ Ojo: Con Code 128 no podés escribir el texto crudo y esperar que escanee. Necesitás pasarlo primero por el encoder para que incluya el checksum y los códigos de control. Sin ese paso, el símbolo será inválido.
Editor de código mostrando CSS para importar una fuente de código de barras
Integrar la fuente toma una sola línea de @import.

El encoder de Code 128 y el checksum

El corazón técnico de Code 128 es su dígito de control. Cada símbolo del estándar tiene un valor numérico, y el checksum se calcula con una suma ponderada por posición, módulo 103. El encoder de Libre Barcode hace esto por vos en la web, pero entender el cálculo te permite generar códigos en el backend sin depender del navegador.

Veamos una implementación didáctica del checksum para Code 128 en su variante Code Set B (el conjunto que cubre ASCII imprimible), en Python:

# Python: checksum de Code 128 (Code Set B)
def code128b_checksum(texto: str) -> int:
    START_B = 104  # valor del codigo de inicio B
    # En Code Set B, cada caracter imprimible vale (ASCII - 32)
    valores = [ord(c) - 32 for c in texto]
    suma = START_B + sum((i + 1) * v for i, v in enumerate(valores))
    return suma % 103

# Ejemplo
print(code128b_checksum("PROG-2026"))  # imprime el valor de control

Con ese valor de control y los caracteres de inicio y parada, se arma la secuencia final de glifos que la fuente Libre Barcode 128 renderiza como barras. El encoder oficial encapsula toda esta lógica: pegás tu texto, copiás la cadena codificada y la usás con la fuente. Para producción a escala, replicar este algoritmo en el servidor evita render del lado cliente y permite, por ejemplo, generar miles de etiquetas en un job batch.

📌 Nota: El módulo 103 no es arbitrario: Code 128 define exactamente 103 símbolos de datos más los códigos de control. El checksum existe para que un escáner detecte lecturas corruptas antes de aceptar el dato.

Instalación local en Windows, macOS y Linux

Si preferís no depender del CDN de Google Fonts —por privacidad, por trabajar offline o por empaquetar la fuente en una app de escritorio— podés instalar los archivos TTF localmente. Descargá las fuentes desde el repositorio de GitHub o desde Google Fonts y seguí el procedimiento según tu sistema:

  • Windows — Doble clic en el archivo .ttf y pulsá Instalar, o copiá el archivo a C:\Windows\Fonts.
  • macOS — Doble clic en el .ttf para abrir Font Book y pulsá Instalar fuente.
  • Linux — Copiá los archivos a la carpeta de fuentes del usuario y actualizá la caché.
# Linux: instalar la fuente para el usuario actual
mkdir -p ~/.local/share/fonts
cp LibreBarcode128Text-Regular.ttf ~/.local/share/fonts/
fc-cache -f -v

Para proyectos web con bundler (Vite, webpack, etc.), también existe el paquete de Fontsource, que instala la fuente como dependencia npm y la sirve desde tu propio dominio:

# Cualquier SO: instalar via npm / pnpm / yarn
npm install @fontsource/libre-barcode-128-text
# luego en tu codigo:
# import '@fontsource/libre-barcode-128-text';

Casos de uso e implicaciones

El enfoque de Libre Barcode brilla cuando necesitás códigos de barras dinámicos sin sobrecargar la infraestructura. Algunos escenarios concretos: entradas para eventos con un identificador único por asistente, etiquetas de inventario impresas desde un panel web, comprobantes con número de seguimiento, o tableros internos donde cada fila muestra su propio código escaneable. Como el render es nativo del navegador, imprimir desde el propio HTML produce barras vectoriales nítidas.

Para equipos pequeños y startups de la región, la implicación es de costos y simplicidad. Eliminás una dependencia, reducís la superficie de mantenimiento y evitás llamadas a servicios externos que pueden caerse o cambiar de precio. Y al ser una fuente, funciona en cualquier contexto que sepa renderizar texto: PDF generados con motores que embeben fuentes, apps de escritorio con Electron, o documentos exportados desde un editor.

Limitaciones y cuándo no usarlo

No todo es ideal. La precisión de impresión depende del DPI y del tamaño de fuente: si las barras quedan demasiado pequeñas o el papel es de baja calidad, un escáner puede fallar. Conviene siempre dejar una quiet zone (margen blanco) alrededor del símbolo, algo que el estándar exige y que la fuente por sí sola no garantiza. Para aplicaciones críticas —retail con miles de lecturas diarias, farmacéutica, logística regulada— vale la pena probar con varios lectores físicos antes de producción.

Tampoco cubre formatos 2D como QR o Data Matrix, que requieren un enfoque distinto (matrices de módulos, no barras lineales). Y aunque EAN/UPC está soportado, generar un EAN-13 válido implica respetar su estructura de dígitos y el verificador; no basta con escribir trece números cualquiera. Para esos casos, calcular el dígito de control correctamente sigue siendo responsabilidad de tu código.

📖 Resumen en Telegram: Ver resumen

Preguntas frecuentes

¿Los códigos de barras de Libre Barcode realmente se escanean?

Sí. Como las fuentes reproducen los patrones de barras definidos por cada estándar, cualquier lector compatible con Code 39, Code 128 o EAN/UPC los interpreta correctamente, siempre que el tamaño y la impresión sean adecuados.

¿Necesito una librería de JavaScript para usarlas?

No para Code 39: se escribe el texto entre asteriscos y se aplica la fuente. Para Code 128 sí hace falta un paso de codificación (el encoder oficial o tu propia función de checksum), pero el render final no requiere librería alguna.

¿Puedo usar Libre Barcode en un proyecto comercial?

Sí. Está publicada bajo la licencia SIL Open Font License, que permite uso comercial, redistribución y modificación, conservando el aviso de licencia y sin vender la fuente por separado.

¿Qué diferencia hay entre Code 39 y Code 128?

Code 39 es simple y no exige checksum, pero ocupa más espacio y solo cubre un conjunto reducido de caracteres. Code 128 es más compacto, soporta todo el ASCII y requiere un dígito de control, lo que lo hace el estándar preferido en logística.

¿Sirve para generar códigos QR?

No. Libre Barcode genera códigos lineales (1D). Los QR y Data Matrix son códigos 2D con una estructura de matriz totalmente distinta que no se puede representar con una fuente de barras.

¿Dónde calculo el dígito verificador de un EAN-13?

El dígito verificador de EAN-13 sigue un algoritmo de suma ponderada propio; conviene calcularlo en tu backend antes de pasar la cadena a la fuente. La fuente dibuja las barras, pero no valida que el dígito sea correcto.

Referencias

📱 ¿Te gusta este contenido? Únete a nuestro canal de Telegram @programacion donde publicamos a diario lo más relevante de tecnología, IA y desarrollo. Resúmenes rápidos, contenido fresco todos los días.

Categorías: Noticias Tech

Andrés Morales

Desarrollador e investigador en inteligencia artificial. Escribe sobre modelos de lenguaje, frameworks, herramientas para devs y lanzamientos open source. Cubre papers de ML, ecosistema de startups tech y tendencias de programación.

0 Comentarios

Deja un comentario

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.