Playground v2

Where things are perfectly broken — this serves as an experimental sandbox to learn and grow without limitations.

Hello there. This is where experiments sprout and blossom. Some even become features! Or they may become bugs that then become features. Or they... well yea, stuff happens.

Ctr-f TODO to quickly find things I'm working on implementation. Likely in order of top to bottom.

Typography Check

Have you heard of a "pangram story"? Supposedly they're pretty good tests for typography.

The quick brown fox, feeling uncharacteristically reflective, juggled a dozen quirky phrases before breakfast. He zipped across the meadow, vexing lazy dogs and dazzling every jittery jay perched on the crooked fence. By noon, he had questioned the value of his own velocity — how fast is fast enough, really, when time keeps leaping ahead?

As twilight arrived, the fox paused beside a pond shimmering with violet light. "Zoe's zebra quilt" he murmured, remembering the oddest gift he'd ever received, stitched from every hue and letter imaginable. He traced the embroidered alphabets with his paw — A through Z, upper and lower case — and decided perhaps the world wasn't made to be outrun, only read carefully.

The Typographer's Tale

A joyful mix of vowels and consonants spilled across the designer's desk, each waiting for its moment in print. "Pack my box with five dozen liquor jugs", she whispered — the old standby — then laughed, unsatisfied. She needed something wilder, something that stretched the tails of the g, y, and q without breaking the harmony of the line.

She tried again: "Jovial zebras quickly faxed quirky diplomas while vexed owls judged the kerning". Better. The counters breathed, the ligatures sang, and the spacing shimmered like music. The typeface, for a fleeting second, felt alive.

Pangram Prose

Sphinx of black quartz, judge my vow! A phrase both noble and nonsensical, yet it tests every serif and stroke. Jackdaws love my big sphinx of quartz — another line that rolls through diagonals, bowls, and crossbars. The typist's fingers flutter like a pianist's, exploring how each curve meets its neighbor.

Meanwhile, the jaded wizard quickly vexes the bold dwarf. The vowels glow, the descenders dip, and punctuation pirouettes between words: commas, colons, semicolons — all demand balance. For font makers, this is meditation in motion: every line a microcosm of contrast, texture, and rhythm.

Testing MDX

This section is here to make sure we can render richer MDX content cleanly, including interactive examples, figures, and code blocks.

Jakub

These first examples are my rendition of Details That Make Interfaces Feel Better by Jakub.

Make Text Crispy

On macOS, text rendering can sometimes appear heavier than intended.

Subpixel rendering

Default font smoothing uses subpixel antialiasing on macOS.

Antialiased rendering

Grayscale antialiasing produces thinner, crisper light text.

Setting -webkit-font-smoothing: antialiased or just antialiased in Tailwind makes text render slightly thinner and crisper.

<html lang="en">
  <body class="font-sans antialiased">
    <main>{children}</main>
  </body>
</html>

The best way to apply this is to add it to the entire layout. That way it applies to all of the text elements in your app.

Tabular Numbers

If your numbers shift when they update, use font-variant-numeric: tabular-nums. In Tailwind, use tabular-nums.

Default

1000

Tabular

1000

Press play to compare how the digits hold their width.

It makes the digits equal width. Keep in mind that some fonts change the look of numerals when this property is enabled.

Align Optically, Not Geometrically

Aligning items geometrically works great most of the time, but there are instances where it just looks off. When that happens, it is best to align items optically instead.

Show Padding

For example, when a button has both text and an icon, it is better to have a slightly smaller padding on the side of the icon to optically align the content.

Show Margin

Change the alignment mode to compare the play icon inside a circular button. In this version, only the icon is optically aligned.

This often happens with icons. While a lot of icon packs already account for this, there are shapes that still need to be optically aligned. I usually fix it by adjusting margin or padding depending on the container.

Show Margin

Change the alignment mode and click the button to see the difference.

For icons, the best way to fix it is in the svg itself, so no additional margin or padding needs to be added.

Images

Elephant at sunset — An elephant at sunset

Video

Example 1 from MDN

Example 2 from MDN

Tabs

HTML is the structure. It gives the browser the bones: headings, paragraphs, buttons, figures, and enough semantic shape for everything else to have a place to live.

Tabbed Text and Code Blocks

TypeScript version with an explicit User type.

type User = {
  id: string
  name: string
}

export function greeting(user: User) {
  return `Hello, ${user.name}`
}