Brutalist Typography

Brutalist Typography

"Aggressive, unpolished, and unapologetic. Text that demands attention by breaking the rules."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Rule Breaking: Text that overlaps, ignores margins, or deliberately clips off the edge of the screen.
2. Anti-Design: Intentional use of system fonts or "ugly" fonts (Times New Roman, Courier) in massive sizes.
3. Harsh Contrast: Clashing colors or stark monochrome.

Visual DNA

• Colors: Industrial Chic (Black, White, Red) or aggressive neon clashing (e.g., pure blue on pure red).
• Typography: System default fonts (Times New Roman, Arial, Courier New) blown up to 150px.
• Styling: Marquees, blinking text, underlines that cut through descenders.

Web Implementation

• Break the grid. Use absolute positioning or negative margins.
• CSS Example:

body {
  background-color: #fff;
  color: #000;
  font-family: 'Times New Roman', serif;
}

.brutalist-headline {
  font-size: 15vw;
  line-height: 0.7;
  letter-spacing: -5px;
  margin-left: -10px; /* Bleeds off screen intentionally */
  word-wrap: break-word; /* Let words break awkwardly */
}

.brutalist-highlight {
  background-color: #ff0000;
  color: #fff;
  padding: 0 10px;