Adjusting text formatting on Squarespace is relatively straightforward. From making text bold or italic, to altering spacing between lines or adding line breaks, this guide will show you how.
With the launch of Squarespace 7.1, font customization has been relocated from page level settings to a central Design tab for easier management. This guide will introduce the basic principles of this new system.
Line height
As a Squarespace user, you may occasionally need to alter text on your website. From changing call to action buttons or paragraph text to altering font sizes or line height adjustments – Squarespace offers various solutions that make editing text simpler – especially useful if there is large amounts of text across one or multiple pages.
Squarespace makes it easy to adjust text line spacing by offering the Style Editor panel, which lets you quickly customize design settings to create a polished and professional appearance on your site. It is an invaluable resource for beginners learning the ropes of web design looking to improve the overall appearance of their site.
Add CSS code to your page in order to alter the line-height for one or all blocks by altering their line height, regardless of whether they have already been added to your website or added in later. Please keep in mind that this change may impact how your pages appear on mobile devices; test this change prior to implementing it live on your live website.
Text alignment
Squarespace provides several methods for aligning text on your site, from using built-in options in Content Blocks to CSS code coding which may require editing the HTML source. There are some tools which make the latter task simpler, including the “text-align” property that enables vertical alignment within content blocks; useful for things like headers and footers on websites.
There is also a tool that enables you to adjust the indent level of your text, which can help make it look visually cleaner and italicize certain words or sentences within paragraphs.
Squarespace 7.1 introduced several new features that enable you to align objects within content blocks, making it possible to align images and text accordingly. To do this, select an object to align and open its design menu; there will be an icon for horizontal and vertical alignment options.
CSS allows you to easily change the default read more link of a summary block into a button that matches your theme, making this an excellent option for image layouts such as cards, stacks, collages or overlaps, newsletter blocks or similar content formats.
Padding
If your site features a lot of text, it can be challenging for readers to comprehend without proper spacing and padding between lines. By adding padding between lines, text becomes easier to comprehend while giving your page a more organized appearance – this is particularly important in headers and paragraphs.
To increase the space between lines, drag one text block next to another until a short vertical line appears at their insertion points and move them closer together until a short vertical line appears at their insertion points. After moving these blocks closer together, move one underneath another so as to form two columns of text which makes your content more readable.
Squarespace provides numerous ways to format text, such as altering its height and spacing between lines. Furthermore, you can use the toolbar’s text alignment icon to align text left, right or center; additionally, clicking ‘Indent’ allows for indenting the first line of text by indenting.
To change the spacing between lines, select a text block in the page editor and click on Spacing tab. Here, you can either choose from pre-set values or enter custom ones; to avoid overdoing padding it’s best to work in smaller increments. Alternatively you could add CSS code that reduces space between text blocks if you are familiar with editing HTML and CSS code.
Margin
Formatting text in Squarespace offers various methods for altering margins between lines. From using built-in features in the Style Editor, or by customizing CSS code – either way it is essential that the text on your website is easy for visitors to read.
Padding text can be one of the easiest ways to alter margin between lines in Squarespace. To do so, edit your page style via Style Editor panel – to do this, simply select your page or section and click on Style Editor button.
Once this step has been completed, click on the Text tab in the Style Editor panel and adjust line spacing by either using preset values or entering custom values. When complete, save and save again for your text to become appropriately spaced.
This simple hack can help to enhance the appearance and functionality of your Squarespace website. It is especially helpful when your text block doesn’t fit on screen properly – by combining this technique with Site Margin setting you can achieve an aesthetically pleasing layout that more closely mirrors reality.