General settings - Typography: Change your store's fonts

Typography can greatly affect the look and feel of your store and needs to fit with your logo and overall brand.

Screenshot_2017-04-06_11.42.30.pngScreenshot_2017-04-06_11.42.06.png

Included fonts

Our themes come loaded with basic web safe fonts and a selection of what we think are the best Google fonts. There are many hundreds of Google fonts but we have curated what we feel are the most beautiful typefaces - and also one that render best on all screen types.

Settings

All of the fonts in the Venue theme have a combination of the following settings:

  • Font - the typeface family
  • Base size (see lower down article for more on this)
  • Letter spacing - the gaps between each letter
  • Capitalize - changes the case to uppercase
  • Show brand border - the colored underline found on the headings when you first load Venue.
  • Font weight (in the Font dropdown) - some fonts have a light, regular or bold weight available.

Body text

This setting controls text that isn't a heading, price or a button/label. Essentially it's the main text you read in your product descriptions, pages and posts. It includes:

  • Font
  • Base size

We haven't included letter spacing, caplitalize or bold font weights here as this would make reading your site very difficult.

Headings

This setting controls every heading (H1, H2 etc), the main navigation links, the prices and includes.

  • Font
  • Base size 
  • Letter spacing
  • Capitalize
  • Show brand border
  • Font weight

Buttons and labels

This setting controls the text within buttons, labels (such as Sold Out), links with arrows at the bottom of sections and includes:

  • Font
  • Base size
  • Letter spacing
  • Capitalize
  • Font weight

buttons.png

More on the base size setting

Including so many great fonts with Venue can present a challenge to the layout of your site. A heading using a 24px font and the Montserrat typeface will take up significantly more horizontal space than the same using the Oswald typeface. This can cause unwanted text wrapping and make make your headings look out of balance.

This is why we have included the Small, Medium and Large base setting for every element of your store. Experiment with these to get the look you are after.

Why not pixel sizes?

Certain part of the theme's typography work as a group and should be changed in proportion to each other. For example there may be many different sizes of headings but if you adjust the size of one the rest need to be adjusted too in order to keep the design looking right.

The way this is done is to change the Base size that all members of a group have a relationship to. So if you want your blog headings smaller, just adjust the base size and all other titles in your store will still look good in relation to the new blog heading size.