Grids and fluid type
The Vercel homepage that shipped in October 2023 is documented in What will you ship? (December 2023), presented by Rauno Freiberg with Henry Heffernan, Glenn, and Alasdair Monk. The north stars were performance, constraint in visual flair, and bridging pages aesthetically; anything that performed badly, felt pompous, or was out of rhythm was not built. The aesthetic foundation came from a typeface family Basement made for Vercel that year, Swiss inspired and optimised for displays, with an iconography set to pair with it. Asking what pairs with a grotesque sans led the team to the Swiss design movement, “the raw exposure to the creation of design; blocks, grids, modularity,” and to a metaphor: Vercel is infrastructure for frameworks, so show a literal frame on every page.
The frame does work beyond metaphor. Keeping the grid in the same position as you navigate lets you see what content swaps out and how fast, lessens the appearance of a pseudo layout shift between views, and, in the essay’s words, “highlights incredible performance of server rendering.” Crosshairs inspired by traditional print center marks guide the eye. At 1080 wide, columns of 360 give a readable line length for 14 to 16px text, and because everything is a block the layout collapses nicely into mobile. The hero gradient runs the full colour wheel as a metaphor for creativity, prompted by the question in the title. Because design began right after Guillermo Rauch’s Config 2023 talk, the team used Figma’s then-new variables throughout, adopting Kevin Rupert’s accessibility-optimised Vercel colour system as colour variables, so the whole team could see pages in dark mode at different sizes in seconds.
Drawing the guides turned out to be the hard part of the Grid.System component. The usual method borders every cell on two adjacent sides, say right and bottom; it lacks the top and left borders of the grid itself and, worse, requires every cell to be filled. The answer was display: contents on a guides wrapper holding rows times columns absolutely positioned guide cells (position: absolute; inset: 0 so they do not interfere with the real children). Passing auto as a row or column still works, which it would not without display: contents. Crosses are absolutely positioned relative to a specified cell, so they can sit on any row and column combination, not just edges. And nothing in it touches a client-side API, so the whole grid is server rendered.
The grid also sets a rhythm. An accent colour on every call to action is industry standard, but “If every element made repetitive use of a strong accent color, the color would no longer feel as significant,” and the same holds for the grid and cross motif and for animation. The essay includes a map of the page with sections coloured orange for high novelty (a graph tooltip animating a long distance, icons pixelating on hover) and blue for low novelty micro-animations (floating cursors, icons scaling on hover). Scrolling the page, each animation segment is followed by an interlude, and high-novelty animations never appear in consecutive sections. That is visual rhythm as a layout decision.
The grid lines on the Next.js site, from Rauno’s Crafting the Next.js Website, are absolutely positioned pseudo elements that flex with the inner content and screen size. He borrowed the dotted line technique from Stripe: a repeating linear gradient gives more control over the dots than a dotted border, and a mask fades the ends on the same element. The variables are --height: 1px; --width: 5px; --fade-stop: 90%; --offset: -100px;, with a background of linear-gradient(to right, var(--color), var(--color) 50%, transparent 0, transparent) sized var(--width) var(--height). The same essay holds his first use of clamp. He had always adjusted type at manual breakpoints; the hero instead uses font-size: clamp(48px, 5vw, 76px);, which “helps to responsively adjust any property between a minimum and maximum value,” so title and subtitle scale more fluidly than fixed sizes at set widths. The figure below lets you change the three arguments and the viewport width. Watch where the line goes flat at each end: below one width the minimum wins, above another the maximum wins, and in between the size is simply 5vw.
Fluid type answers to the viewport. The Vercel site’s visuals answer to their container. All the supplementary visuals there are built in code with no external libraries, because images would have been simpler short term but React components gave pristine quality, granular control, and true responsiveness. With container queries stable in modern browsers, a widget can respond to how much space it actually has, which the window width does not reflect: .root { container-type: inline-size; } and then @container (max-width: 560px) { .scope { display: none; } }. Another code-driven visual, the orbit rings, moves an element on offset-path: content-box, which uses the parent as the trajectory and respects its radius; as of 2023 it misbehaved in Safari and Firefox, Safari 17.2 fixed it on 12/12, and an SVG circle path string was the fallback.
Andrew Swank’s personal site makes the same argument at a smaller scale. He built it from scratch and invites you to play with it, “to show how design and engineering can work together to create a better experience for both parties.” The features he lists are all sizing and colour decisions made in CSS: layout and typography sized from the viewport using vmin and rem to set the baseline font size; “Predictable sizing via max() and round() to snap to a 4-pixel grid”; heavy use of HSL custom properties so colours can animate without dulling (hover the logo to see it); and a variable font, Roboto Flex, animated smoothly with font-variation-settings.
A rem baseline only earns its keep if you respect the setting it is relative to, which is Paco Coursey’s subject in px vs rem in font-size (2022). Whatever font size is set on html is what rem is relative to; percentages in font-size are em divided by 100, except on html, where there is no parent and the reference is the browser’s font scaling, 16px by default on major browsers but adjustable from 9 to 72 in settings. Browser zoom (the ⌘+ and ⌘- keys) scales everything additively on top of that, and the two are different things. Almost all websites ignore scaling, either by hard-coding a size on html or by using px; the one he found doing it well was cnn.com, which scaled the main content with rem and left navigation and supplemental text alone. His Get the browser default font size (2023) gives the probe: set font-size: medium, which resolves to the browser default, typically 16px, then read the computed value from JavaScript; with Chromium set to Very Large it returns 24px.
For your own grids and type: decide what the frame is for before you draw it, and keep it in one place across pages so the reader can see what moved. Let type scale with clamp between a floor and a ceiling you chose on purpose, let components answer to their container rather than the window, snap to a grid so sizes stay predictable, and if you reach for rem, leave the root size alone so the reader’s own setting reaches the page.