Monospaced words

This tool takes a familiar idea, monospaced text, and remixes it in a new way. Instead of making every letter the same width, it makes every word the same width instead.

The result is a block of text where each word occupies exactly the same horizontal space, regardless of how many letters it contains. A two-letter word like "is" stretches as wide as a long word like "pneumonoultramicroscopicsilicovolcanoconiosis." And while it may sound a bit strange at first, this small change opens the door to a starkly different reading experience.

Link

What is monospaced text?

Traditionally, monospaced fonts give every character the same amount of horizontal space. An i takes up as much room as a W. These fonts are widely used in coding environments, typewriters, terminal windows, and technical documents where clean vertical alignment is key.

Monospacing can make code easier to read, help with manual alignment, and provide a predictable structure. But when reading regular prose, monospaced text often feels rigid or outdated. That's because our eyes are used to proportional fonts, where narrow letters are narrow and wide ones are wide, creating a more natural rhythm.

This tool flips the idea on its head. It doesn't touch the letters. Instead, it looks at the words in a paragraph, finds the longest one, and scales every other word horizontally until they all match that width. It does this using a simple technique: wrapping each word in a <span>-tag and applying the style property transform: scaleX() to stretch it to size.

Punctuation and spaces are preserved, so the text remains readable, but the effect is instantly noticeable. The sentence structure holds, but the texture of the text changes. It feels uniform, balanced, even slightly mechanical but not in a bad way. More like a kind of poetic grid.

Link

A personal angle on reading

As someone who is dyslexic, I often rely on the shape and length of words to guide my reading. I don't always decode every letter. If I see a long word that begins with "int" and ends with a "t" then I might just assume it says "intelligent," even if it actually says something else.

That guesswork is usually fast and subconscious, but it can lead to mistakes, especially when words have similar beginnings or endings. What I found interesting about this monospaced-words layout is that it removes word length as a visual cue. Every word becomes the same shape on the screen, so I'm no longer making assumptions based on how wide something looks. I instead make the same exact guess, but using the visual density, or more crudely put the clutter inside the given area taken up by a single word.

At first, it was disorienting. But then my eyes started to anticipate where each word would appear. Since the layout ensures that all words are the same width, my reading pace adapted. I began darting my gaze directly to the centre of each word, because I knew exactly where it would land within a block of text. That predictability made it easier to scan the paragraph line by line, in a way that felt more controlled and less jumpy.

It's hard to say whether this would help or hurt anybody's reading speed, but it is a fresh and strange experience nonetheless. It doesn't fix everything, nor is it intended to, but for me it opened up new ways of thinking about typography, accessibility, and design.

Link

Why experiment with this?

This isn't meant to replace how we read every day. But it is a fun and potentially useful tool for exploring how layout affects perception. Designers might use it to create typographic artwork. Developers might apply it in visual interfaces where uniformity matters. And educators or researchers might find it valuable when exploring how form influences comprehension.

It's also just a playful way to interact with language and to see familiar sentences reshaped into something rigid yet fluid, mathematical yet readable. If nothing else, it invites you to slow down and look at text a little differently.

Enter a paragraph into the input box above. The words will adjust in real time, each one stretched to match the longest. Try mixing short and long words. Try a single sentence or a whole block of text. Watch how the layout settles into a strict visual rhythm. Then ask yourself: is this easier to read? Or harder? Or just more interesting?

Link

Technical note

This tool runs entirely in your browser. It doesn't use any canvas tricks or server-side rendering. Just plain HTML, CSS, and JavaScript. Each word is wrapped in a span, measured, and then transformed. It's lightweight, reversible, and easy to experiment with. This also means the texts reshaped by this script are still legible by other computers such as web-scrapers and assistive technology. If you're curious about how it works, feel free to explore the code.

LinkLink

Further reading

Widget made with staark