The Typography System Most Designers Never Touch
Most Squarespace designers pick two fonts, adjust the sizes until they “look right," and move on. The site looks fine. The text is legible. Nobody complains. But there's a difference between text that's legible and typography that works as a system, and that difference is what separates a site that looks polished from one that looks professional.
This article isn't about choosing fonts. That's covered everywhere. This is about the decisions that come after you've chosen your fonts: sizing, spacing, rhythm, hierarchy, and the mathematical relationships that make all of those things feel cohesive rather than arbitrary.
Type Scales: Stop Guessing at Sizes
When you set your H1 to 48px, your H2 to 36px, and your H3 to 24px, you're making decisions that feel reasonable but are essentially arbitrary. Why 48? Why 36? The numbers "look right," which is another way of saying you eyeballed it until it stopped bothering you.
A type scale gives you a mathematical basis for these decisions. Instead of picking sizes independently, you choose a base size and a ratio, and every other size in the system is derived from those two values.
The most common base size for body text on the web is 16px (which is also the browser default). From there, you apply a ratio to generate your heading sizes. Popular ratios include 1.25 (the Major Third), 1.333 (the Perfect Fourth), 1.414 (the Augmented Fourth), and 1.618 (the Golden Ratio).
Using a 16px base with a 1.25 ratio, your scale looks like this: 16px (body), 20px (H4 or large body), 25px (H3), 31.25px (H2), 39px (H1). Each step is exactly 1.25 times the previous one. The sizes are mathematically related, which means the visual relationships between headings feel harmonious even if you can't articulate why.
A 1.333 ratio produces more contrast between levels: 16px, 21.3px, 28.4px, 37.9px, 50.5px. A 1.618 ratio produces dramatic contrast: 16px, 25.9px, 41.9px, 67.8px. The choice of ratio depends on the design: editorial sites often benefit from larger ratios (more distinction between heading levels), while corporate or informational sites work better with tighter ratios (subtler hierarchy).
In Squarespace, you set heading and body sizes through Site Styles, and the platform lets you adjust each heading level independently. Rather than adjusting each one by eye, calculate your scale in advance (the website type-scale.com is excellent for this), note the exact pixel values, and enter them systematically. The result will feel noticeably more considered than sizes chosen intuitively.
Line Height: The Most Underrated Setting
Line height (called "leading" in print typography) controls the vertical space between lines of text. It's the single most impactful typographic adjustment you can make for readability, and it's the one most designers set once and forget.
The general rule is that body text needs more line height than headings. Body text at 16px typically reads best at a line height of 1.5 to 1.7 (24px to 27.2px). This gives each line enough breathing room that the eye can track from the end of one line to the beginning of the next without losing its place.
Headings need less line height because they're larger and usually only one or two lines. An H1 at 48px with a line height of 1.5 would have 72px between baselines, which looks like the heading is falling apart. Headings at larger sizes typically work best at 1.1 to 1.3.
There's an inverse relationship here that many designers miss: as font size increases, optimal line height (as a ratio) decreases. Body text at 1.6 line height, H3 at 1.3, H2 at 1.2, H1 at 1.1. This graduated reduction keeps each level feeling tight and cohesive while body text stays open and readable.
Squarespace's Site Styles panel lets you set line height for headings and body text, but it applies a single value across each category. If you want different line heights for different heading levels (which you should), you'll need custom CSS:
h1 { line-height: 1.1; }
h2 { line-height: 1.2; }
h3 { line-height: 1.3; }
p { line-height: 1.6; }
Line Length: The 45 to 75 Character Rule
The optimal line length for reading comprehension is between 45 and 75 characters per line, including spaces. This isn't a design preference. It's a finding from decades of readability research. Lines shorter than 45 characters cause the eye to jump too frequently, disrupting reading flow. Lines longer than 75 characters make it difficult to track from one line to the next, causing readers to re-read or skip lines.
On a desktop Squarespace site with full-width sections, body text in a single-column layout can easily stretch to 100 or 120 characters per line, which is well beyond the optimal range. The most common fix is to constrain the text block's width, either through Fluid Engine positioning (don't stretch text blocks to full width) or through custom CSS:
.sqs-block-content p {
max-width: 680px;
}
The exact pixel value depends on your font, font size, and letter spacing, but 600px to 700px typically produces line lengths in the 65 to 75 character range at 16px body text. You can verify by counting characters on a typical line.
This is one of the simplest changes you can make to a Squarespace site that will have a genuine impact on how long visitors actually read the content, rather than skimming and bouncing.
Letter Spacing and Word Spacing
Letter spacing (tracking in print terms) adjusts the space between all characters in a text block. Word spacing adjusts the space between words specifically. Both are available in Squarespace's Site Styles for headings and body text.
The conventional wisdom is: body text at standard sizes (14px to 18px) rarely needs letter spacing adjustment. The font designer has already optimised the default spacing for readability at those sizes. Adding positive letter spacing to body text makes it feel airy but can reduce readability. Adding negative letter spacing to body text makes it feel dense and is almost always a mistake.
Headings are different. At larger sizes (30px and above), many fonts benefit from slight negative letter spacing (-0.5px to -1.5px), because the default spacing that works at 16px can look loose and disconnected at display sizes. This is called optical sizing: adjusting spacing to maintain visual consistency across different sizes. If your H1 feels like the letters are floating apart, tightening the letter spacing slightly will usually fix it.
There's one important caution for Squarespace specifically: negative letter spacing values below -1px can cause letters to overlap on mobile, where the text is rendered at a smaller size than desktop. Always check mobile rendering when adjusting letter spacing. A value that looks refined on desktop at 48px can become illegible on mobile at 28px.
Vertical Rhythm
Vertical rhythm is the concept of maintaining a consistent vertical spacing unit throughout a page, so that all text, images, and white space align to an invisible grid. Think of it like music: the baseline grid is the beat, and every element on the page should land on a beat.
The simplest way to establish vertical rhythm is to use your body text line height as the base unit. If your body text is 16px with a line height of 1.5, your base unit is 24px. Your margins between paragraphs should be 24px (or a multiple: 48px, 72px). Your padding inside sections should be a multiple of 24px. Your heading margins should resolve to multiples of 24px.
In practice, perfect vertical rhythm on the web is nearly impossible to maintain, particularly on a platform like Squarespace where you don't control every pixel of spacing. But approximate vertical rhythm, where you consciously use consistent spacing increments rather than arbitrary values, makes a significant visual difference.
Squarespace's section padding and block spacing controls work in percentages and relative units rather than exact pixels, which makes precise rhythm tricky. The workaround is to use custom CSS for fine-tuned spacing on elements where rhythm matters most (typically the main content area), while accepting that sections, headers, and footers will follow Squarespace's own spacing logic.
Font Pairing: Beyond "Serif Plus Sans-Serif"
The standard advice for font pairing is to combine a serif with a sans-serif. This works, but it's the equivalent of saying "combine a red with a blue." Technically correct, practically useless without understanding why certain combinations work.
Effective font pairing is based on contrast and shared characteristics. You want fonts that are different enough to create visual distinction between heading and body text, but similar enough in underlying structure that they feel like they belong together.
The structural characteristics to compare are x-height (the height of lowercase letters relative to the font size), stroke contrast (the variation between thick and thin parts of the letterforms), and overall proportions (how wide or narrow the characters are). Two fonts with similar x-heights and proportions but different classifications (one serif, one sans-serif) will pair well because their underlying geometry is compatible even though their surface appearance differs.
Squarespace's built-in font library includes Google Fonts and a selection of Adobe Fonts. The new custom font upload feature (available on Core plans and above) expands your options dramatically, but also increases the risk of poor pairing because you're no longer limited to a curated selection.
If you're uploading custom fonts, keep file weight in mind. Each font file (per weight, per style) adds to page load time. A single font family with regular, italic, bold, and bold italic in both .woff and .woff2 formats can add 200KB to 400KB to the page. Two families doubles that. Only upload the weights and styles you'll actually use, and prefer .woff2 (which has better compression) over older formats.
Fluid Typography
Fixed font sizes (px) display at the same size regardless of viewport width. This means text that looks proportionate on a 1440px desktop can look enormous on a 375px phone, or text that's appropriately sized for mobile is tiny on a large monitor. Squarespace handles this by applying different sizes at its responsive breakpoints, but the jump between sizes is abrupt rather than smooth.
Fluid typography uses CSS clamp() to create sizes that scale smoothly between a minimum and maximum value based on the viewport width:
h1 {
font-size: clamp(32px, 5vw, 64px);
}
This sets the H1 to a minimum of 32px, a maximum of 64px, and a preferred size of 5% of the viewport width. Between those bounds, the text scales smoothly as the browser window resizes. No jump, no breakpoint, just continuous scaling.
Squarespace doesn't offer fluid typography in its Site Styles controls, so implementing it requires custom CSS. The effort is worth it, particularly for hero headings and other display-size text where the difference between breakpoint sizes is most jarring. For body text, the effect is subtler and less critical, so fixed sizes with Squarespace's default responsive behaviour are usually sufficient.
Putting It Together
None of these individual techniques is revolutionary. Designers have been thinking about type scales, line height, and vertical rhythm for centuries in print and decades on the web. What makes them powerful is using them together as a system rather than adjusting individual settings in isolation.
A considered typographic system for a Squarespace site might look like this: a 1.25 type scale based on 16px body text, giving you heading sizes of 20, 25, 31, and 39px. Line heights of 1.6 for body, 1.3 for H3, 1.2 for H2, and 1.1 for H1. Letter spacing of -0.5px on H1 and H2, default on everything else. A max-width of 680px on body text containers. Paragraph margins of 24px (matching the body line height). Section padding in multiples of 24px. Two fonts: one serif for headings, one sans-serif for body, matched on x-height and proportion.
Every value relates to every other value. Nothing is arbitrary. And the result, while subtle, is a site that feels considered, cohesive, and unmistakably professional, even to visitors who couldn't begin to explain why.
That's what typography as a system looks like. Not picking nice fonts. Building a structure where every typographic decision supports every other one.
Related Articles
