Type is tough, but these tips will get yours cleaned up in no time!

Typography is hard. Designers take years learning the best way to pair typefaces, kern them, track them, fix the leading… things you probably never even think about when you’re choosing a typeface. For this post, I’m not gonna talk about picking typefaces because that’s a subject for a whole different post, but what I am gonna talk about is how to make the type you choose look good on your site.

1–Type Size

tl;dr—Type should never be smaller than 16px, and headings should be much larger and stand out.

Let’s start with the standard type size for the web: 16px. Your type should never be smaller than this, I don’t care how cool or hip you think you are. Fonts for the web are designed for ideal viewing at 16 pixels, web browsers default size is 16 pixels, and you, too, should leave your fonts at 16px.

Now that we’re clear on the minimum type size, let’s get to headings. Squarespace gives you the option for 3 heading styles whereas the wider web gives you six styles. Since we’ve only got three to work with, let’s be smart about this. For your primary headline, pick something big and bold. This is going to be the title text for every page on your site. Make this one the largest, and don’t be afraid to go too large.

The other headings should be smaller than the first heading. This part we can have a little fun with though. Since now we’ve only got two heading styles left to work with, it’s a good idea to take advantage of each. Since it does matter to the Google gods that a Heading 2 is more important than a Heading 3, I like to make sure my Heading 2 is a style that I will want to use to present secondary information (like subheads or content headings). The Heading 3 is least important here, so you can take some liberties for how it’s used. I like to use it as a stylistic heading, so in my site I changed the color and the size to give me a totally different look when I wanted it. Here are the examples from this site:

This is a Heading 1

This is a Heading 2

This is a Heading 3

This is a Heading 4

KL’s Squarespace Tip: Some themes in Squarespace have a checkbox next to your heading styles that says ‘Allow text size to scale’. I like to keep this one checked so that on smaller devices, the text will scale down to the minimum type size that you set in the site styles but will be larger on desktop and tablets.

2–Leading / Line Height

tl;dr—Keep the space between the lines at a comfortable amount to make it easy for readers to move from line to line.

So, as you can see above, there’s some… interesting… spacing between the lines. Without getting too technical, there’s a few things that affect the spacing between lines. The first is padding and margin. These are the spaces between the different headline styles above. So, there’s a larger margin (or padding) below the Heading 1 than there is below the Heading 2, so Heading 2 appears to be further from Heading 1 than Heading 2 is from Heading 3.

The second factor for spacing is the leading (that’s the typography term—pronounced with a short e sound, like the metal lead) / line height (that’s the web style term). This is the spacing between lines of the same element (be it a heading or a paragraph of text). Ideally, we want to have enough space between the lines that it’s easy for a reader to move from one line to the next.

If the spacing is too narrow, the reader has a hard time differentiating between lines. If it’s too wide, it’s hard to keep track of which line you just read to find the next line. Ideally, you want the spacing to be comfortable for reading without much thinking.

KL’s Squarespace Tip: I recommend setting your line height to somewhere between 1.2em and 1.6em for comfortable reading at just about any size. Sometimes larger headlines will want to be on the lower side of that while smaller text might lean towards the higher end.

3–Centering and Justifying Text

tl;dr—Don’t center big blocks of text, stick to left alignment.

Let’s talk about the rag… not that rag, get your head out of the gutter (type nerd pun anyone?). Anyways, the rag is the rough edge on the right or left of content that is either left aligned, right aligned, or centered. In languages that read from left to right (like English), the alignment by default is left aligned. This means that the left side of the page has the text lined up, while the right side is “ragged”. If we were to justify the content, we’d have both sides aligned with the page. If we right align the content, then the left edge is ragged.. ok you get the idea right?

Here’s the important thing: the rag actually helps you move from one line to the next while the left alignment helps you find the beginning of the next line quickly. With that in mind… do NOT center large blocks of text and, ideally, don’t justify them either. Centered text is great for headlines or small amounts of copy at large sizes, it’s absolutely terrible for reading long blocks of text. Our eyes have a hard time moving from one line to the next. Just don’t do it. Do your readers a favor and stick to left alignment for those big blocks of copy.

KL’s Squarespace Tip: You can adjust the text justification when editing any block of text in the editor.

4–Tracking / Letter Spacing

tl;dr—Use a wider letter spacing on all uppercase text, never use a wider letter spacing on lowercase or mixed case text.

Tracking (the typography term) / letter spacing (the web style term) refer to the space between the letters. All typefaces have a default spacing between the letters, but we can choose to alter that spacing if we want. There are two basic rules: 1. If you’re using all uppercase (like for a headline), you should widen the letter spacing, and 2. If you’re using lowercase or mixed case, you should NOT widen the letter spacing.

Here are some examples:

Most typefaces weren’t designed to be read in all caps, so to make all caps text easier to read, we widen the space between the letters. If we widen the space between the letters on lowercase, it actually makes it more difficult to read because our brain has a delay in deciphering the next letter in the word.

How wide you want to go on the spacing between your capital letters is sometimes a stylistic choice, but I recommend not going too wide for the same reason we don’t track or add letter spacing to the lowercase: At some point, it will become harder to read.

KL’s Squarespace Tip: When tracking / letter spacing your uppercase text, keeping it around .2em tends to work well with a lot of typefaces.

5–Line Length

tl;dr—Aim for about two alphabets wide for long blocks of text.

This is a nice easy little tip to clean up your content. If you stick to a really basic rule that a line of copy shouldn’t be longer than two alphabets, your content will be comfortable to read. If you go longer than that, your reader will have a hard time making it back to the beginning for the next line—it’s a long distance to travel. On the other end, if you make it too short, it can be jarring to have to go back and forth so frequently that reading comprehension goes down… unless you’re a poet, then do whatever you want.

Here’s what I mean by two alphabets, let’s see if this works…

a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z

How’d I do? If you’re on desktop, you’ll probably see that that’s pretty dang close to two alphabets on one line, and I did use a lot of spaces in there. If you’re on mobile, you’ll probably find that those two alphabets take up 3 or 4 lines. That’s ok for mobile since we’re used to reading shorter lines on smaller devices, but for desktop, we really want to try and get as close as we can to the two alphabet rule to keep our readers reading!