Typografia

Typography test page with a very long H1 element so that we can test line height

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.

Some more text here.

-Alex Gant, Web Developer Fellowship Productions

Heading 2 – Similarly, this will probably push to two lines 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

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

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.

  • Unordered lists are written in HTML using the <ul>tag with ul standing for Unordered List*
  • It is unordered as each list item has a graphical ‘bullet’ as opposed to a number
  • Unordered lists can be used used for lots of things and should always be used if any form or ordering in not required
  • Like any other typographical element, unordered lists can display superscript and subscript elements. Superscript elements are often used to show footnotes‚ like this[1] while subscript elements are often used in element names like this: H20

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.

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:

  • If you need to insert a symbol into your text, use the ‘Special characters’ icon. It looks like an omega sign. From there you’ll have access to all manner of symbols such as ™ and ©. You’ll also find accented characters such as Ä and ã as well as fractions like¼ and ¾.
  • When pasting text from another source, be sure to click the ‘Paste as text’ icon before you paste it in to the WordPress editor. This will ensure any formatting is removed. Failure to do this can lead to superfluous HTML being inserted into your pages
  • To remove formatting from selections of text, use the ‘Clear formatting’ icon
  • Err away from using the left align, right align and centre align options. This website has been programmed to align text correctly based on its context so you should never need to align text. If you are tempted to use the ‘Justify’ option you probably shouldn’t be allowed to use a computer ever again!
Scroll to Top