Skip to main content

​
Bold Collection

The Bold collection features impactful, commanding typography designed for maximum visual impact. These pairings embrace brutalist design, condensed displays, and raw typographic power for portfolios, media sites, and experimental designs.

​
Style Characteristics

Bold pairings are characterized by:
  • Bold & Impactful: Heavy weights and condensed forms that dominate the viewport
  • Commanding: Typography that arrests attention and demands to be read
  • Raw & Brutalist: Unpolished, function-first aesthetics
  • Dramatic: High-contrast pairings with theatrical presence

​
Pairings in this Collection

Brutalist

Archivo Black + Archivo + Source Code Pro

Impact

Fjalla One + Josefin Sans + Fira Code

Poster

Oswald + Barlow + Inconsolata

Headline

Anton + Work Sans + Roboto Mono
Raw typographic power with Archivo Black’s heavy weight filling every pixel of the headline, balanced by regular Archivo for readable body text.

​
Installation

npx shadcn@latest add https://www.fonttrio.xyz/r/brutalist.json

​
Font Stack

  • Heading: Archivo Black — Ultra-heavy condensed display
  • Body: Archivo — Same family in readable weight
  • Mono: Source Code Pro — Clean, technical monospace

​
Typography Specs

  • H1: 2.75rem, line-height 1.05, letter-spacing -0.035em, weight 800
  • H2: 2.25rem, line-height 1.1, letter-spacing -0.025em, weight 700
  • H3: 1.75rem, line-height 1.2, letter-spacing -0.02em, weight 700
  • Body/Paragraph: Archivo, line-height 1.6
  • Code: Source Code Pro family

​
Design Philosophy

Brutalist typography rejects ornamentation in favor of pure function. Archivo Black’s condensed forms pack maximum impact into minimum horizontal space, while the superfamily approach ensures visual cohesion across weights.

​
Use Cases

Portfolios

Artist and designer portfolios with bold statements

Art Sites

Experimental and contemporary art platforms

Media

Sports, entertainment, and news with high impact

Marketing

Landing pages and campaign sites demanding attention

Events

Conference and event sites with theatrical presence

Music

Band sites and music platforms with edgy aesthetics

​
Quick Comparison

PairingHeading FontBody FontCharacter
BrutalistArchivo BlackArchivoRaw, unpolished power
ImpactFjalla OneJosefin SansCondensed Nordic strength
PosterOswaldBarlowTall, commanding presence
HeadlineAntonWork SansBold and unapologetic

​
Typography Details

Fjalla One + Josefin Sans + Fira CodeCondensed power meets art deco elegance. Fjalla One’s Nordic condensed forms dominate headlines, while Josefin Sans adds vintage geometric character.
npx shadcn@latest add https://www.fonttrio.xyz/r/impact.json
Oswald + Barlow + InconsolataCondensed impact with tall proportions. Oswald makes every headline a statement, balanced by Barlow’s slightly rounded approachability.
npx shadcn@latest add https://www.fonttrio.xyz/r/poster.json
Anton + Work Sans + Roboto MonoBold and unapologetic. Anton’s narrow impactful letterforms dominate the viewport, grounded by Work Sans’s humanist warmth.
npx shadcn@latest add https://www.fonttrio.xyz/r/headline.json

​
Installation Commands

# Install any pairing from this collection
npx shadcn@latest add https://www.fonttrio.xyz/r/brutalist.json
npx shadcn@latest add https://www.fonttrio.xyz/r/impact.json
npx shadcn@latest add https://www.fonttrio.xyz/r/poster.json
npx shadcn@latest add https://www.fonttrio.xyz/r/headline.json
Bold pairings require careful use of whitespace and hierarchy. Use sparingly for maximum impact — too much bold typography can overwhelm users.

​
Design Considerations

​
Line Height

Bold pairings use aggressive line-height (1.05-1.1) in headings to create tight, impactful stacking. This creates vertical rhythm that feels powerful rather than airy.

​
Letter Spacing

Negative letter-spacing (-0.035em) is more pronounced than in clean styles, creating optical density and visual weight.

​
Font Weight

Most headings use weight 700-800, creating maximum contrast with body text. This dramatic hierarchy guides the eye forcefully through the content.
All bold pairings work best against high-contrast backgrounds (black/white) or with large images that can balance the typographic weight.

Build docs developers (and LLMs) love

Get started for freeTalk to us