Typography.

User-defined Styles

This page provides an overview of the typographic styles currently in use throughout this website. These style may be the default styles if they have not been edited in the theme customiser. If the default styles have been edited then the current values will be show below. If you need to refer back to the original styles , they are available in the "Default Styles" section at the bottom of this page. The following text, headings, tables and list styles include examples of each attribute. Some of these attributes can be customised from the theme settings 'Typography' panel in the theme customiser.

This paragraph provides an example of text which is styled by the body class. The current font-size of this text is 1.2rem. By default all body text links are underlined with an underline offset of 0.03rem –– on hover their opacity increases from the default of 0.9 to 1: for example: this is a link
By default all text and heading are left-aligned. User-defineable attributes include: Font-size / Line-height / Text-transform / opacity. Standardized attributes include: Bold / Font-style: Italic / Font-style: Normal / Text-decoration: Underlined

Caption
Large Caption
Caption with letter spacing
Medium Caption with letter spacing
Large Caption with letter spacing

Unordered list:

Ordered list:
  • List-style-type: disc;
  • Font-size: 1.4rem;
  • Line-height: 1.5rem;
  • Font-style: Bold;
  • Font-style: Italic;
  • Font-style: Normal;
  • Text-decoration: Underlined;
  • Text-transform: uppercase;
  • Opacity: 0.9;
  1. List-style-type: decimal;
  2. Font-size: 1.4rem;
  3. Line-height: 1.5rem;
  4. Font-style: Bold;
  5. Font-style: Italic;
  6. Font-style: Normal;
  7. Text-decoration: Underlined;
  8. Text-transform: uppercase;
  9. Opacity: 0.9;

Heading 01:
Font-family: "Roboto Mono"
Font-size: 5.1rem
Line-height: 1.05rem
Letter-spacing: 0rem
Text-transform: uppercase

Heading 02:
Font-family: "Roboto Mono"
Font-size: 3.6rem
Line-height: 1.08rem
Letter-spacing: 0rem
Text-transform: uppercase

Heading 03:
Font-family: "Roboto Mono"
Font-size: 2.1rem
Line-height: 1.3rem
Letter-spacing: 0rem
Text-transform: uppercase

Heading 04:
Font-family: "Space Mono"
Font-size: 1.6rem
Line-height: 1.4rem
Letter-spacing: 0rem
Text-transform: uppercase

This sentence spans multiple lines to demonstrate the line-height attribute. The last sentence may not be long enough to span multiple lines on larger devices.

Heading 05:
Font-family: "Roboto Mono"
Font-size: 1.2rem
Line-height: 1.32rem
Letter-spacing: 0rem
Text-transform: uppercase

This sentence spans multiple lines to demonstrate the line-height attribute. Because the default font-size is relatively small, the last sentence may not be long enough to span multiple lines on larger devices. Another sentence or two may be needed.
Heading 06:
Font-family: "Roboto Mono"
Font-size: 1.0rem
Line-height: 1.32rem
Letter-spacing: 0rem
Text-transform: uppercase

This sentence spans multiple lines to demonstrate the line-height attribute. Because the default font-size is relatively small, the last sentence may not be long enough to span multiple lines on larger devices. Another sentence or two may be needed. This sentence exists only for the purpose of making the paragraph long enough to span multiple lines and demonstrate the line-height attribute.

"This is a blockquote example. You can select blockquotes from the Formatting dropdown when using the text-editor within the Shopfy Dashboard for Products / Collections / Blogs pages, or within any rich-text fields in the sections and blocks of the theme customiser."
––Anon E Mouse