logoredraws.com

How to Adjust Text Spacing in Squarespace

Adjust letter spacing and line height in Squarespace with font styles or custom CSS, and learn when a logo's tracking belongs in the vector artwork instead.

Published

Contents
  1. The short answer
  2. Spacing terms you will see
  3. Decide where the spacing should live
  4. Adjusting spacing for live text in Squarespace
  5. Targeting one element with custom CSS
  6. Fixing spacing in an uploaded logo
  7. What this guide could not confirm

The short answer

Squarespace manages text spacing through its site-wide font styles. In the design or site styles panel, you choose a text style, such as a heading level, paragraph style or the site title, and change its letter spacing and line height. To change spacing on one element without changing every other element that shares its style, you need custom CSS. If your logo is an uploaded image, Squarespace cannot change its letter spacing at all. The spacing in that case is fixed in the vector artwork, so you change it in your design application and export the logo again.

Squarespace has changed menu names and panel locations between versions and interface updates. The steps below describe the general workflow, not exact labels. Check them against the version of your site; this guide could not confirm current command names.

Spacing terms you will see

  • Tracking: an even adjustment to the space across a whole run of characters. Squarespace's letter spacing setting and the CSS letter-spacing property both work as tracking.
  • Kerning: an adjustment to the space between one specific pair of letters, such as A and V. Website font settings generally do not let you kern individual pairs, which is one reason logo lettering is usually finished in vector software.
  • Line height (leading): the vertical distance between lines of text. It matters for logos and wordmarks that stack onto more than one line.
  • Outlining text: converting live type into vector paths. The letters then keep their shapes and spacing without the font installed, but you can no longer edit them as text.

Decide where the spacing should live

First check whether your logo is live text or an image. If the site header shows a site title typed in a font, Squarespace's font styles control its spacing. If you uploaded a logo file, Squarespace only displays and resizes that file, and the letter spacing comes from the artwork.

Live text is easy to change, but how it looks depends on the font, the browser and the screen. It cannot match a logo that was kerned pair by pair. An uploaded logo looks the same everywhere, but every spacing change means editing and exporting the file again. For a finished brand mark, keeping the spacing in the artwork is usually the more reliable choice. This is a design recommendation, not a Squarespace requirement.

Adjusting spacing for live text in Squarespace

Before you start, you need editing access to the site, and you need to know which text style the element uses (heading, paragraph or site title).

  • 1. Open the site editor and go to the site styles or design panel.
  • 2. Open the font or typography settings.
  • 3. Choose the text style that controls the element: the site title, a heading level or a paragraph style.
  • 4. Change the letter spacing setting to tighten or loosen the tracking.
  • 5. Change line height if the text wraps or stacks onto several lines.
  • 6. Save, then preview the pages that use that style. The change affects every element that shares the style.

To check the result, compare the text before and after on both desktop and mobile previews. Make sure no other headings or paragraphs that share the style were changed by accident, and that letters at the smallest display size do not touch or crowd each other.

Targeting one element with custom CSS

When only one element should change, add a rule in Squarespace's custom CSS panel. Where that panel sits in the menus depends on your site version. The selector below is a placeholder. Use your browser's inspect tool to find the actual class or ID on your page. The values are examples to adjust, not recommended settings.

.your-element-selector {
  letter-spacing: 0.05em;
  line-height: 1.2;
}

Em units scale with the font size, so the tracking stays in proportion when the text resizes on smaller screens. A positive letter-spacing value adds space between letters and a negative value removes it. Save the CSS, then confirm in preview that only the targeted element changed.

Before you start, you need the editable source file for the logo. A file with a vector extension may still contain embedded raster images or locked elements, and owning the file does not by itself give you permission to change someone else's mark.

  • 1. Open the source artwork in your vector application while the type is still live, or work on a duplicate if the text has already been outlined.
  • 2. Set the overall tracking for the wordmark.
  • 3. Kern problem pairs by eye. Common ones are letters with diagonal or open shapes next to each other, such as A, V, W, T and Y.
  • 4. Check the spacing at the smallest size the logo will appear in the header, because tight tracking can make letters merge on small screens.
  • 5. Convert the text to outlines in a copy of the file and keep the editable version as the master.
  • 6. Export in a format Squarespace accepts for logos. Check which formats your version supports, especially if you plan to use SVG.
  • 7. Upload the new file to replace the old logo.

To check the result, preview the header on desktop and mobile and confirm that the edges are sharp and the spacing matches the source artwork. Make sure no letter has been swapped for a fallback font, which would mean the text was not outlined before export.

What this guide could not confirm

No version-specific Squarespace documentation was available for this guide. The exact panel names, the range of the letter spacing control, the location of the custom CSS panel, the class names in your header and the logo file formats Squarespace accepts all need to be checked against your site's current interface.