GRAVITAS®

Guide — poured 07.2026 — read time 4 min

How the
letters work

The blueprint behind the foundry. Exposed, like everything else here.

01 — The Concept

BRUTALISM × SWISS PUNK

A foundry that sells weight

GRAVITAS is a fictional independent type foundry with five invented typefaces — BETON, KAPUTT, SIRENE, ASPHALT MONO and GRAVITAS VF. The premise: a foundry whose product is literally heaviness, so the site itself must throw its weight around.

The aesthetic pulls from two schools. Web brutalism: raw structure, visible borders, no decoration that isn't doing a job — the site wears its grid like exposed rebar. Swiss punk (think Weingart tearing up the grid he was taught): rigorous typography pushed until it gets loud — one violent accent color (safety orange, #FF4400) against black ink and concrete paper.

Everything on the page is set in one real variable font — Anybody (Google Fonts, wght 100–900 × wdth 50–150). The five "typefaces" in the catalog are the same font wearing five disguises, each a different coordinate in the axis space. That's the joke, and also the demo.

02 — The Techniques

5 TRICKS

Exposed machinery

↑ one font, two axes, zero images

Cursor-proximity variable type

T.01

The hero word is split into per-letter <span>s. Every frame, each letter measures its distance to the cursor, maps nearness onto weight and width targets through a smoothstep curve, then lerps its current value 11% of the way there. The lerp is what makes it feel like liquid instead of a rollover effect — no letter ever jumps.

// nearness 0→1, eased, then chase the target
const ease = (1-k)*(1-k)*(3-2*(1-k));
s.w += (targetW - s.w) * 0.11;
el.style.fontVariationSettings =
  `'wght' ${s.w}, 'wdth' ${s.d}`;

Touch & idle fallback: the wave

T.02

No cursor, no problem. On touch devices (hover: none) — or whenever the mouse has been still for 2.5 seconds — the same letters switch targets to a phase-offset sine wave, so the word breathes on its own. One animation loop, two brains. The loop also stops entirely when the hero scrolls off screen (IntersectionObserver), so it never burns battery for nothing.

const ph = t * 1.6 - i * 0.55; // offset per letter = wave
targetW = 520 + 380 * Math.sin(ph);

The specimen lab

T.03

Three native <input type="range"> sliders write straight into font-variation-settings and font-size on a contenteditable paragraph — a working type tester in ~30 lines, no library. Presets are just buttons carrying their three axis values in a data-preset attribute.

sample.style.fontVariationSettings =
  `'wght' ${w.value}, 'wdth' ${d.value}`;

One font, five typefaces

T.04

Each catalog card gives its preview a distinct axis coordinate — BETON sits at heavy/narrow, SIRENE at wdth 52, ASPHALT MONO fakes a terminal with letter-spacing. On hover the coordinate mutates (KAPUTT hollows out to wght 300 and spreads; GRAVITAS VF slams from 100 to 900) because font-variation-settings is a transitionable CSS property in modern browsers.

.p-gravitas{ font-variation-settings:'wght' 100, 'wdth' 75; }
.card:hover .p-gravitas{ font-variation-settings:'wght' 900, 'wdth' 135; }

Brutalist chrome

T.05

The structure is the decoration: 3px borders everywhere, a faint 64px background grid from two linear-gradients, a marquee built from one CSS keyframe translating a duplicated track −50%, stepped (steps(3, end)) hover transitions so even the easing feels mechanical, and a scrollbar restyled to match the ink. Scroll reveals stagger via a --i custom property multiplied into transition-delay.

.reveal{ transition-delay: calc(var(--i) * 90ms); }

03 — How It Was Made

NO BUILD STEP

Poured by hand

This site was built by Claude (Fable 5) writing vanilla HTML, CSS and JavaScript by hand — no frameworks, no build step, no image assets. Two HTML files, one webfont, one accent color. Reduced-motion users get a calm version: static bold letters, no marquee scroll, reveals without transforms.

It's one of 25 deliberately different sites in the Fable Showcase, an experiment in how far one model can stretch across design languages. See the whole set at fable-25.pages.dev.

04 — Steal This

TAKE IT

Concrete takeaways

  • Lerp, don't set. Any cursor-reactive effect goes from jittery to expensive-feeling with one line: value += (target − value) × 0.1 inside requestAnimationFrame.
  • Variable fonts are a free animation system. One Google Fonts file gives you a two-axis design space you can drive with sliders, scroll, sound or a cursor. Transition font-variation-settings in CSS for hover states that feel physical.
  • Design the no-cursor case first. Touch users see your hero longer than mouse users hover it. Give the effect an autonomous idle mode (a sine wave costs three lines) instead of shipping a dead poster.
  • Stagger with a custom property. style="--i:3" plus transition-delay: calc(var(--i) * 90ms) choreographs an entire grid with zero JavaScript timers.
  • Commit to one accent. Black, white and a single loud color reads as a decision. Fourteen tasteful pastels read as a committee.