Working with text blocks in Squarespace differs significantly from working with traditional word processing software. Utilizing CSS, you have complete control of how they appear on your website in terms of font, size and colour.
To change a block ID in Squarespace, use the Squarespace ID Finder.
Line Spacing
Control line spacing just like font styles by using your Site Styles panel. If your page contains lots of text, this can help ensure fonts look consistent throughout. Spacer blocks may help make text wider on mobile devices; however we advise keeping these to a minimum to maintain continuity across devices.
Change your line spacing if there is too much space between each line of text or your paragraphs appear too long and crowded. While this adjustment will affect all text blocks within your website, be sure to review both desktop and mobile pages before making changes.
To adjust line spacing, first select the text block or section you would like to edit, and use your mouse to nudge its sides up or down until desired size has been reached. To maximize precision while using Shift while dragging you may press Shift while moving.
Once you have selected a text block, the toolbar at the top of your page will display formatting options represented by icons like bold “B”, italic “I”, or paragraph symbols. Clicking an icon brings up a drop-down menu with available formatting options.
From the drop-down menu, select “Line Spacing”. When this box is checked, an adjustment slider appears that allows you to modify how much space is between each line of text. While this won’t have an impactful change on font size overall, this adjustment will affect how crowded and easy paragraphs read are.
Line spacing adjustments can make your website more visually appealing and easier to read, while at the same time potentially disrupt its layout and cause errors on live sites. If you need any advice regarding this topic, we suggest consulting a Squarespace expert.
Margin
When working with text blocks, it’s crucial to know the difference between margin and padding – two terms which often become confused with one another. Squarespace makes this easier as editing both padding and margin of a block can be done simultaneously with just one click, making it simpler to adjust overall size without scrolling up and down all of the time!
Padding refers to the space between a content block’s edge and its text, so a large amount may cause your text to appear too small or off center, while lacking enough padding may result in your words appearing squashed or stretched out.
Adjust the margin settings on your site by visiting the Page Layout Settings in the Pages panel and choosing to edit a particular page, or by editing individual blocks by clicking into them and choosing an option from Options menu. For more information about page and block margins read my blog post entitled, “Page and Block Margins: A Simple Guide.”
As well as standard text formatting controls, the text block offers some hot keys to help speed up editing processes. These can be found on the right side of its toolbar:
1) Undo () – Roll back any changes you made and remove them, 2) Redo () – Revert back a change that was undone previously,
3) Increase Indent (+) – This option indents the first line of your text block. 4) Bold (+b) – Makes font bolder than usual.
If you want to underline text on your website, depending on your version of Squarespace and keyboard shortcut or tweak your site styles will likely be necessary for underlining. Text blocks don’t support underlining text by default.
Version 7.1 and later allows you to add background colors to text blocks, providing an effective way of distinguishing your content when there is lots of it on a page.
Spacers
Squarespace sites feature blocks with many useful tools that help design websites, including button blocks for inserting buttons and contact forms, line blocks to create horizontal lines, spacer blocks for giving your content some breathing room, and the spacer block which provides extra breathing room on each page.
Squarespace pages by default create text blocks which fill the width of whatever section they’re placed into, making larger images or content push all the way left or right without making smaller sections seem too small for their contents. While this might work for your images or other types of media that need to be displayed completely left/right, it can sometimes make smaller sections appear too small for their needs.
So how can you fix this problem? Easily: by placing a spacer block above or below any text block that needs to remain the same width, creating a gap between texts so when your site is viewed on mobile phones or desktop computers you won’t see all of that squished text causing headaches!
Spacer blocks make resizing extremely straightforward: just drag vertically up or down from their bottom edge; for horizontal adjustments simply drag across from one side to the other. Even better still, when you resize them it automatically adjusts other parts of your content so they maintain their width as you resize a spacer block!
Spacers are also useful when you’re trying to arrange content on a page in a grid pattern, particularly if using Squarespace’s FLUID ENGINE editor for websites built using its classic version. Just add several spacer blocks in a row and drag content blocks into them; this ensures your pages look neat both visually on the front end of your site as well as behind-the-scenes in what Squarespace refers to as their admin panel. This method works great for creating any type of grid layouts – images will do especially well here!
Text Alignment
Varying the fonts used on your Squarespace site can help transform its overall aesthetic. Unfortunately, however, selecting and setting up different fonts can take up valuable time when dealing with lots of text on your website. Luckily, there are a few shortcuts you can use to speed up this process of choosing and configuring new fonts.
One of the key elements of any website is text. Your visitors use it to consume your content and understand its tone; so creating an organized, visually-appealing layout for your text block is paramount in helping readers easily locate information they seek while navigating your site.
First step to creating an organized text block: divide content from margins by adding a spacer block or drawing a line dividing content and margins. By doing this, you’ll take full advantage of Squarespace’s text alignment options for text blocks.
Use keyboard shortcuts to save time when working with text by using pencil icons in your text block and accessing these shortcuts via keyboard. With these, you can quickly change text style, size and alignment without opening up the Design panel.
By selecting the pencil icon and then the Design tab, you can add a background color to your text block. The background option will appear at the top of this panel where you can choose from various hues using hex codes or by simply picking S, M or L for Content Width Width. You can even adjust its width easily within this panel using three dots in the upper right corner by choosing S for Sample Text and M for Content Text Width width options.
Though Squarespace doesn’t directly provide ways for you to justify text, custom CSS offers ways around this limitation. If you want centered text on mobile devices specifically, this is a good solution – just add additional spacer blocks on either side of your text block in order to provide enough room for its content and page margins; set their heights similarly for consistency.
