This post shows the thorough typography styling boiled into this theme. We use this template to determine the default styling of all possible HTML elements so nothing is overlooked in our final product.

This is a test of all the elements found in the Shopify WYSIWYG editor.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

"This is an amazing blockquote"

This text is bold and this text is italic. This is a strikethrough of some text.

• Bullet
• Bullet
• Bullet

1. A numbered item
2. A numbered item
3. A numbered item

This text is indented. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

This text is outdented. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Left aligned. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Center aligned. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Right aligned. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Vivamus sagittis lacus this is an inline text link faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam.

Tables

Images

This image is from the product collection 1024

This is an uploaded image 1024

This is a URL image

Other CSS stuff

This is a standard paragraph created using the Shopify editor. It has a strong tag, an em tag and a strikethrough which is actually just the del element. There are a few inline elements not available in the WordPress admin but we style those too, just in case you want to use them. These include citations, abbr, bits of code and variables, inline quotations, inserted text, text that is no longer accurate or something so important you might want to mark it. We can also style _subscript and ^superscript so you can say things like C₈H₁₀N₄0₂ is my 2^nd favourite chemical.

“This stylesheet is going to help so much. Users can take full advantage of all the HTML elements. Imagine that!”

If you are feeling non-semantic you might even use bold, italic, big or small elements. Incidentally, these HTML4.01 tags have been given new life and semantic meaning in HTML5, you may be interested in reading this article by Harry Roberts which gives us a nice excuse to test a link. It is also worth noting in the “kitchen sink” view you can also add underline styling and set text color with pesky inline CSS.