How to Remove Automatic Hyphens in Squarespace 7.1
Why Are There Automatic Hyphens in Squarespace 7.1?
If you've noticed words breaking awkwardly across lines on your Squarespace website, you're not alone. By default, Squarespace 7.1 applies automatic hyphenation to text blocks, which can sometimes create an uneven or distracting layout. While this feature helps with justified text alignment, it can be frustrating when it disrupts your site's visual flow.
Thankfully, there's an easy way to disable automatic hyphens using a small CSS snippet. In this guide, we'll walk you through the simple steps to remove hyphenation and improve your website's readability.
How to Remove Automatic Hyphenation in Squarespace 7.1
Step 1: Access Your Squarespace Custom CSS Panel
To add the necessary code, you'll need to access the Custom CSS panel within Squarespace:
Log into your Squarespace account and navigate to your website dashboard.
Click on "Design" from the left-side menu.
Select "Custom CSS" from the submenu.
Step 2: Add the CSS Code
Copy and paste the following CSS code into the Custom CSS editor:
/* Remove Hyphens */
p, h1, h2, h3, h4, h5, h6 {
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;
}
Step 3: Save Your Changes
Once you've added the code, click "Save" at the top of the panel. This will immediately disable automatic hyphenation across your entire site.
Step 4: Test Your Website
To ensure the changes have taken effect:
Visit different pages on your site and check paragraphs, headings, and text blocks.
Refresh the page if needed.
If hyphens are still appearing, try clearing your browser cache or checking your site in an incognito window.
Why Disabling Hyphenation Can Improve Readability
Hyphens can sometimes make text harder to read, especially when breaking up important keywords or brand names. Removing automatic hyphenation can:
✅ Create a cleaner, more professional look.
✅ Improve readability on mobile devices.
✅ Ensure consistency across different browsers.
If your site relies on precise typography and brand aesthetics, this simple CSS fix can make a big difference!
Need Help with Your Squarespace Website?
At The Growth Passport, we specialize in Custom Squarespace Website Design, Branding, and Monthly Website Support Services. If you need help perfecting your site’s layout, typography, or overall design, check out our Squarespace Website Support Services to keep your website looking polished and professional.
📌 Pro Tip: Want to ensure your entire website is optimized? Sign up for our Passport Club Email List and get access to our free Website Essentials Audit Checklist and Home Page Copy Formula!
Other Blog Articles You May Like
Explore More Blogs from The Growth Passport
