Typographie

CSS Chassis

Please note that not all CSS elements are included in the current theme!

Heading 1 <h1>

Heading 2 <h2>

Heading 3 <h3>

Heading 4 <h4>

Heading 5 <h5>

Heading 6 <h6>

Heading 1 <h1>

Many say exploration is part of our destiny, but it’s actually our duty to future generations and their quest to ensure the survival of the human species.

Heading 2 <h2>

It suddenly struck me that that tiny pea, pretty and blue, was the Earth. I put up my thumb and shut one eye, and my thumb blotted out the planet Earth. I didn”t feel like a giant. I felt very, very small.

Heading 3 <h3>

The Earth was small, light blue, and so touchingly alone, our home that must be defended like a holy relic. The Earth was absolutely round. I believe I never knew what the word round meant until I saw Earth from space.

Heading 4 <h4>

To be the first to enter the cosmos, to engage, single-handed, in an unprecedented duel with nature—could one dream of anything more?

Heading 5 <h5>

What was most significant about the lunar voyage was not that man set foot on the Moon but that they set eye on the earth.

Heading 6 <h6>

Many say exploration is part of our destiny, but it’s actually our duty to future generations and their quest to ensure the survival of the human species.

Block-level elements

Here’s a paragraph <p> filled with some Space Ipsum. Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman’s earth, if free men make it, will be truly round: a globe in practice, not in theory.

There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.

Here’s a div <div>. A Chinese tale tells of some men sent to harm a young girl who, upon seeing her beauty, become her protectors rather than her violators. That’s how I felt seeing the Earth for the first time. I could not help but love and cherish her

This is an article <article> with a paragraph

We want to explore. We’re curious people. Look back over history, people have put their lives at stake to go out and explore … We believe in what we’re doing. Now it’s time to go.

End of the article.

Let’s light this fire one more time, Mike, and witness this great nation at its best. <blockquote> via Space Ipsum

We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard, because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win.

* {
	font-family: "Comic Sans MS", "Comic Sans", "Marker Felt" !important;
}
<pre>

Many say exploration is part of our destiny, but it’s actually our duty to future generations and their quest to ensure the survival of the human species.

Sherlock Holmes
221B Baker Street
London, United Kingdom <address>

Lists <li>

The regret on our side is, they used to say years ago, we are reading about you in science class. Now they say, we are reading about you in history class.

Unordered list <ul>
List element
Across the sea of space, the stars are other suns.
Science cuts two ways, of course; its products can be used for both good and evil. But there’s no turning back from science. The early warnings about technological dangers also come from science.

Ordered list <ol>
List element
The dreams of yesterday are the hopes of today and the reality of tomorrow.
Curious that we spend more time congratulating people who have succeeded than encouraging people who have not.

For those who have seen the Earth from space, and for the hundreds and perhaps thousands more who will, the experience most certainly changes your perspective. The things that we share in our world are far more valuable than those which divide us.

Definition term <dt>: Definition <dd>
Earth: A kick-ass planet.
Pluto: A kick-ass former planet.
Space Ipsum: NASA is not about the ‘Adventure of Human Space Exploration’…We won’t be doing it just to get out there in space – we’ll be doing it because the things we learn out there will be making life better for a lot of people who won’t be able to go.

Spaceflights cannot be stopped. This is not the work of any one man or even a group of men. It is a historical process which mankind is carrying out in accordance with the natural laws of human development.

Text-level elements

anchor link <a>
abbreviation: SASS <abbr>
citation: A Study in Scarlet <cite>
Here’s the <code> element
deleted text: ~~Episodes I, II, III~~ <del>
definition: The definition element is the element being defined inline. <dfn>
emphasis <em>
inserted text <ins>
keyboard input: control + space <kbd>
mark element <mark>
meter: awesomeness <meter>
progress: 70 % <progress>
quotation (short): You just gotta believe! <q>
quotation within a quotation (short): Yo dawg, I heard you like quotes so I put this quote within this quote. <q>
strikethough: ~~Lance Armstrong remains steroid-free.~~ <s>
sample text: Error <samp>
small: Hydrogen <small>
small within small: Hydrogen Hydrogen <small>
strong: The Hammer <strong>
subscript: _Lower 0_{1_2₃} <sub>
superscript: I need a good ^superman joke to go here. 0^{1^2³} <sup>
time: Dec 9 <time>
underline: Never underline anything. <u>
variable: cat + dog = catdog <var>

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: H₂0

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:

As you can see, ordered lists include numbers
These numbers will automatically adjust themselves as you add, edit and remove list items to keep the list in numeric order
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!