How to Customize Fonts in Squarespace
When you’re writing content for your site, Squarespace allows you to style individual words or groups of words. In Style Editor, however, you don’t style individual words on your site. Instead, you style the text elements that your site contains, such as your site title or blog post titles. Style Editor enables you to control how these elements should be displayed across the entire site.
All Squarespace templates are unique, so they don’t display the same styling options. Therefore, the following styling options may or may not be available for your typography elements:
Font-family: Change the font
Font style: Make the text bold or italic
Font size: Change the text size
Line height: Alter the height of each line of text
Text transform: Change the case (uppercase, lowercase, capitalized)
Text decoration: Underline, overline, or strike through the text
Letter spacing: Control the amount of space between individual characters (known as kerning)
How to choose a font from the (long) list
Squarespace provides access to a long list of fonts from Google web fonts and Adobe Typekit. To find out what fonts are available, click an element in the Typography section of Style Editor. A pop-up font window appears. At the top of the window, you see the font used for that element. To select another font, click the font and then click a font in the list that appears.
Fortunately, each font name in the list is displayed in that font, making the list a preview of what the fonts look like. But to see how all letters and numbers look in a particular font, you must select it.
The font list remains open, and the selected element in your site is updated with the new font. If you don’t like what you see, keep selecting fonts in the list until you find one you like.
Choosing the right size
Setting the size of your text is straightforward. If you want the text for the selected element to be larger or smaller, you just need to adjust the default size accordingly, which can be done in one of two ways:
In the pop-up font window, hover your cursor over the Font Size option to reveal a slider you can drag to adjust the size of the font. As you drag the slider left or right, the font size’s numerical value is updated, and the text on your site changes.
Double-click the font size’s numerical value and type a new value. If you want to set the font size to a specific value, typing it is easier than adjusting the value with the slider.
Some templates will display font size settings for specific elements in the Sizes and Values settings area of Style Editor.
How to decide on bold or italics
Some fonts have a bold setting, or an italic setting, or both. Other fonts are designed with varying levels of bold or italic.
If a font you select has a bold or an italic setting, it will appear in the text styling window. Simply click the check box next to either bold or italic to set your font with that style.
If the font has varying levels of bold, you will see another option in place of Bold and Italic called Style. The Style option has a pop-up list of numbers, called weights, which increase in increments of 100. The higher the number, the bolder the font. Generally, a value of 400 is considered the same as a regular font.
Fine-tuning line height and letter spacing
It’s always a good idea to make sure your text is spacious enough so that visitors can easily read your site. Squarespace offers you a couple of ways to make your text more legible:
Line height: The line height value is calculated in em units. One em is equal to the pixel value of your font size. So if your font size is 12 pixels (px), setting the line height to 1em is equal to a line height of 12px, and setting the line height to 2em equals a line height of 24px. What would 1.5em equal if your font size were still 12px? That’s right, 18px. (Half of 12 is 6, and 12 plus 6 pixels equals 18. Whew. I bet you never thought math would come in handy for designing a website.)
When setting line height, I suggest never going below 1.2em to allow for a little bit of space for letters with descenders (such as g, j, and p).
Letter spacing: Letter spacing, also known as kerning, is the spacing between individual characters. Letter spacing is best used on titles and headers, not for body text. When measuring letter spacing in Squarespace, the units are in pixels. You can add a negative value to bring your letters closer together.
To modify the line height or the line spacing, you use the slider that appears when you hover the cursor over either option, as shown in Figure 7-9.
Transforming text with case changes
You may want to display headers and titles as all capital letters or all lowercase letters, despite how you type them in your site. Or maybe you want the first letter of each word in a title capitalized. You can do this by choosing the appropriate option for the Text transformation setting.
In a Typography element’s font window (refer to Figure 7-5), click the Text Transform option to reveal a pop-up menu with your choices: None, Capitalize (cap the first letter), Uppercase (cap all letters), and Lowercase (lowercase all letters).
For blog post titles, I always leave the Text Transform feature set to None. Why? Styling your text using the Text Transform feature is absolute and does not take into account words such as iPhone and terms you usually lowercase in headings, such as prepositions. Read the sidebar “Search engines read text but don’t see it” for more considerations about using the Text Transform feature.