Guide · how it was made
Pressure, at its own weight
ISOBAR renders one invisible field — atmospheric pressure — as two things at once: nested contour loops on a live synoptic chart, and the weight of the type that reports it. This page explains the palette, the faces, the contour engine, and the three build passes.
01 The concept
Fictional brand · a reading room for the sky
ISOBAR is a calm meteorological instrument for people who like their data to have a body. The single job of the page is to let a visitor feel a low-pressure system: watch it wind tighter as it deepens, read its central pressure off the chart, and — the point of the whole thing — see the numeral itself grow heavier as the air fills and thin to a hairline as the low bites down. Audience: designers, forecasters, and anyone who has ever tapped a barometer.
02 Palette
Argued from paper charts and the weather they carry
The bright #2A4C7A and #B4763A fail 4.5:1 as small text on vellum, so they are reserved for lines, marks and large figures; copy uses storm ink #16233A and its two derived slates (#39465A, #4E596A), all above 4.5:1.
03 Type
One variable face doing the heavy lifting
A variable font with a 100–1000 weight axis. Its wght is driven live from the barometric value, so the headline and every readout literally change weight with the pressure. This is the site's one act of typographic bravery.
IBM Plex Mono carries the chart furniture — labels, ticks, the valid-time stamp, legend. Tabular figures keep the readouts from twitching as the numbers change.
04 Techniques
SVG contour engine + variable-font-driven signature
The chart is a pressure field sampled on a 101×65 grid: a gentle background tilt, a Gaussian high in the north-east, and a rotating elliptical low with a trailing comma-trough. Every ~70 ms the field is re-sampled and run through marching squares at 4 hPa intervals. Edge crossings are keyed to their shared grid edges so segments stitch exactly into polylines, then each polyline is smoothed with a Catmull-Rom spline into the nested loops you see. Saddles are resolved by the cell-average rule.
The signature is the wiring: the low's central pressure is read every frame and mapped to a font-variation-settings:'wght' value on the <h1>, the big readout, and the pointer crosshair — a deep low draws its own number as a whisper (wght ≈ 170); a filling low thickens it back toward 500. Nothing is faked with discrete weights; it is one continuous axis following one continuous field. The whole thing is inline SVG + vanilla JS — no libraries, capped work per frame, paused when the tab is hidden, and settled to a single static frame under prefers-reduced-motion.
05 Iteration log
Three fine-tooth passes, each driving the field and asserting output
Pass 1 Craft
- The 3-hour tendency was computed by frame-to-frame finite difference and picked up the low's drift — it read a nonsensical “310 hPa rising”. Rewired it to the analytic deepening rate of the system; now a calm ±5 hPa/3h.
- The weight map bottomed out at wght 100, so the deep-low readout went ghost-faint. Raised the floors (readout 150, headline 300) so the number thins to a whisper but stays legible.
- Gradient-wind knots were pinned at the clamp ceiling; retuned the gradient scale so the figure breathes 12–88 kn with the low.
Pass 2 Depth
- Added a pointer crosshair that reads the local pressure anywhere on the chart — and renders that number at its own weight, so the signature works under your cursor, not just at the centre.
- Printed hPa value labels (960 / 980 / 1000 / 1020) on the bold isobars, anchored to the topmost point of each loop, so the chart reads as a real labelled analysis.
- Confirmed by driving
__isobar.setTime()across the cycle that both the headline weight and the isobar geometry change (screenshot-hash diff).
Pass 3 Hardening
- The legend promised a warm “high ridge” the monochrome chart never drew. Made it honest: isobars ≥ 1016 hPa now render warm, giving a genuine cool-low / warm-high second read.
- Fixed a reference-scale row that labelled 960 hPa but printed 974. Removed a redundant second background wash (Chanel rule).
- Verified 375 px has no overflow, focus-visible rings, rAF paused on hidden tab, and the reduced-motion path renders a settled deep low with zero console errors.