Complete Glyph Reference

Blocky Alphabet — Complete Glyph Reference

This document shows all available glyphs in the blocky text system, including both letters (A-Z) and symbols (punctuation).

Each glyph is shown with:

• ASCII Grid: Text representation of the 7-row grid
• SVG Preview: Visual rendering in dark theme

Letters (A-Z)

A

Width: 4 columns

ASCII Grid

+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 0 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+

SVG Preview

---

B

Width: 4 columns

ASCII Grid

+---+---+---+---+
| 1 | 0 | 0 | 0 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+

SVG Preview

---

C

Width: 4 columns

ASCII Grid

+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 0 |
+---+---+---+---+
| 1 | 0 | 0 | 0 |
+---+---+---+---+
| 1 | 0 | 0 | 0 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+

SVG Preview

---

D

Width: 4 columns

ASCII Grid

+---+---+---+---+
| 0 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+

SVG Preview

---

E

Width: 4 columns

ASCII Grid

+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 0 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+

SVG Preview

---

F

Width: 4 columns

ASCII Grid

+---+---+---+---+
| 0 | 1 | 1 | 1 |
+---+---+---+---+
| 0 | 1 | 0 | 0 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 0 | 1 | 0 | 0 |
+---+---+---+---+
| 0 | 1 | 0 | 0 |
+---+---+---+---+
| 0 | 1 | 0 | 0 |
+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+

SVG Preview

---

G

Width: 4 columns

ASCII Grid

+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 0 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+

SVG Preview

---

H

Width: 4 columns

ASCII Grid

+---+---+---+---+
| 1 | 0 | 0 | 0 |
+---+---+---+---+
| 1 | 0 | 0 | 0 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+

SVG Preview

---

I

Width: 1 columns

ASCII Grid

+---+
| 1 |
+---+
| 0 |
+---+
| 1 |
+---+
| 1 |
+---+
| 1 |
+---+
| 1 |
+---+
| 0 |
+---+

SVG Preview

---

J

Width: 3 columns

ASCII Grid

+---+---+---+
| 0 | 0 | 1 |
+---+---+---+
| 0 | 0 | 0 |
+---+---+---+
| 0 | 0 | 1 |
+---+---+---+
| 0 | 0 | 1 |
+---+---+---+
| 1 | 0 | 1 |
+---+---+---+
| 1 | 1 | 1 |
+---+---+---+
| 0 | 0 | 0 |
+---+---+---+

SVG Preview

---

K

Width: 4 columns

ASCII Grid

+---+---+---+---+
| 1 | 0 | 0 | 0 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 0 | 1 | 0 |
+---+---+---+---+
| 1 | 1 | 0 | 0 |
+---+---+---+---+
| 1 | 0 | 1 | 0 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+

SVG Preview

---

L

Width: 3 columns

ASCII Grid

+---+---+---+
| 1 | 0 | 0 |
+---+---+---+
| 1 | 0 | 0 |
+---+---+---+
| 1 | 0 | 0 |
+---+---+---+
| 1 | 0 | 0 |
+---+---+---+
| 1 | 0 | 0 |
+---+---+---+
| 1 | 1 | 1 |
+---+---+---+
| 0 | 0 | 0 |
+---+---+---+

SVG Preview

---

M

Width: 5 columns

ASCII Grid

+---+---+---+---+---+
| 0 | 0 | 0 | 0 | 0 |
+---+---+---+---+---+
| 1 | 1 | 1 | 1 | 1 |
+---+---+---+---+---+
| 1 | 0 | 1 | 0 | 1 |
+---+---+---+---+---+
| 1 | 0 | 1 | 0 | 1 |
+---+---+---+---+---+
| 1 | 0 | 0 | 0 | 1 |
+---+---+---+---+---+
| 1 | 0 | 0 | 0 | 1 |
+---+---+---+---+---+
| 0 | 0 | 0 | 0 | 0 |
+---+---+---+---+---+

SVG Preview

---

N

Width: 4 columns

ASCII Grid

+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+

SVG Preview

---

O

Width: 4 columns

ASCII Grid

+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+

SVG Preview

---

P

Width: 4 columns

ASCII Grid

+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 0 |
+---+---+---+---+

SVG Preview

---

Q

Width: 4 columns

ASCII Grid

+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 0 | 0 | 0 | 1 |
+---+---+---+---+

SVG Preview

---

R

Width: 4 columns

ASCII Grid

+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 0 |
+---+---+---+---+
| 1 | 0 | 0 | 0 |
+---+---+---+---+
| 1 | 0 | 0 | 0 |
+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+

SVG Preview

---

S

Width: 4 columns

ASCII Grid

+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 0 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 0 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+

SVG Preview

---

T

Width: 4 columns

ASCII Grid

+---+---+---+---+
| 0 | 1 | 0 | 0 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 0 | 1 | 0 | 0 |
+---+---+---+---+
| 0 | 1 | 0 | 0 |
+---+---+---+---+
| 0 | 1 | 0 | 0 |
+---+---+---+---+
| 0 | 1 | 1 | 0 |
+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+

SVG Preview

---

U

Width: 4 columns

ASCII Grid

+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+

SVG Preview

---

V

Width: 5 columns

ASCII Grid

+---+---+---+---+---+
| 0 | 0 | 0 | 0 | 0 |
+---+---+---+---+---+
| 1 | 0 | 0 | 0 | 1 |
+---+---+---+---+---+
| 1 | 0 | 0 | 0 | 1 |
+---+---+---+---+---+
| 1 | 0 | 0 | 0 | 1 |
+---+---+---+---+---+
| 0 | 1 | 0 | 1 | 0 |
+---+---+---+---+---+
| 0 | 0 | 1 | 0 | 0 |
+---+---+---+---+---+
| 0 | 0 | 0 | 0 | 0 |
+---+---+---+---+---+

SVG Preview

---

W

Width: 5 columns

ASCII Grid

+---+---+---+---+---+
| 0 | 0 | 0 | 0 | 0 |
+---+---+---+---+---+
| 1 | 0 | 0 | 0 | 1 |
+---+---+---+---+---+
| 1 | 0 | 0 | 0 | 1 |
+---+---+---+---+---+
| 1 | 0 | 1 | 0 | 1 |
+---+---+---+---+---+
| 1 | 0 | 1 | 0 | 1 |
+---+---+---+---+---+
| 1 | 1 | 1 | 1 | 1 |
+---+---+---+---+---+
| 0 | 0 | 0 | 0 | 0 |
+---+---+---+---+---+

SVG Preview

---

X

Width: 5 columns

ASCII Grid

+---+---+---+---+---+
| 0 | 0 | 0 | 0 | 0 |
+---+---+---+---+---+
| 1 | 1 | 0 | 1 | 1 |
+---+---+---+---+---+
| 0 | 1 | 1 | 1 | 0 |
+---+---+---+---+---+
| 0 | 0 | 1 | 0 | 0 |
+---+---+---+---+---+
| 0 | 1 | 1 | 1 | 0 |
+---+---+---+---+---+
| 1 | 1 | 0 | 1 | 1 |
+---+---+---+---+---+
| 0 | 0 | 0 | 0 | 0 |
+---+---+---+---+---+

SVG Preview

---

Y

Width: 4 columns

ASCII Grid

+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 0 | 0 | 0 | 1 |
+---+---+---+---+
| 0 | 0 | 0 | 1 |
+---+---+---+---+

SVG Preview

---

Z

Width: 3 columns

ASCII Grid

+---+---+---+
| 0 | 0 | 0 |
+---+---+---+
| 1 | 1 | 1 |
+---+---+---+
| 0 | 0 | 1 |
+---+---+---+
| 0 | 1 | 0 |
+---+---+---+
| 1 | 0 | 0 |
+---+---+---+
| 1 | 1 | 1 |
+---+---+---+
| 0 | 0 | 0 |
+---+---+---+

SVG Preview

---

Symbols

Available punctuation and special characters:

Hyphen (-)

Width: 3 columns

ASCII Grid

+---+---+---+
| 0 | 0 | 0 |
+---+---+---+
| 0 | 0 | 0 |
+---+---+---+
| 0 | 0 | 0 |
+---+---+---+
| 1 | 1 | 1 |
+---+---+---+
| 0 | 0 | 0 |
+---+---+---+
| 0 | 0 | 0 |
+---+---+---+
| 0 | 0 | 0 |
+---+---+---+

Character Code

Unicode: U+002D

---

Pipe (|)

Width: 1 column

ASCII Grid

+---+
| 1 |
+---+
| 1 |
+---+
| 1 |
+---+
| 1 |
+---+
| 1 |
+---+
| 1 |
+---+
| 1 |
+---+

Character Code

Unicode: U+007C

---

Apostrophe (')

Width: 1 column

ASCII Grid

+---+
| 0 |
+---+
| 1 |
+---+
| 1 |
+---+
| 0 |
+---+
| 0 |
+---+
| 0 |
+---+
| 0 |
+---+

Character Code

Unicode: U+0027

---

Quote (")

Width: 2 columns

ASCII Grid

+---+---+
| 1 | 1 |
+---+---+
| 1 | 1 |
+---+---+
| 0 | 0 |
+---+---+
| 0 | 0 |
+---+---+
| 0 | 0 |
+---+---+
| 0 | 0 |
+---+---+
| 0 | 0 |
+---+---+

Character Code

Unicode: U+0022

---

Question (?)

Width: 4 columns

ASCII Grid

+---+---+---+---+
| 1 | 1 | 1 | 1 |
+---+---+---+---+
| 1 | 0 | 0 | 1 |
+---+---+---+---+
| 0 | 0 | 0 | 1 |
+---+---+---+---+
| 0 | 0 | 1 | 0 |
+---+---+---+---+
| 0 | 0 | 1 | 0 |
+---+---+---+---+
| 0 | 0 | 0 | 0 |
+---+---+---+---+
| 0 | 0 | 1 | 0 |
+---+---+---+---+

Character Code

Unicode: U+003F

---

Exclamation (!)

Width: 1 column

ASCII Grid

+---+
| 1 |
+---+
| 1 |
+---+
| 1 |
+---+
| 1 |
+---+
| 1 |
+---+
| 0 |
+---+
| 1 |
+---+

Character Code

Unicode: U+0021

---

Usage Examples

Rendering Letters

import { blockyTextToSVG } from './utils/alphabet';

const svg = blockyTextToSVG('HELLO');

Available Characters

Letters: A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z

Symbols: -, |, ', ", ?, !

Character Spacing

Letters are separated by 1 column of space by default. This can be adjusted:

const svg = blockyTextToSVG('ABC', { charSpacing: 2 });

Theme Options

// Dark theme (default)
const darkSvg = blockyTextToSVG('TEXT', { theme: 'dark' });

// Light theme
const lightSvg = blockyTextToSVG('TEXT', { theme: 'light' });

Grid System

All glyphs use a 7-row grid system:

• Row 0: Top padding/ascender space
• Rows 1-2: Upper portion (PRIMARY color)
• Rows 3-5: Middle to lower portion (SECONDARY color)
• Row 6: Bottom padding/descender space

Width Variations

• Narrow (1-2 columns): I, J, apostrophe, pipe, exclamation
• Regular (3-4 columns): Most letters, hyphen, question
• Wide (5 columns): M, W, V, X

Color Zones

Colors are automatically applied based on row position:

• PRIMARY: Rows 0-2 and 6 (bright/foreground)
• SECONDARY: Rows 3-5 (medium/shading)
• TERTIARY: Reserved for future use

See Also

• Alphabet README - System overview
• Letter Glyphs - Letter documentation
• Symbol Glyphs - Symbol documentation
• Usage Guide - Detailed usage examples