The Shape of Your Words

One of the most underrated design skills in my opinion is adjusting copy until it looks right.

A sentence can be perfectly clear and still create an ugly shape. Take this line:

Build beautiful websites with a simple visual editor for teams that want to publish faster

Depending on the width of the container, it might break like this:

Build beautiful websites with a simple visual

editor for teams that want to publish

faster

That last word feels stranded.

You could also rewrite the sentence.

Build beautiful websites with a visual editor

made for faster publishing

Same idea. Better silhouette.

Rewriting is usually the right approach when copy needs to fit within fixed constraints, such as the headings in a website’s feature section.

But sometimes the original copy just works, especially in a hero section, where it is the first thing visitors see.

When you do not want to give up the perfect sentence, you may need to adjust the container width, tweak the font size, or change the letter spacing instead. It's a bit of a dance.

Copy has a silhouette

Every text block creates an outline. A paragraph can feel like a neat rectangle. A headline can feel like a staircase. A card description can taper awkwardly, leaving one lonely word hanging at the end.

That uneven edge is called the rag. Once you start noticing the rag, you realize how much it affects the feel of a layout. A bad rag can make a paragraph look messy even when the spacing, typeface, and grid are all doing their job.

This is where design and editing overlap. The words might be correct, but the shape might still be wrong.

Widows make layouts feel cheaper

A widow or orphan is a line of text that gets stranded on its own. The exact definitions can vary between print, web, and different style guides, but the practical problem is the same: a lonely line makes the text block feel awkward.

For example:

Create content your whole team can ship with

confidence

There is nothing grammatically wrong here. But that final word feels a bit abandoned. This version lands better:

Create content your team can ship

with confidence

It is cleaner, more balanced, and easier to hold in your eye. You could also rewrite it more actively:

Give your team the confidence

to ship content faster

Now the break happens at a natural pause. The two lines support each other.

This matters most in places where the copy is exposed: headlines, cards, CTAs, buttons, pricing tables, empty states, short paragraphs, and onboarding screens. Small pieces of copy are unforgiving. One lonely word can make the whole component feel less polished.

CSS can be a great help

Modern CSS gives us a few useful tools for better text wrapping. The two most useful are text-wrap: balance and text-wrap: pretty.

h1,
h2,
h3 {
  text-wrap: balance;
}
 
p {
  text-wrap: pretty;
}

text-wrap: balance is useful for headings, subheadings, and short blocks of text. It asks the browser to balance the lines so the text block feels more even.

Instead of this:

Build better content workflows for

modern publishing teams

You might get something closer to this:

Build better content workflows

for modern publishing teams

That is usually a nicer shape.

text-wrap: pretty is useful for body copy and descriptions. It tries to reduce awkward final lines, especially those lonely last words that make a paragraph feel unfinished.

Manual line breaks are powerful and dangerous

Sometimes, a manual line break is the cleanest solution. For example:

Beautiful copy<br className="hidden md:block" />
should also shape the layout.

That can be useful when you want a heading to break in a specific way on desktop, but flow naturally on mobile. The important part is restraint.

A manual <br /> is a design decision. Use it when the line break is intentional, hide it or change it on smaller screens, and check that it still works when the text changes. A beautiful desktop headline can turn into a strange mobile stack very quickly.