^ ^                 ^ ^
=(o.o)=  ~byakuren  =(o.o)=
  m m                 m m

BAFS: Binary ASCII Flow Square font

BAFS: Binary ASCII Flow Square font

A bitmap font that visualises the binary representation of ASCII characters.

Motivation

When programming, we work with text that is ultimately represented as binary data. Each character has an underlying numeric value in ASCII, which in turn has a binary representation. I wanted to create a font that makes this relationship visible - allowing you to literally see the binary encoding of each character as you read.

The initial approach of simply displaying bits in a grid proved unreadable. Characters merged together into an indistinguishable mass of pixels, with no clear boundaries between glyphs.

The solution was to connect the active bits with flow lines, showing their relative positions while maintaining a consistent square shape for each character. This creates a visual language where the structure of each glyph directly reflects its binary encoding.

The Encoding

Each ASCII character uses 7 bits. These bits are mapped to positions in a 3x3 grid:

3 2 1
6 5 4
_ X 7

The X position (bit 6) is always filled for printable ASCII characters, providing a consistent anchor point. The _ position is always empty, creating visual separation between adjacent glyphs.

This layout means every character has: - A central reference point (the always-filled X) - Built-in spacing (the always-empty corner) - A predictable structure that becomes recognisable with use - A unique shape - no two characters can be identical translations of each other, since the fixed positions anchor every glyph to the same coordinates

Design Principles

Each character occupies a 9x9 pixel grid, with bit positions centred in their respective cells of the 3x3 layout.

Aside from the space character, which has been left blank, such that it’s sane to look at and read in the TTY, as that uses spaces for all the empty positions.

Connecting Active Bits

Active bits (1s) are connected to show their relationships:

• Adjacent bits: Connected with a straight line between their centres
• Separated bits: When traversal must cross an inactive bit, a box is drawn around the gap:

###
# #
###

This “gap box” indicates the path flows around the inactive bit, not through it. Where possible, gaps are positioned centrally to maintain visual balance.

Example: H and h

To illustrate the encoding, consider uppercase H and lowercase h:

Mapping H to the grid:

0 0 0
0 0 1
_ X 1

The two active bits (positions 3 and 6) are adjacent, forming a simple L-shape:

. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . # .
. . . . . . . # .
. . . . . . . # .
. . . . # # # # .
. . . . . . . . .

For lowercase h:

0 0 0
1 0 1
_ X 1

Bit 5 is active but separated from bit 3 by the inactive bit 4. A gap box bridges them:

. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . # # # . . .
. # # # . # # # .
. . . # # # . # .
. . . . # . . # .
. . . . # # # # .
. . . . . . . . .

Variants

Two variants are available:

bafs (standard)

The base design with single-pixel-width connections. Clean and minimal, but the thin lines can be subtle at small sizes.

bafss (serif)

Adds weight to connection endpoints, making the bit positions more visible at small sizes. Additionally ensures all pixels in each glyph are directly connected - no diagonal-only connections that leave pixels appearing to float.

Interactive Preview

Sample Text

the quick brown fox jumps over the lazy dog

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG

the quick brown fox jumps over the lazy dog

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG

the quick brown fox jumps over the lazy dog

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG

Full ASCII Table

All 128 ASCII characters arranged in a 32x4 grid. Control characters (0-31) and DEL (127) are displayed using the Unicode Control Pictures range (U+2400-U+241F, U+2421), which bafs/bafss include with their native control character glyphs.

␀␁␂␃␄␅␆␇␈␉␊␋␌␍␎␏␐␑␒␓␔␕␖␗␘␙␚␛␜␝␞␟
 !"#$%&'()*+,-./0123456789:;<=>?
@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_
`abcdefghijklmnopqrstuvwxyz{|}~␡

␀␁␂␃␄␅␆␇␈␉␊␋␌␍␎␏␐␑␒␓␔␕␖␗␘␙␚␛␜␝␞␟
 !"#$%&'()*+,-./0123456789:;<=>?
@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_
`abcdefghijklmnopqrstuvwxyz{|}~␡

␀␁␂␃␄␅␆␇␈␉␊␋␌␍␎␏␐␑␒␓␔␕␖␗␘␙␚␛␜␝␞␟
 !"#$%&'()*+,-./0123456789:;<=>?
@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_
`abcdefghijklmnopqrstuvwxyz{|}~␡

Downloads

bafs

bafss

Usage

For web use, include the WOFF2 files with @font-face:

@font-face {
  font-family: 'bafs';
  src: url('bafs-web.woff2') format('woff2');
}

The font works best at multiples of 9px (9, 18, 27, 36…) to preserve the pixel-perfect rendering.

License

Copyright 2025 (~byakuren)