Squarespace is a well-loved platform that’s intuitive and easy to learn, allowing small businesses and bloggers to create and manage their own site without any coding knowledge required. The built-in style editor offers many options, such as: customized colours, fonts, layouts, and more. However, there are some things the style editor just can’t do. That’s when CSS comes to the rescue!

In this tutorial, we’ll show you how to remove hyphens site wide — hyphens make reading your content difficult and let’s face it, they just aren’t cute. It’s not the most glamorous blog post, but these bits of code are necessary for EVERY Squarespace website!

Note: if you purchased a Squarespace template from The Styled Square, this code will already be included in your website CSS.

How to remove hyphens site wide:

Go to Design > Custom CSS
Paste the following code:

To prevent your words from hyphenating on web, tablet and mobile:

p, h1, h2, h3 {

-webkit-hyphens: manual !important;

-moz-hyphens: manual !important;

-ms-hyphens: manual !important;

hyphens: manual !important;

}

To prevent your words from hyphenating on mobile only:

@media only screen and (max-width: 660px) {

p, h1, h2, h3 {

  -moz-hyphens: none;

  -ms-hyphens: none;

  -webkit-hyphens: none;

  hyphens: none;

  }}

PS. WE RECOMMEND ADDING BOTH CODE SNIPPETS TO YOUR WEBSITE!