Key Factors in Typography and Color Legibility

GRAVIFICER // LEGIBILITY · SIGNAL ARCHITECTURE

SYS::GRAVIFICER · TX-NODE · ACTIVE

GRAVIFICER

TRANSFORM · CLARIFY · REFRAME · TRANSMIT

// INFOGRAPHIC · 001 · SIGNAL INTENT

LEGIBILITY IS THE
FIRST ACT OF DESIGN

Before a viewer can receive your concept, your emotion, your argument — they must be able to read the words and perceive the colors. Legibility is not aesthetic polish. It is signal infrastructure. Without it, every other decision you make is transmitted into static. This transmission covers the two primary legibility systems: typography and color. Each has rules. Each has failure modes. Both are correctable.

// INFOGRAPHIC · 002 · FONT LEGIBILITY

TYPOGRAPHY:
WHAT KILLS READABILITY

Every font choice either amplifies or degrades the signal. The following comparison maps the failure state against the operative standard.

// NOISE STATE

Decorative display font used for body copy

Font size below 14px for sustained reading

Line-height under 1.4 — lines collide

Letter-spacing zero on all-caps labels

More than 3 typefaces in one layout

Thin weight (100–200) at small size

Justified text with no hyphenation

Long line length over 85 characters

NOISE · SIGNAL LOST

// SIGNAL STATE

Display font for headlines, body font for text

Minimum 14–16px for body, 12px for labels

Line-height 1.6–1.75 for comfortable scan

Letter-spacing 0.2–0.45em on all-caps

Two typefaces maximum — one display, one body

Light weight only on large, well-spaced type

Left-aligned, ragged right — natural rhythm

Line length 55–75 characters for body

SIGNAL · TRANSMISSION CLEAR

// INFOGRAPHIC · 003 · TYPE SCALE

THE GRAVIFICER TYPE HIERARCHY

Three roles. One function each. No font serves two masters simultaneously.

ROLE

SPECIMEN

SPEC

DISPLAY

SIGNAL

Orbitron 900
≥18px

LABEL

// TX-NODE

Share Tech Mono
10–13px

BODY

Readable at distance and up close. Comfortable rhythm.

Exo 2 200
14–15px

BOLD UI

STATUS CONFIRMED

Exo 2 700
13–14px

// INFOGRAPHIC · 004 · WEIGHT SPECTRUM

WEIGHT & CONTEXT MAPPING

Font weight is not emphasis. Weight is a signal of hierarchy. Misapplied weight inverts the architecture.

THIN / 100–200LARGE DISPLAY ONLY

REGULAR / 400BODY COPY · CORE

SEMIBOLD / 600UI LABELS · MODERATE

BOLD / 700–900HEADLINES · IMPACT

MIXING ALL WEIGHTSNOISE · COLLAPSE

// INFOGRAPHIC · 005 · FORCE DIAGRAM

FORCES THAT SHAPE LEGIBILITY

// INFOGRAPHIC · 006 · COLOR LEGIBILITY

COLOR: CONTRAST RATIOS
FAILURES AND STANDARDS

WCAG defines contrast ratios as the luminance gap between foreground and background. Below 3:1 is failure. 4.5:1 is the minimum for body copy. 7:1 is optimal. The following specimens demonstrate each level.

RATIO CHECK

This text fails legibility. The contrast is below 2:1. It cannot be read without strain. This is noise disguised as design.

FAIL · 1.8:1

RATIO CHECK

This text passes at the minimum standard. Steel blue on near-black achieves approximately 4.5:1. Readable but watch context — small sizes will strain.

PASS · 4.5:1

RATIO CHECK

Near-white on near-black. This achieves maximum contrast. Clean. No strain at any size. This is the signal-level standard for primary text.

PASS · 15:1

// INFOGRAPHIC · 007 · PALETTE

THE GRAVIFICER COLOR SYSTEM

Three accent channels. One background. Two text levels. Each color assigned a single function — no color serves two roles.

#04060a

BACKGROUND

Near-black base. Every signal sits on this.

#00fff7

CYAN

Signal · System · Active · Truth

#ff003c

MAGENTA

Warning · Wrong · Noise · Collapse

#ffe600

AMBER

Process · Forge · In progress

#f0f6ff

PRIMARY TEXT

Near-white. Headlines. Core content.

#7ab0cc

SECONDARY TEXT

Steel blue. Body copy. Support text.

// INFOGRAPHIC · 008 · COLOR RULES

COLOR LEGIBILITY RULES

Each rule is a constraint that protects signal. Violating them does not create expression — it creates static.

// NOISE STATE

Low-contrast accent on accent (cyan on magenta)

Pure white text on colored backgrounds

More than 3 accent colors active at once

Color as decoration without meaning

Light gray text on white background

NOISE · UNREADABLE

// SIGNAL STATE

Accent always on dark neutral base only

Match text color to its semantic role

One accent per zone — no color competition

Every color communicates a defined function

Minimum 4.5:1 contrast on all body copy

SIGNAL · PRECISION

// COLOR CONTRAST SPECTRUM

FAIL ZONEBELOW 3:1

MINIMUM PASS3:1 — 4.5:1

AA STANDARD4.5:1 — 7:1

AAA OPTIMAL7:1 AND ABOVE

// INFOGRAPHIC · 009 · CORE AXIOM

GRAVIFICER · TRANSMISSION AXIOM

If a viewer must strain to read it,
the design has already failed before
the concept had a chance to transmit.
Legibility is not a finish coat.
It is the foundation layer.

READ THE TRANSMISSIONS ›

Quirky Flash Chronicles