Change the Navigation Font Size in Squarespace

One of the most common “why does this feel off?” issues in Squarespace sites is the navigation. It’s usually not the layout. It’s the typography.

Good news: you don’t need custom CSS to change your navigation font size, weight, or style. Squarespace already gives you the controls… they’re just a little hidden.

Here’s exactly how to do it.

Step 1: Open Any Page on Your Site

From your Squarespace dashboard:

• Go to Website → Pages

• Click any page (it truly doesn’t matter which one)

If your homepage loads automatically, that’s fine too.

Tip: Do not click “Edit” yet. This is a style change, not a content edit.

Step 2: Open Site Styles (The Paintbrush Icon)

On the right side of the screen, click the paintbrush icon to open Site Styles.

This is where all global design settings live—fonts, colors, spacing, and more.

Step 3: Go to Fonts → Assign Style

Inside Site Styles:

1. Click Fonts

2. Open Assign Styles

3. Scroll until you find Site Navigation

   (It’s usually third in the list)

This controls everything about your main navigation typography.

Step 4: Choose How Your Navigation Font Is Styled

You have two main options here:

Option A: Use an Existing Font Style

You can tie your navigation to an existing style, like:

• Paragraph 1

• Paragraph 2

• Header styles (not usually recommended—those get big fast)

Most sites work best using Paragraph 2 for navigation.

Option B: Use Custom Navigation Styles

Click Custom if you want full control.

Here’s what you can adjust:

• Font family (use a completely different font if you want)

• Font weight (e.g. 600 instead of 700)

• Font size

• Letter spacing

• Text transform (hello, ALL CAPS 👋)

• Line height (minor impact in navs, but available)

This is where you dial things in and make the navigation feel intentional.

Step 5 (Bonus): Changing Navigation Link Color

Font size lives in Fonts, but color is handled separately.

To change navigation colors:

1. Go back to Site Styles

2. Click Colors

3. Edit the active color theme (for example: Light 1)

4. Find Navigation Links under the header section

5. Adjust the color

Important note:

Each color theme has its own navigation color. If you use different themes across sections, you’ll want to adjust each one.

Final Thoughts

Squarespace gives you a ton of flexibility with navigation typography—you just have to know where to look.

Once you get comfortable with:

• Fonts → Assign Styles

• Custom navigation settings

• Theme-based color controls

…you can make your nav feel polished instead of accidental.

If you hit a blocker or something behaves weirdly, click though the video and drop a comment. Odds are, you’re not the only one—and it might turn into the next tutorial.

👉 Want help dialing this in without fighting the interface? That’s exactly what Wow & Flutter is for.