How to Change Markdown font size in Squarespace

This post may contain affiliate links. I may earn a commission at no extra cost to you if you make a purchase through them. Full disclosure here.

Markdown is a lightweight markup language that allows users to format text easily. In Squarespace, Markdown can be used to create styled text within various content blocks, such as text blocks, code blocks, and markdown blocks.

However, one common question among users is how to change the font size of text formatted with Markdown.

This article will explore how to adjust font sizes in Squarespace when using Markdown, including the limitations and alternatives available.

Quick Fix

Understanding Markdown in Squarespace

Markdown allows you to format text using simple syntax. For example, you can create headers, lists, bold or italic text, and more. While Markdown is great for quick formatting, it does not natively support font size adjustments. Instead, font sizes in Squarespace are typically controlled through the site's CSS (Cascading Style Sheets) or the built-in text editing options.

Changing Font Size Using Markdown

While Markdown itself does not provide a direct way to change font size, you can use specific Markdown syntax to create headers, which will automatically adjust the font size based on the header level:

• # Header 1 (largest)

• ## Header 2

• ### Header 3

• #### Header 4

• ##### Header 5

• ###### Header 6 (smallest)

For example, if you want to create a larger header, you would use:

# This is a Large Header

    

Copy to Clipboard

This will render as a large header on your Squarespace site, but it won’t allow for specific font size adjustments beyond the predefined header sizes.

Using CSS to Change Font Size

If you want to change the font size of Markdown text specifically, you will need to use custom CSS. Here’s how to do it:

Step 1: Access Custom CSS

1. Log in to your Squarespace account and navigate to your website dashboard.

2. Click on Design in the left-hand menu.

3. Select Custom CSS from the options.

Step 2: Add Custom CSS

You can target specific Markdown elements using CSS. For example, to change the font size of all headers created with Markdown, you can add the following CSS:

h1 {
  font-size: 36px; /* Change this value to your desired size */}
  h2 {
  font-size: 30px; /* Change this value to your desired size */}
  h3 {
  font-size: 24px; /* Change this value to your desired size */}
  /* Add more styles for h4, h5, h6 if needed */

    

Copy to Clipboard

You can adjust the pixel values to your desired font sizes.

Step 3: Save Your Changes

After adding your custom CSS, click Save to apply the changes to your site.

Alternative Methods for Font Size Adjustment

If you prefer not to use CSS or want a simpler solution, consider the following alternatives:

1. Text Blocks: Instead of using Markdown, you can use the built-in text block editor in Squarespace. This editor allows you to change font sizes directly using the formatting options available in the toolbar.

2. Code Blocks: If you are comfortable with HTML, you can use a code block to create custom HTML elements with specific styles, including font sizes.

3. Style Editor: Squarespace’s style editor allows you to adjust font sizes for different text elements site-wide. You can access this by navigating to Design > Site Styles and adjusting the font sizes under the typography settings.

Conclusion

While Markdown in Squarespace does not provide a direct method for changing font sizes, you can effectively utilize header syntax to create varying sizes or apply custom CSS for more precise control.

By leveraging Squarespace’s built-in design tools and options, you can ensure that your text appears as desired while maintaining a cohesive and professional look throughout your site.

If you need specific adjustments, using custom CSS is the best approach to tailor the font sizes to your preferences.