z-Typography Style Guide

H1 Heading is this tall

H2 Heading is this tall

H3 Heading is this tall

H4 Heading is this tall.

Paragraph text is this tall when placed in a one column layout where content is to be read. There are usual styles like strong and bold, as well as, emphasized italics text.

Unordered Lists:

  • List Item
  • List Item

Ordered Lists:

  1. List Item
  2. List Item

Blockquotes can be used for Scripture quotes. Jesus said,

“For this is how God loved the world: He gave his one and only Son, so that everyone who believes in him will not perish but have eternal life. God sent his Son into the world not to judge the world, but to save the world through him. (John 3:16-17)1

Below this paragraph is a horizonatal rule (or <hr> tag).


Small Text

You can use <small> tags for things like LORD or the name of a ship (e.g.: MS Ship Name)

Using small text can be very useful when writing words like LORD using the html: L<span class=”small”>ORD</span> or just by simply using html’s <small> tags: L<small>ORD</small>. Here is another SMALL example.

Tables of Data

You can also have tables of data, which are used in some devotional’s by Chuck Swindoll. You just need to add class=”table” to the <table> tag:

This table has the <th> tags inside the <thead>.

TH Heading 1TH Heading 2
Something is not no thing.Nothing is not some thing.
GodlyUngodly
HugeTiny

This table has the <th> tags inside the <tbody>. The headings are left aligned.

 

TH Heading 1TH Heading 2
Something is not no thing.Nothing is not some thing.
GodlyUngodly
HugeTiny

 

This table has the <th> tags inside the <tbody> but styled with class=”text-center”. The headings are centered with extra padding on top.

 

TH Heading 1TH Heading 2
Something is not no thing.Nothing is not some thing.
GodlyUngodly
HugeTiny

 

Future Updates

Future styling updates to the template will be documented here in this test email. Please refer back to it occasionally.

  1. New Living Translation

This test e-mail was created by Will Murphy. Notice how the footnote in the quote above is superscripted. That uses a <sup> tag.