Typography Page

This page demonstrates the various typographic styles that are available within WordPress editor fields. As you can probably see, this is a basic paragraph of text. Within it you can include hyperlinks to other pages. When doing so, the link text should always be descriptive of the page that you are linking to. For example, visit the Google homepage is a much better way of linking than this; to visit the Google homepage, click here. When creating hyperlinks it’s best practice to open links to external websites (offsite links) in a new window/tab thus allowing the user to still have this website open in their browser when they have finished with the external website.

This next paragraph includes emboldened text and also some text set in italics. You can also set text to be both emboldened and italicised if you wish. We can also use this paragraph to test underlined text. Obviously, you’d not want to use underlined text as it makes text looks like a hyperlink. Finally, we can also set some text with strikethrough to check that that style works too. Before we take a look at heading styles, let’s just check that the Blockquote style is working:

The HTML <blockquote> tag is a semantic element used to define a quote from another source. Unfortunately WordPress currently offers no way to add the tags ‘cite’ attribute except by manually adding it with the editor in ‘Text’ mode. Anyway, let’s take a look at HTML Headings.

Heading 2 – Similarly, this will probably push to two lines as well

Heading 2 – This one is a link as well

Headings are used to separate blocks of text by level of importance. By default a page title in WordPress is always set in Heading 1 because it is the most important heading on the page. A page’s H1 is an important factor for ‘on page’ SEO. You can see that this paragraph is prefaced with a Heading 2 – the second level of heading importance.

this is a new blockquote.

Heading 3

Heading 3 – This one is a link as well

This section of text is prefaced with a Heading 3. We’ll stick in some Latin text just to bulk the paragraph out a bit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sapien metus, faucibus eget massa vel, dictum suscipit mauris. Proin tempor metus est, vel aliquet risus pharetra sed. Curabitur nec semper nisi, vitae egestas turpis. Nunc sit amet magna dignissim tortor suscipit dignissim.

Now let’s add a horizontal line below this paragraph to check that they are working.

Heading 4

Heading 4 – This one is a link as well

Gosh, we’re at a level 4 Heading already. That means that this paragraph should only contain text that is supportive of the main content as opposed to being of high significance to it. While we’re here, we’ll take a quick look at another text style; Preformatted text:

Preformatted text, set in the HTML <pre> tag is designated as having 'unusual' formatting although in practice, most people use it to display computer code.

Ok, we’re making good progress but we still have a few more default WordPress styles to look at.

Heading 5

We’re really getting to the least important heading styles now. Unlike H1, H2 and H3 headings, H4, H5 and H6 are unlikely to be considered by search engines when evaluating a page of content. Therefore, they should only be considered for presentation styles as opposed to SEO significance. However, while we’re here, let’s look at an unordered list, often known as a bullet list.

Obviously there will be times when you need an ordered list, also known as a numbered list. For those situations you need the HTML <ol> tag with ol standing for Ordered List:

  1. As you can see, ordered lists include numbers
  2. These numbers will automatically adjust themselves as you add, edit and remove list items to keep the list in numeric order
  3. Despite the existence of this wonderful tag, people still seem to like to add 1.) 2.) and 3.) to the start of paragraphs rather than use an ordered list.
    1. Here is a sub ordered list
    2. with two point

With that all sorted, we’ll take a quick look at H6 and the last few styles.

This text is set in Heading 6. It will be useful for small print.

As you can see, we usually use heading 6 for small print. It’s of such minor importance that it is unlikely to be used by search engines as part of the ‘on page’ SEO quality of a page. Therefore, why not use it as a presentational style?

Now, let’s just run over some quick notes on adding typographical content to the website. It makes sense to do this in the form of an unordered list so here goes: