Squarespace Micro Font Settings Tips – Family, Weight, Style, Line Height, Letter Spacing, Text Transform
Each text category (headings, paragraphs, buttons, and miscellaneous), has same micro settings, except text size options. Let’s explore each micro tweak for font customizations.
Tips and Detail of Micro Font Tweaks in Squarespace
Select Edit on top of preview page and then click ‘Paint Brush’ icon on the top right side in Squarespace to open Site Styles, and select Fonts.
Click on any text category (headings, paragraphs, buttons or miscellaneous), to customize font styles in that specific category.
Family
This tweak shows the name of font applied to a category. You can set any specific font, separately for headings, buttons, paragraphs, or miscellaneous category. We have already discussed the method of changing font family in previous section on this page.
Weight
Weight makes the text thick or thin. You can select any given option, next to weight. Selecting higher number will increase the thickness of text.
My suggestion is that you should select some heavier weights for text of headings and buttons. Please keep in mind that number of weight options depend on the font, you selected. Some fonts may have many weight options, but some fonts only have one option (example is Alfa Slab One) for weight of text. Always, ensure that font weight is higher than 200, so that text is visible on smaller screens of mobile phones.
I suggest you select ‘700’ weight for headings and buttons, and ‘400’ weight value for paragraphs, and other text - for most fonts. It is worth noting that ‘400’ and ‘700’ values for font weight are considered most important and ‘normal’ and ‘bold’ keywords in CSS often corresponds to ‘400’ and ‘700’ weight values. [RD]
Please note that you should select font weight on your website, according to selected font, script, and target text style. For example, for tall scripts – such as Arabic, Hindi, Thai – Google recommends not using bold weights of Noto font. [RD]
You can learn more in expert and detailed articles about fonts on this Dozro website.
Style
Through this, you can select text styles from available options of normal, italic, bold and that style will apply to all over website on text of same category. Text style options are also dependent on the selected font family. Some fonts have multiple style options but most fonts in Squarespace have only single option of Normal (suitable for most text), for text style.
Pro Tip: Please remember that if your selected font has not built-in ‘Italic’ style (True Italic) but you have stylized some text on your page as ‘Italic’ then browser will try to force text to ‘Italicize’ as similar as possible to ‘True Italic’ text in user device.
Line Height
Changing line height value, increases or decreases the space between two lines of text. This option is available for three categories of headings, paragraphs and miscellaneous in Squarespace. Line height option is not available for buttons due to obvious reason as button text has only single line.
To change line height, move slider to right to increase height between two lines of text and vice versa. Alternatively, click on the number, next to line height and manually enter your preferred value for the tweak.
Line height should be inversely proportional to font size - it means if smaller the font size then line height should be larger. For most web fonts, line height should be around 1.5em or 1.6em.
Pro Tip: Please remember that line height should be different according to your selected font and script. Please ensure a well-balanced ‘line height’ keeping in view the accessibility and readability of your text for all users including persons with low vision.
Letter Spacing
This text tweak increases or decreases the space between letters. Move slider or manually set your required value. I will suggest keeping the built-in letter spacing for a font. However, you can try increased letter spacing for elements in miscellaneous category, for some text differentiation and prominence. This option is available in all four categories. Appropriate letter spacing is also important for accessible text.
Text Transform
With this tweak, you can capitalize some or all letters of text on website. Text Transform tweak has four options. You can select None for normal text, UPPERCASE for all capital letters, ‘Capitalize’ option to make first letter of each word capital. You can also select Lowercase, to decapitalize all letters of text on your website.
Pro Tip: My suggestion is to keep None (normal) for text of paragraphs and headings. I suggest you select ‘Uppercase’ option for button text.
Review Micro Font Settings
You can apply your favorite font instead of using the default font came with built-in template.
I highly recommend you that after selecting some different font, you should review the micro font settings – such as font, weight, size, and spacing.
For example, I selected Bailard template for my site. It had Poppins font by default which used 300 weight option. However, after replacing Poppins with IBM Plex Sans, the weight remained at ‘300’ value. It should have changed to ‘400’ value.
IBM documents recommend ‘400’ weight value for IBM Plex Sans font on website paragraphs.
So, I checked and corrected it. I replaced the ‘300’ value of weight with recommended ‘400’ weight.
You can know more in separate article what customization I made for my selected font.
More Resources
These resources might help you learn more.
Squarespace Assign Styles – Apply Custom Font Style to a Page or a Text Element.
Squarespace Method to Apply Custom Specific Font to Site Title, Navigation Menu and Header Button Text, Blog, Store Page.
Method to Switch Font Pack in Squarespace.
Base Size in Squarespace Font Settings | Pro Tips.
Global Text Styles in Squarespace – Method to Apply a Different Font to a Specific Text.
Method to Change Headings Font to in Squarespace.
Method to Change Size of Squarespace Paragraph, Heading and Button Text.
Should You Change the Default Font of Squarespace Template or not?
Squarespace 7.1 Fonts – Important Font Tips and Facts.
Easy methods of changing colors on Squarespace website.
Check Dozro Services to build a Squarespace website for you.
You may also visit Home Page of this website. Email us for any feedback or suggestions to improve this article.
