Typescale

Type scale

The Elite Theme uses a fluid type scale, meaning it uses the size of the desktop font size times the heading font scale to create a modular type scale. The default desktop font size is 16 pixels and the default heading font scale is 125% / 100 = 1.25

To change the sizes, change the font size scale under Headnings and the desktop font size under Body. Each of the heading sizes is then calculated based on these numbers.

Font sizes

The fonts are fluently scaled according to these settings and the size of the screen. This provides a smooth transition between font- and screen sizes to ensure that the fonts have a unified look regardless of device.

UI elements such as tags, buttons and the like are also scaled according to these settings.

Try changing the desktop font size and heading scale to find the best settings for your font. If this seems intimidating, go with the default settings, they will work well for most of the Shopify fonts.

Default Sizes

Type	Size
Heading 1	48px
Heading 2	40px
Heading 3	33px
Heading 4	28px
Heading 5	23px
Heading 5	19px
Body Desktop	16px
Body Mobile	14px

Heading Size Calculation

body desktop size * heading font scale

Default calculations

16 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 = 48 px  
16 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 = 40 px  
16 * 1.25 * 1.25 * 1.25 * 1.25 = 33 px
16 * 1.25 * 1.25 * 1.25 = 28 px
16 * 1.25 * 1.25 * = 23 px
16 * 1.25 *  = 20 px

Line heights

Change the line heigts for Headings and the Body text seperately.

Custom Fonts

You can use custom fonts either by linking from an online font provider or by uploading a font file to the Store library.

Self hosted fonts

To use a self hosted font, add it to the Store library and write the file name in the Self hosted font box without the file extention. E.g. if the file uploaded is called InterNormal.woff, it should be written as InterNormal. The changes should be visible immediately.

Web Font

The theme is optimized for custom web fonts from Google Fonts, but any provider should work. Make sure to follow their instructions for web fonts and pay attention to the number of views that are included in your subscription.

First select the correct font and weights. In this example we are using Montserrat in Normal weight only from Google Fonts.

The font name is needed for the Web font input field. The font name can be found in the CSS code. The CSS from Google Fonts usually looks something like this:

.montserrat-<uniquifier> {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

Copy the name Montserrat without quotes from font-family and paste it into the web font input.

Next, find the link to the font from Google Fonts, it should look like this
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">

All we need is the url:
https://fonts.googleapis.com/css2?family=Montserrat&display=swap
Paste this into the Font url input field.