No more unbalanced headlines in your design

This post/video started when I read an article by Neural DSP called How to get a good bass tone. And the headings are centered, with an orphan word hanging.

It reminds me that when I built Elementor's homepage I had to manually enter line breaks to match the design:

Never add manual line break tags (<br>) to your headings!

Balance all your headlines

If you want your headlines to balance automatically you can apply this CSS code to all headlines, and bring balance to the force:

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

Use a class to balance specific headlines

You can also apply a class to specific headlines:

.balance {
    text-wrap: balance;
}

Use a class to balance and center headings

And if you want to center it, then:

1. Set the amount of characters to your width (or any unit you see fit). I use 20ch for 20 characters wide.
2. Then use margin auto to the left and right sides. Instead of using margin-right or margin-left use margin-inline-start and margin-inline-end respectively

.balance {
    text-wrap: balance;
    max-inline-size: 20ch;
    margin-inline-start: auto;
    margin-inline-end: auto;
    text-align: center;
}

You can also use heading levels (h1, h2 etc.) instead of a class.