How Do You Superscript in Squarespace?

Superscripting text in Squarespace involves adding smaller text slightly above the normal line of type, often used for things like the "th" in "5th" or when writing mathematical expressions (e.g., x²). While Squarespace provides some built-in formatting options, it doesn't directly include a button for superscripting. However, there are ways to achieve this by using HTML code within Squarespace’s text blocks. Here are the steps:

Using HTML Code in Text Blocks

1. Access the Text Block:
2. Navigate to the page where you want to add the superscript text.
3. Click the Edit button on the desired section or block.

4. Within the block, add a Text element, if there isn't one already.

5. Enter HTML Mode:

6. Click on the text block to place the cursor where you want to enter the superscript text.

7. Click on the pencil/edit icon which allows you to enter HTML code.

8. Insert Superscript HTML Code:

9. In the HTML editing window, type your text and use the <sup> HTML tag to achieve superscripting. For example: html The formula for water is H<sub>2</sub>O.

10. Here’s an example for a simple "10th": html This is the 10<sup>th</sup> example.

11. Save and Preview:

12. Save your changes and preview the page to ensure the superscript is displaying correctly.

Using Custom CSS (Advanced)

You can also achieve superscripting by using CSS. This method may be beneficial if you need to apply a consistent superscript style across multiple instances or across your entire site.

1. Access Custom CSS:

2. Go to Home Menu > Design > Custom CSS.

3. Add CSS for Superscript:

4. Add the following CSS code: css .superscript { font-size: 0.8em; vertical-align: super; }

5. Apply the Style:

6. Go to the text block where you want to add superscript text.
7. Wrap your text in a custom class you defined, like this: html This is the 10<span class="superscript">th</span> example.

Considerations and Limitations

• HTML Knowledge: Basic knowledge of HTML is necessary. If you're not familiar with HTML, the simplest method is to use the basic HTML tags.
• Consistent Styling: Using CSS ensures uniform styling throughout your website but requires a bit of technical setup.
• Custom Code: Injecting custom HTML and CSS into Squarespace text blocks can sometimes conflict with the platform's built-in styles. Always preview your changes and ensure they display correctly on different devices (desktop and mobile).

By following these steps, you can effectively add superscript text to your Squarespace website, making your content both clear and visually appealing.