BITYPE
BiType — Jan A. Wojtaś
you will understand in due time...
RECOMMENDED

GUIDED BUILDER

First time? Walk through a simple 5-step wizard to choose, customize, trace and generate your custom binary glyphs.

FULL POWER

ADVANCED CREATOR

Access the complete typography workspace. Edit any glyph cell directly, load and save presets, and customize advanced borders/geometry.

01 GLYPH SOURCE
02 GLYPH 1 (BAR)
03 GLYPH 0 (CIRCLE)
04 APPEARANCE
05 GENERATE

CHOOSE YOUR GLYPH SOURCE

Select how you want to represent the binary cells (1s and 0s) in your custom typeface.

Use a Font

Pick characters from a library font (e.g. Space Mono or Courier) or upload your own TTF/OTF font file.

Upload Images

Upload raster images (PNG, JPG) and automatically convert/trace them into vector paths for each cell state.

Draw Your Own

Use the default geometric system (vertical bars and circle rings) and adjust their stem weights.

CUSTOMIZE GLYPH 1 (ACTIVE CELLS)

Upload an image or select a character to represent cell state '1'.

CUSTOMIZE GLYPH 0 (INACTIVE CELLS)

Upload an image or select a character to represent cell state '0'.

CUSTOMIZE TYPEFACE GEOMETRY & STYLES

Fine-tune cellular layouts, sizes, and coloring rules. Review the live rendering preview below.

Cell size (px): 48
Cell padding (px): 4
Letter spacing (px): 16
Canvas Background
#0a0a0a
Glyph 1 Color
#ffffff
Glyph 0 Color
#ffffff

EXPORT YOUR TYPEFACE

Your custom typeface is ready. Choose your desired output format below.

TRUETYPE FONT (TTF)

Download a standard desktop/web font file (.ttf) that you can install on Windows, Mac, or use in applications. Note: exported fonts are monochrome.

NOTE ON DOWNLOADS: Compiling custom TTF vector glyphs is CPU-intensive. If your browser prompts that the page is unresponsive, please click "WAIT". Do not close or refresh; the font download will trigger automatically in a few seconds.

IMAGE SHEET (PNG)

Download a high-resolution raster image (.png) sheet of your custom alphabet configuration.

VECTOR SHEET (SVG)

Download a scalable vector graphics file (.svg) sheet of your alphabet configuration, perfect for edits in Illustrator or Figma.

GLYPH_SELECTOR
Uses the default geometric BiType system: 1 draws a vertical bar, 0 draws a concentric circle ring.
Stem weight ratio: 0.25
No file
Uploaded images will render in cells. Color overlay tints the image hue while keeping details perceptible.
  • High-contrast images work best for tracing vector contours.
  • Non-square images will be stretched/squeezed to fit the 1:1 cell aspect ratio.
  • Pixels are binarized during rendering (light parts become background, dark parts become active color).

Images are processed and converted into vector paths. Learn how SVG Vector paths are generated.

Tint overlay opacity: 0.40
LIVE_PREVIEW
100%
0 characters
RENDER_SETTINGS
Cell size (px): 48
Cell padding (px): 4
Letter spacing (px): 16
Line spacing (px): 24
Canvas Background
#0a0a0a
Glyph 1 (Bar)
#ffffff
Glyph 0 (Circle)
#ffffff
Outer Glyph Borders
Inner Cell Borders
Cell Background Fill
Border Color
#222222
Border width (px): 1
BIT_FAMILY_SPECIMEN

BITYPE FONT FAMILY

The original bars and circles type system built on a 4x4 matrix, compiling a dual readability layer.

MATRIX THIN LIGHT REGULAR BOLD BASE
SPECIMEN PREVIEW
BITYPE SYSTEM
EDIT SPECIMEN TEXT (STANDARD MONOSPACE)
THIN Stem 15

Hairline vertical bars and open ring shapes. Maximum transparency.

BiType_Thin.ttf
LIGHT Stem 30

Delicate weight for clear rendering at moderately large sizes.

BiType_Light.ttf
REGULAR Stem 50

Default balanced stem weights. High readability with grid aesthetic.

BiType_Regular.ttf
BOLD Stem 80

Chunky bars and thicker circles. Strong visual footprint.

BiType_Bold.ttf
BASE Complete Prototype

Classic prototype built with solid black blocks for 1s and empty spaces for 0s.

BiType_Base.ttf
MATRIX LiberationMono

Each cell maps to a literal '1' or '0' glyph. High-surveillance aesthetic.

BiType_Matrix.ttf
GLYPH_GRID_CORRELATION

GLYPH MAP & BINARY STRUCTURE

Hover over a character box below to examine its internal 4x4 matrix configuration and corresponding binary stream array.

GLYPH
A
[1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,1]
1  1  1  1
1  0  0  1
1  1  1  1
1  0  0  1
                    
01 / CONCEPT

WHAT IS BITYPE?

It's a typeface system built from just two shapes/glyphs. Instead of drawing letters by hand, every letter, number, and punctuation mark is created by arranging these two shapes inside a 4×4 grid of 16 cells.

Each cell is either filled [1] (with your first shape) or empty [0] (showing your second shape). This filled-or-empty pattern creates the letter. The system makes data visible—your letters are essentially binary code made readable. But still... Only for those who know ;)

02 / GRAPHICAL MAP MATH

GRID CODE SCHEMATIC

The math behind BiType relies on mapping a 16-bit array to a 4x4 spatial layout. Index 0 starts at the top-left, wrapping to the right, and ending at index 15 at the bottom-right. Active cells (1) draw stem bars; inactive cells (0) draw circular rings.

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 4×4 INDEX PATTERN BIT = 1 (STEM BAR) BIT = 0 (CIRCLE RING)
03 / THREE IN ONE

THE TRIPLE NATURE OF THE NAME

  • Bi = 2 (Binary Code): Drawn solely using 1s and 0s.
  • Bi = 2 (2x2 Grid Blocks): A 4x4 grid is mathematically equivalent to four 2x2 grid blocks aligned together.
  • Bi = 2 (Dual Typography Layers): The letterform is built directly FROM typography (the 1s and 0s characters/shapes). You are always seeing and using two font layers at the exact same time.
04 / CONTEXT & HYPOTHESIS

DATA EXPOSURE & SURVEILLANCE

BiType was born in 2026 to make a point about how much we are being watched online. If all the hidden tracking cookies and data logs were drawn right on your face, would you notice them?

"If data collection were made visible through your own image, would you recognise yourself as a tracked entity?"

Every click you make is tracked and cataloged. BiType plays with this idea: what looks like random blocks or digital noise is actually a secret message. Once you know how to read the 4x4 grid, it's super easy to decode. It's hidden in plain sight!

05 / THE NO-DOWNLOAD CLAIM

THE GRID IS THE FONT

The first font you don't need to download! You can write it in apps and websites where you can only use text or simple images like Instagram, and you can encrypt messages. (Also, you can copy and paste it directly from the Creator tab!)

06 / MORE FUN USES FOR BITTYPE

DAW MIDI TRANSLATION

Did you know you can play BiType like an instrument? By mapping the 4x4 grids of letters to MIDI notes, you can feed text directly into hardware synths and DAWs (music production software).

Each solid cell (1) triggers a note, while empty cells (0) act as rests. Type a message, and it instantly plays back as a crazy chord progression or beat! Check out how we mapped the characters in our setup below:

MIDI DAW Translation screenshot
07 / POSTER INSTALLATION

ENDCORE speculative campus project

For the ENDCORE project, I pasted custom posters all over campus to get people talking about privacy. Inspired by old-school "If you're reading this, it's too late" letters, the posters are warnings hidden in plain sight. I even made a poster using an ASCII-art selfie to show how tech companies turn our private photos into raw data grids.

08 / ABOUT THE CREATOR

ABOUT ME

Jan A. Wojtaś

I am Jan A. Wojtaś, an 18 year old multidisciplinary artist. Born and raised in Barcelona with Polish nationality currently studying at LCI Barcelona in Spain. This is my first time building a web app, and I love to experiment with all kinds of creative mediums!

BiType is a fun project about hiding messages in plain sight. It combines my love for design, deep search, and community participation. I love experimenting, like using code to make art, ask questions, and think about how we share our lives online.

Big thanks to my friend Theo, this project wouldn't have been possible without your Claude membership!

Check out my other work!

09 / CREDIT

A-TYPOGRAPHY

Credit goes to the conceptual and formal inspirations from A-Typography. Explore their typographic experiments below:

10 / PROCESS

PRODUCTION PROCESS

The development of the BiType design system and web application followed a structured workflow translating conceptual sketches into a fully functional digital tool:

  1. Sketchbook: Initial conceptualization and grid drafts.
  2. Figma: Visual interface design and component layout.
  3. Claude: Coding structural logic, SVG exporters, and web interface elements.
  4. Antigravity AI: Refinement of the TTF custom compiler, visual overhauls, loading optimization, and GPU animation binding.
  5. GitHub: Version control and repository management.
  6. Vercel: Production deployment and global hosting.
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
PROCESSING...