Change font sizes

Caution

This tutorial will give you a quick introduction to the Chrome Developer Tools — DevTools for short. The DevTools will allow you to make simple style changes to your store front, changes not possible to make with edits to your Customize theme page. Please review our info on customization support before proceeding.

If you are editing content inside the Rich Text Editor, you will be able to change the size of text using the Formatting tool. You can access the Formatting tool by clicking on the letter A in the Rich Text Editor menu bar (see below). The Paragraph format gives you the regular “body text” size. Headings are larger. The heading 1 is the largest, while the heading 6 is the smallest.

Font edit style icon

If you need to change the size of text not created in the Rich Text Editor, you need to do so in the Themes section of your store's admin.

Let's say you want to make your collection title smaller on collection pages. This is the before and after you want:

Font edit before after

You first need to look through your Customize theme page, to see if there's any Typography or Font settings that control that which you want to change.

If there is nothing, then you will need to edit your theme's stylesheet.

Caution

A stylesheet is used to define the look and feel of a web site. It has the ability to completely change the style of your web site.

One does not simply open a stylesheet in a text editor and dive into it. Nowadays, web designers depend on tools to help them identify which style needs to be edited, in which stylesheet, and how. We'll give you a taste of such tools, by presenting you the Google Chrome Developer Tools — DevTools for short. We will use DevTools to edit your font size as per the method described below.

  1. Go and install Google Chrome if you don't have it already. The DevTools come with the Google Chrome browser.

  2. Browse to the page on your storefront where the text is either too large or too small.

  3. Click on Alt-Cmd-I on the Mac, or Alt-Ctrl-I in Windows, to bring up Chrome DevTools:

    Font edit chrome dev tools 1

  4. Click on the zoom icon at the bottom of the Chrome DevTools window to turn on the “inspect” mode. The zoom icon will turn blue:

    Font edit chrome dev tools 2

  5. Click on the text on the page that you find too large, or too small. The element will turn blue to show that it's been selected:

    Font edit chrome dev tools 3

    Caution

    You can also right-click on any element of the page, and select Inspect Element in the contextual menu.

    Font edit chrome dev tools 0

  6. In the right panel of Chrome DevTools, under Styles, scroll down till you locate the CSS that sets the font-size on the selected text:

    Font edit chrome dev tools 4
  7. Double-click on the font-size value to edit it. Type in a new value. Edit that value until you're satisfied with the result. The changes are applied in real time above:

    Font edit chrome dev tools 5
  8. Then select the entire CSS rule that contains your edited font-size property, and copy it to your clipboard. Don't forget to include the closing curly brace:

    Font edit chrome dev tools 10

    Caution

    If you find it difficult to select the CSS in that panel, click on the stylesheet name in the right corner of the CSS rule. That will bring you to the Sources panel, where you will see the first line of the CSS rule highlighted in yellow inside its CSS file. You can copy the CSS from there.

  9. Go to the Edit HTML/CSS page, then click Assets, and locate in there a file that ends with the extension .css.liquid. You usually have two such files, one for your store front called theme.css.liquid or style.css.liquid, and another named checkout.css.liquid that styles your checkout pages. Click on the appropriate stylesheet file to open it in your Edit HTML/CSS page.

  10. Scroll all the way down to the bottom of the file:

    Font edit chrome dev tools 6
  11. Paste the code from your clipboard:

    Font edit chrome dev tools 7
  12. Remove all but the font-size property, and save your stylesheet:

    Font edit chrome dev tools 8

  13. Go to to your storefront and reload your web page (Ctrl-R in Windows or Cmd-R or the Mac) to see if the text size is the way you want it.

    Font edit chrome dev tools 9

Developer Tools alternatives

You can also use Firebug in Firefox. You will need one tool or another though, because you can't read through the hundreds of lines of CSS in your stylesheet and find what you need to edit — even when you are a seasoned professional! To edit CSS, you need to use a developer tool that allows you to inspect your web page, and that enables you to quickly locate the CSS that's applied to any element of the page.

Learn more about Chrome Developer Tools

Getting help

You can get help in our Community forums in the design category. Do post a link to your web page, and do share your storefront password, so that the designers in the Shopify community can help you. If editing CSS is not your cup of tea, you can hire a Shopify expert to help customize the look and feel of your theme.

Want to discuss this page?

Visit the Shopify Community