My website. cameron.stream
website docs processional-typeface.md
4.9 kB

Processional typeface #

Processional is a monumental condensed unicase display face derived from Cameron's Cosmic Liturgical Brutalism visual system. It translates the style's architecture rather than copying an identity mark: heavy vertical pylons carry the forms, thinner horizontal slabs establish interval, and true circular counters behave as apertures cut through stretched outer mass.

The face is public at /type/processional. It is separate from Around. Around uses Cameron's Ring grammar and remains the site's display face; Processional is a specimen and downloadable font for titles, posters, banners, coordinates, and other large-scale compositions.

Source of truth #

File Role
scripts/generate-processional-font.py Canonical glyph geometry, metrics, kerning, metadata, and build
scripts/requirements-font-build.txt Shared pinned build-only Python dependencies
public/fonts/processional-regular.ttf Generated desktop font
public/fonts/processional-regular.woff2 Generated web font
src/components/processional-specimen.tsx Public specimen content and semantics
public/processional-type.css Namespaced specimen composition, responsive behavior, and @font-face
src/index.tsx Canonical /type/processional route

The Python generator is the editable source. Never edit the generated font binaries directly.

Build #

The font build environment is separate from the Node runtime. On systems where the standard library cannot bootstrap venv, use uv:

uv venv --python python3 .venv-font
uv pip install --python .venv-font/bin/python -r scripts/requirements-font-build.txt
.venv-font/bin/python scripts/generate-processional-font.py

The generator writes TTF and WOFF2 files under public/fonts/. Builds are reproducible because the source sets a fixed SOURCE_DATE_EPOCH. Rebuilding unchanged geometry should not change either binary.

After a real font change, increment the query string on both font URLs in public/processional-type.css so browsers do not retain an older WOFF2.

Design grammar #

  • 1,000 units per em with an 800-unit cap/unicase field.
  • 112-unit vertical pylons establish the primary weight.
  • 76-unit horizontal slabs divide and align the field.
  • 96-unit diagonals are structural exceptions rather than decorative motion.
  • O, D, P, R, B, and the round numerals use true circular apertures inside vertically stretched outer forms.
  • A is a monument with a circular aperture and a processional doorway cut from its base.
  • Uppercase and lowercase Unicode codepoints map to the same full-height forms.
  • Inter remains body copy. Processional is deliberately unsuitable for paragraphs.

The circular counter is generic architecture within this visual system. It is not Cameron's Ring and must not be described or presented as one.

Proof strings #

Judge the face in words and at multiple scales:

PROCESSIONAL APERTURE MONUMENT
THE HORIZON IS AN ALTAR
A LONG WALK TO THE MACHINE
PYLONS CARRY THE WEIGHT
FIELD STUDY 03:14:15
AVATAR WAYWARD YOUTH ATLAS
SPACE PAPER TYPEFACE OPEN

Inspect A, B, O, P, R, S, 0, 3, 8, and @ individually. They contain the largest geometric risks. Then inspect ordinary words; a successful isolated glyph can still destroy rhythm in context.

Validation #

.venv-font/bin/python - <<'PY'
from fontTools.ttLib import TTFont

for path in (
    "public/fonts/processional-regular.ttf",
    "public/fonts/processional-regular.woff2",
):
    font = TTFont(path)
    font.ensureDecompiled()
    cmap = font.getBestCmap()
    required = (
        set(range(ord("A"), ord("Z") + 1))
        | set(range(ord("a"), ord("z") + 1))
        | set(range(ord("0"), ord("9") + 1))
        | {0x2018, 0x2019, 0x201C, 0x201D}
    )
    assert required <= set(cmap)
    assert font["OS/2"].usWeightClass == 700
    assert font["OS/2"].usWidthClass == 3
    assert "GPOS" in font
    print(path, len(font.getGlyphOrder()), "glyphs", len(cmap), "codepoints")
PY

pnpm typecheck
pnpm test
git diff --check

Browser proofing is part of the build. Check /type/processional and /other at 320, 393, 768, 1024, and 1440 pixels. Inspect the hero, editable specimen, poster overlay, construction glyphs, processional composition, alphabet, operating-scale text, and downloads in focused screenshots. Geometry checks alone cannot establish that the face is good.

Known limits #

  • One regular display weight; no variable axis.
  • Latin alphabet, decimal numerals, typographic quotes, and selected punctuation only.
  • Unicase by design.
  • The contrast between thick pylons and thin slabs loses force below ordinary display sizes.

Deployment #

Processional deploys with the site. After deployment, verify the page, both font downloads, the Other index entry, mobile width, and the live cache-keyed WOFF2 request.