Typography

Encounters comes with a beautiful selection of typography styles to accommodate even the most experienced writer. Of course, you can always make modifications to the styles you see on this page by copying and pasting the css into a child theme. Tutorials are available for this theme to help you achieve any modifications you want to make.

To start off, let’s showcase the H1, H2, h3, h4, h5, and h6, below:

Heading 1

Maecenas diam odio, eleifend nec porttitor non Pulvinar vitae felis. Morbi id nibh lectus. Integer velit nunc, congue vitae tempus quis, consectetur nec neque. Nam aliquet, massa vitae lobortis egestas, dui arcu sollicitudin felis, et laoreet eros nunc in justo.

Heading 2

Maecenas diam odio, eleifend nec porttitor non Pulvinar vitae felis. Morbi id nibh lectus. Integer velit nunc, congue vitae tempus quis, consectetur nec neque. Nam aliquet, massa vitae lobortis egestas, dui arcu sollicitudin felis, et laoreet eros nunc in justo.

Heading 3

Maecenas diam odio, eleifend nec porttitor non Pulvinar vitae felis. Morbi id nibh lectus. Integer velit nunc, congue vitae tempus quis, consectetur nec neque. Nam aliquet, massa vitae lobortis egestas, dui arcu sollicitudin felis, et laoreet eros nunc in justo.

Heading 4

Maecenas diam odio, eleifend nec porttitor non Pulvinar vitae felis. Morbi id nibh lectus. Integer velit nunc, congue vitae tempus quis, consectetur nec neque. Nam aliquet, massa vitae lobortis egestas, dui arcu sollicitudin felis, et laoreet eros nunc in justo.

Heading 5

Maecenas diam odio, eleifend nec porttitor non Pulvinar vitae felis. Morbi id nibh lectus. Integer velit nunc, congue vitae tempus quis, consectetur nec neque. Nam aliquet, massa vitae lobortis egestas, dui arcu sollicitudin felis, et laoreet eros nunc in justo.

Heading 6

Maecenas diam odio, eleifend nec porttitor non Pulvinar vitae felis. Morbi id nibh lectus. Integer velit nunc, congue vitae tempus quis, consectetur nec neque. Nam aliquet, massa vitae lobortis egestas, dui arcu sollicitudin felis, et laoreet eros nunc in justo.

HTML Element Tag Tests

Here is an example address, using the <address> tag:

55555 Your Street,
Vancouver, British Columbia
Canada V5E 4M3

This is an example of a page anchor <anchor> (otherwise known as a link). This abbr. is an example of an <abbr> tag in the middle of a sentence. Here is a TLA showing off the <acronym> tag. Can you cite a reference for that, using the <cite> tag? Have you noticed that all of the tag names are displayed in code-form, using the <code> tag? Similarly, I could emulate keyboard text, using the <kbd> text tag, or emulate teletype text using the <tt> tag.

Oh no! I wrote something incorrectly. I’d better delete it, using the <del> tag. I could alternately strike something out using the <strike> tag, or strike something out using the <s> tag. So many choices, which I emphasize using the <em> tag. Just to clarify, this is some inserted text, that I’ll highlight using the <ins> tag.

Need to display completely unformatted text, such as a large block of code? Use the <pre> tag, which lets you display:

#container {
	float: left;
	margin: 0 -240px 0 0;
	width: 100%;
}

Want to quote the WordPress tagline Code is Poetry? Use the <q> tag to add quotes around it. This is strong text (otherwise known as bold), using the <strong> tag.

Need to write H2O or E = MC2? You may find great use for subscripting text using the <sub> tag, or for superscripting text using the <sup> tag. Need to call out a variable? Use the <var> tag.

Div and Span Tests

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

This is a div with “myclass” class, inside of another div, using the <div> tag.

Sed odio nibh, tincidunt adipiscing, pretium nec, tincidunt id, enim. Fusce scelerisque nunc vitae nisl.