Adjust Font Sizes – Label

Label defines font sizes with SASS variables. Changing the value of a font-size variable will affect multiple elements, resulting in a more consistent look throughout the store.

Method 1 – Adjusting SASS variables

You will find these variables around line 525, in a section called “Default Settings.”

You can adjust font sizes by changing the pixel values of the variables. For example, to change all elements that use the $standardTitleFontSizeSingle element (including the “Featured Product” section on the home page) from 44px to 28px, change the variable on line 546:

Method 2 – Adjusting individual elements’ font sizes

You can also add adjust an individual element’s font size directly by over-riding its CSS rules. First find the element’s CSS selector using your browser’s development tools’ "Inspect Element" functionality. Then, find its CSS rule in the stylesheet.

Copy the CSS selector and paste it at the end of the theme.scss.liquid file, giving it a new font-size value.

For example, to change the font size of the title of the “Featured Product” homepage section to 36px, you would write:

template-index section.single-product .single-product-content h3.standard-single a, 
.template-index section.single-product .single-product-content .standard-single.h3 a {
  font-size: 36px;
}