One line of CSS for better typography

Fix your wonky headings with text-wrap: balance

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[ShiloBuff]

As someoen who's a perfectionist and my UI always has to be aligned, this is one of the coolest additions. Even better is that defaulting to the normal behavior isnt a deal breaker with the lack of support.

[Martinsgundi]

Saw this in your most recent video it’s amazing.

Thanks Kev!

[artu-hnrq]

It's nice to be up to date with these news!

[PixelKhaos]

Oh nice, this popped up in autocompletion and hadnt heard of it but noticed how well it worked in responsive grids

[jstfd]

so cool! had no idea this existed until today, thanks for sharing

[alkadoHs]

I always find useful css tips to your channel that's annoying to css. Thank you kev, keep it up Your contents is Gold

[endlacer]

you also can try to reduce word-spacing or letter-spacing when you're just a few pixels top wide

[niner]

Cool new feature! This will make so many Art Directors happy whon you had to tell: "Sorry, we can't guarantee nice line-breaks".
Would also be nice if it was a bit more configurable, like how much it should be balanced. Maybe a value from 0% (not at all) to 100% (the actual reverse, first line as short as possible) and 50% what currently is "balanced".

[thebytespider]

I used this recently on a project, so thanks for this tip Kevin

[joan-mariacbrooks]

Tips like this is why I follow you; outside of Chef Guichon, nobody gets my attention faster when I log into YouTube.

[malek]

also we could do better approach. with white-space:nowrap. it will stay on one line and we could make the font smaller little bit

[hikari]

Omg! Where was this when I had to deal with those long titles on my websites?!

[theReal_WKD]

For those who get a warning using the property, you have to replace it by 'white-space'. This is essentialy the same and the value is still 'balance'.

[Siger]

I usually use special Unicode characters for that, like Non-Breaking Space and Non‑Breaking Hyphen.

[dancehalllyrics]

So what’s the exact difference between this and the already existing “white-space” property that seems to do the same when set to “no-wrap”?

[DampeSN]

Want another good typography tip? Explicitly set line-height and letter-spacing (in relative units). Just the act of setting it will make you _think_ about what they should be, which means you'll end up with something better than the default.

[emmanuelotamendi]

OMQ I was just struggling with this trying to Frankenstein it through min-max and stuff

[DasBauer]

Is there a css setting for defining a symbol for the split of a wrapped word?

[Sofia-tsgy]

i also thought this was called an orphan but after googling apparently it’s actually called a runt 😭

[DKSubconscious]

Fantastic! They need to have css that counters designers crazy decisions as well 😂