How To Adjust The Font Size In Squarespace

Adjusting font size in Squarespace can enhance the readability and aesthetics of your website. Whether you want to change the font size for specific sections or globally across your site, this guide will walk you through the various methods to achieve the desired look.

Method 1: Using the Style Editor

1. Access the Style Editor:
   • Log in to your Squarespace account and navigate to the page you want to edit.
   • Click on the paintbrush icon in the top-right corner to open the Style Editor.
2. Select Fonts:
   • In the Style Editor, find the “Fonts” section. Here, you can adjust the font size for various text elements like headings, paragraphs, and buttons.
3. Adjust Font Sizes:

• Click on the dropdown menu next to the text element you want to modify, and select your desired font size. The changes will be reflected in real-time.

Method 2: Custom CSS

For more precise control, especially if you want to change font sizes for specific text blocks, you can use custom CSS.

1. Access Custom CSS:
   • Go to Design > Custom CSS in your Squarespace dashboard.
2. Add CSS Code:
   • To change the font size of specific elements, you can add CSS code. For example:

     .your-class-name {
         font-size: 20px; /* Change this value to your desired size */
     }
     

   • Replace .your-class-name with the actual class of the element you want to change. You can find this by inspecting the element in your browser.
3. Save Changes:

• After adding your CSS, make sure to save your changes.

Method 3: Using Inline Styles

If you want to adjust the font size for a specific text block without affecting others, you can use inline styles.

1. Edit the Text Block:
   • Click on the text block you want to modify.
2. Add Inline CSS:
   • Switch to the HTML view of the text block and add the following style:

     <p style="font-size: 18px;">Your text here</p>
     

   • Adjust the font-size value as needed.

Method 4: Using Code Blocks

For more complex formatting, you can use a Code Block to insert HTML and CSS directly.

1. Add a Code Block:
   • In the page editor, click on the “+” icon to add a new block and select “Code”.
2. Insert Your Code:
   • Add your HTML and CSS code as needed. For example:

     <style>
         .custom-text {
             font-size: 22px;
         }
     </style>
     <p class="custom-text">This is your custom text.</p>
     

3. Save and Preview:

• Save your changes and preview your site to see how it looks.

Conclusion

Adjusting font size in Squarespace is straightforward, whether you choose to use the Style Editor for global changes or custom CSS for specific adjustments. By following the methods outlined above, you can ensure that your text is not only visually appealing but also easy to read.

For further details on changing fonts, you can check out the Squarespace Help Center. Happy editing!