Appearance

Adjust font sizes ​

Note

This is an advanced customization guide that requires editing theme code. These actions are not supported by Switch Themes or Shopify. We recommend hiring an expert if you're not comfortable editing Liquid, HTML, CSS, and Javascript.

Before you customize a theme, make a backup. Refer to Shopify help: Duplicating themes.

Editorial sets font sizes in two ways: with CSS classes on template elements and in CSS rules.

CSS classes ​

Most text in Editorial is styled using CSS classes. Among these classes are several which control overall font sizes. You also have the ability to specify responsive font sizes by assigning a font size to a category of screen sizes (e.g., mobile, desktop, etc.).

The basic font size classes, from largest to smallest, are:

css
.font-size--xxxxxl
.font-size--xxxxl
.font-size--xxxl
.font-size--xxl
.font-size--xl
.font-size--lxl
.font-size--l
.font-size--ml
.font-size--m
.font-size--sm
.font-size--s
.font-size--xs
.font-size--xxs
.font-size--xxxxxl
.font-size--xxxxl
.font-size--xxxl
.font-size--xxl
.font-size--xl
.font-size--lxl
.font-size--l
.font-size--ml
.font-size--m
.font-size--sm
.font-size--s
.font-size--xs
.font-size--xxs

These apply to all screen sizes. If you want a font size to apply to one screen size only, you can add a breakpoint prefix. A breakpoint prefix will limit the font size setting to a given screensize, for example, .sm--font-size--s or .lg--font-size--xxxxl.

The breakpoint prefixes are: .sm, .md, .md-dn, .lg, and .dt. In order, they are – small, medium, medium-down (which means medium and narrower), large, and desktop (extra large).

Here are some examples of homepage sections and where you can find those sections' tags:

Images ​

Sections / feature-image.liquid

Alt text

Rich text ​

Sections / featured-content.liquid

Alt text

For the content, there is a setting in the theme editor. If you'd like to override it, on line 9, replace the following with the CSS classes described above.

liquid
{{ section.settings.font_size }}
{{ section.settings.font_size }}

Slideshow ​

Sections / slideshow.liquid

Alt text

And so on…

CSS Rules ​

A few homepage sections set their own font sizes. If the element that you want to adjust does not seem to have font-size CSS classes applied to it, find its CSS selector by using your browser's Developer Tools. Refer to Using the web inspector.

Next, find the selector's rule in theme.scss.liquid and change the font size directly.

Alt text