Free Squarespace Plugin: Hanging Quotation Marks

Aug 09, 2021
2 min read
Illustration by Mayara Lista

Use hanging quotes to perfect your typography on your next Squarespace project.

Punctuation that sits in the margins is known as hanging punctuation. The purpose of hanging punctuation is to keep a clean, even edge to flush left text, rather than having a small indentation wherever there is a punctuation mark.

Non-Hanging Punctuation

“When I am working on a problem, I never think about beauty but when I have finished, if the solution is not beautiful, I know it is wrong.”

— Buckminster Fuller

↓

Hanging Punctuation

When I am working on a problem, I never think about beauty but when I have finished, if the solution is not beautiful, I know it is wrong.

— Buckminster Fuller

Here’s examples from two recent Detraform projects:

Step 01
Custom CSS

In the Custom CSS window add the following code.

/* Hanging punctuation */

#block-ID h2 {
  margin-left: .01em;
}

#block-ID {
  h2:before {
    content: '“';
    position: absolute;
    //font-family: "Platform-Bold";
    font-size: 2.3em;
    margin-left: -.6em;
    font-style: italic;
    margin-top: 10px;
    @media only screen and (max-width: 640px) {
      margin-left: -.5em;
      margin-top: 5px;
    }
}
  h2:after {
    content: '”';
    position: absolute;
    //font-family: "Platform-Bold";
    font-size: 2em;
    //margin-left: -.1em;
    font-style: italic;
    margin-top: 10px;
}
}

Step 02
Adjust the code

Target your text block with by updating the block ID. Change the font type from h2 if needed. Play with the parameters to change the font, font size and margins. Don’t forget to check mobile.

Commission Detraform to clarify your message and produce a lead generating piece of marketing called, your website.