T

Design Aesthetic Reference -- Typographic Brutalism

Type
Is
Everything

A typography-dominant branch of brutalist design that treats letterforms as the primary structural and visual material. The content is the design. The words are the interface. The rawness is the point.

Explore
Oversized Raw Monospaced Confrontational Typographic Brutalism Oversized Raw Monospaced Confrontational Typographic Brutalism

Typography

Raw Type
At Full Scale

Display / Anton

Scale Is Power

Heading / Bebas Neue

Condensed Gothic Headlines

Subheading / Space Grotesk

Geometric Sans With Character

Body / Space Mono

Raw monospaced text for body copy. The mechanical quality of monospace type reinforces the brutalist ethos -- evoking terminal output, typewriter manuscripts, and raw code.

Label / Space Mono Bold

System Caps Tracking 0.14em

Outline / Anton Stroked

Hollow Forms

Type Scale

14rem Aa
9rem Aa
3.5rem Aa
1.8rem Aa
0.95rem Aa
0.75rem AA

Font Pairings

Anton + Space Mono
Maximum contrast: massive condensed meets raw monospace
Bebas Neue + Space Mono
Poster-style headlines with clean terminal body
Space Grotesk + Space Mono
Same family lineage; geometric consistency with mono rawness

Color Palette

Black, White
& One Accent

Pure Black
#000000
Pure White
#FFFFFF
Off-White
#F5F5F0
Dark Charcoal
#1A1A1A
Ink
#0A0A0A
Warm Gray
#B0ADA8
Mid Gray
#6B6B6B
Concrete
#D8D5D0
Signal Red
#E63025
Industrial Yellow
#F5D000
Flat Blue
#2050E0
Deep Red
#B8201A
Raw Green
#28A828
Dark Yellow
#C8A800
Dark Blue
#1838A8

Components

Built From
Type Alone

01
Oversized Headlines
Single words or short phrases scaled to fill the entire screen width. Letterforms become graphic elements, not mere text. The headline is the layout.
Scale Display
02
Monospace Body Text
Raw, mechanical monospace type for body copy evokes terminal output and typewriter manuscripts. The unpolished rhythm of fixed-width characters signals authenticity.
Mono Raw
03
Thick Horizontal Rules
4px-8px solid black lines between sections create an industrial, newspaper-like cadence. The visible structural seams reveal the construction of the page.
Divider Structure
04
Outline Letterforms
Hollow text created with -webkit-text-stroke and transparent fill. The skeletal letterform exposes the anatomy of type, turning structure into decoration.
Stroke Display
05
Text As Texture
Repeated words, dense monospace paragraphs, and oversized characters cropped by viewport edges. Type becomes pattern and surface rather than only readable content.
Texture Pattern
06
Extreme Scale Contrast
A 200px headline beside 12px body copy. The dramatic hierarchical tension forces the eye through the composition. Size difference is the primary navigation cue.
Hierarchy Contrast
Type Is Structure // Scale Communicates Hierarchy // Rawness Is Intentional // Whitespace Is Active // Type Is Structure // Scale Communicates Hierarchy // Rawness Is Intentional // Whitespace Is Active //

Design Principles

The Brutalist
Type Philosophy

01

Type Is Structure

Letterforms replace images, icons, and decorative elements as the primary building material of the layout. Typography carries every ounce of the visual and structural weight.

02

Scale Communicates Hierarchy

The size difference between elements is the primary navigation cue, not color or iconography. A 14rem headline beside 0.85rem body copy -- the gap is the point.

03

Rawness Is Intentional

Unpolished, system-default, or deliberately harsh typographic choices signal authenticity and rejection of corporate smoothness. If it looks too clean, reintroduce tension.

04

Friction Over Comfort

Layouts are meant to provoke attention, not provide frictionless scanning. Discomfort is a valid design outcome. The collision of massive and tiny generates visual dynamism.

Visual Effects

CSS-Only
Type Effects

Ag

Extreme Scale Type

Viewport-filling letterforms that function as graphic elements. clamp() and vw units ensure responsive dominance.

RAW

Outline Letterforms

-webkit-text-stroke with transparent fill creates hollow skeletal type that exposes letterform anatomy.

Tight Negative Leading Stacked

Tight Line Stacking

Lines set at 0.82 line-height overlap and compress, creating dense typographic blocks of visual weight.

01 TYPE IS STRUCTURE
02 SCALE = HIERARCHY
03 RAW !== BROKEN
04 WHITESPACE: ACTIVE
05 FRICTION > COMFORT
06 CONTENT == INTERFACE
07 CONTRAST -> ENERGY
08 HONESTY OF MEDIUM
09 NO DECORATION
10 ----------------
11 FONT: SPACE MONO
12 WEIGHT: 400 / 700
13 SIZE: 0.95REM
14 LEADING: 1.65
15 TRACKING: DEFAULT
16 CASE: UPPER
17 ----------------

Terminal Monospace

Raw monospaced text evoking terminal output and code. Green-on-dark for maximum developer-culture authenticity.

No.

Signal Red Block

Single high-impact accent color on flat background. White type on red creates confrontational emphasis.

WIDE TIGHT TRACK

Extreme Letter-Spacing

Massively tracked uppercase vs. ultra-tight condensed type. The friction between spacing extremes creates tension.

Interactive Elements

Brutalist Buttons

Primary Action Outline Signal Red Text Link
The content is the design. The words are the interface. The rawness is the point. There is no hiding behind stock imagery or decorative chrome.
-- Typographic Brutalism Manifesto
TB

Start
Building
With Type

Strip away imagery, illustration, and ornament. Let typography carry the entire visual and structural weight. Scale is the tool. Contrast is the language. The screen is the concrete.

Back to Top