Adjust Font Sizes – Editorial

Advanced

This is an advanced customization. It requires editing theme code and is not supported by Switch Themes or Shopify. We recommend hiring an expert if you’re not comfortable editing Liquid, HTML, CSS and Javascript. Always make backups before customizing the theme.

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:

.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 that screen size’s prefix to it, for example, .sm--font-size--s or .lg--font-size--xxxxl.

The breakpoint (screen-size limit) 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

Rich Text

Sections / featured-content.liquid

For the content, there is a setting in the theme editor. If you’d like to override it, you can do so on line 9, by replacing "{{ section.settings.font_size }}" with CSS classes as per the above.

Slideshow

Sections / slideshow.liquid

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 using your browser’s Developer Tools’ “Inspect Element” functionality.

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