How to remove automatic hyphens in Squarespace

When I talked about Changing the size of mobile fonts in Squarespace at the very end of the post I gave you a quick tip on how to turn off automatic hyphenation.

However, I wanted to do a separate post about it since there are some things you should consider when deciding to do it.

Please note: it's not always necessary to use CSS to get rid of hyphenation. Squarespace has some quick tips on what to do without code to fix long word cropping.

Whether you want to stop words from hyphening on desktop or mobile, you only need to use one single CSS property to do so:

hyphens: none; 

So if for example you're removing hyphens from all your site's paragraph text you can use:

p {
  hyphens: none;
}

And if you're removing them from one type of header you can do this:

h1 {
  hyphens: none;
}

Or maybe, if you want to get rid of them altogether, you can group everything at once like so:

h1, h2, h3, p {
  hyphens: none;
}

Note: if you're looking to do this just for mobile, you just need to set the corresponding media query for hyphens to be turned off.

Now, usually, when you're removing the hyphens of paragraph text in Squarespace, there's a backup property that still breaks up the words when they become too long.

The problem is, that property isn't set for headings.

Which means that if you remove the hyphens from them, you'll end up with long words that overlook the size of your containers, like this:

Unless "entrepreneu" is a word in your branding, this doesn't look good.

So, if you want to remove hyphens from your headings, make sure to add the backup property that Squarespace is using for the body text called word-wrap.

When word-wrap is set to break-word, it basically haves your browser see if your long word fits on the next line before cutting it, and then it cuts it to fit your container.

However, like I mentioned in a previous post, keep in mind that by doing this you're letting your browser choose the best place to split your word if it doesn't fit in the next line, so in some cases you may end up with the final letter of your word dangling below the rest.

Nevertheless, this is how you can use that property to break your heading words without hyphens:

h1 {
  hyphens: none;
  word-wrap: break-word;
}

Alright friend so that's how you can remove hyphens in Squarespace, and how you can fix long headings overflowing your page when turning off their automatic hyphenation.

Until next time,

B.