Soft hy­phens and non break­ing spaces equal bet­ter ty­po­graphy

I re­cently dis­covered two HTML spe­cial char­ac­ters that I hadn’t known about be­fore. The non break­ing space and the soft hy­phen.

The non break­ing space

The non break­ing space is just what it is: it adds an in­vis­ible space between two words keep­ing them from break­ing to a new line. This spe­cial char­ac­ter is use­ful when you have a para­graph and the last line has a single word left all by it­self.

In print, they call this an orphan or a wid­ow. The non break­ing space can link the last word or words to­geth­er so that the last word doesn’t have to be alone by it­self—isn’t that special. The non break­ing space char­ac­ter is written this way:  .

The soft hy­phen

The soft hy­phen is a spe­cial char­ac­ter that can be ad­ded between let­ters in words to no­ti­fy the browser where to break the word and show a hy­phen.

Now, I already knew about this fea­ture in CSS, but that fea­ture is still not sup­por­ted in Chrome as of this writ­ing yet. So while Fire­fox and IE would auto­mat­ic­ally add hy­phens, Chrome would be left out. I wanted a way to support all browsers, even the old ones and manually adding the soft hyphen does just that. The soft hy­phen char­ac­ter is written this way:­.

Manually adding soft hyphens to each word would be a pain. Thankfully someone came up with software that does it for you. Now I cut and paste my con­tent in­to this form and it out­puts the soft hy­phens in­to each word for me. After that, I have to replace the con­tent in my ed­it­or. It’s a few steps, but its worth it to get bet­ter ty­po­graphy es­pe­cially for mo­bile dis­play.

Check out “Soft Hy­phen­at­or”