The core Joomla! typography uses classes such as "contentheading and "componentheading" which is ok, but there are much friendlier tags available that spiders look for when indexing your content (e.g. H1,H2,H3). Inspirion is not only built with SEO in mind, and includes several custom typography styles to be used in your content.

Note: The typography in this template can be set to use Sans Serif fonts or Serif fonts via the template's parameters!

I decided to take a calligraphy class to learn how to [learn calligraphy]. I learned about serif and sans-serif typefaces, about varying the space between different letter combinations, about what makes great typography great. It was beautiful. Historical. Artistically subtle in a way that science can't capture. And I found it fascinating. — Steve Jobs

Ever look around the web and notice some sites have such great typography? The trick to beautiful typography is of course in the CSS, but using valid XHTML to structure your content is key.

Working with Typography

• Always use <p> tags to fragment paragraphs, pay attention to heading structure. If you're a novice with XHTML, just challenge yourself to use the most often used codes such as <p>, <h1>, <h2>, <h3>, <img>, and <a>. You'll be amazed at what you can do.
• Familiarize yourself with the provided CSS styles.
• Never paste directly into the editor from layout programs such as Microsoft Word
• Use a WYSIWYG Editor with a code friendly view.
  We recommend wysiwygpro ($54) or Joomla Content Editor (JCE) (Free) editor with great features.
• Ask your extension developers to practice using valid XHTML. Using valid code helps us to identify and fix browser display errors.

Heading One

This is paragraph text. The rest of this paragraph is filler text to maintain balance. Quisque libero nulla, porttitor eu, convallis sed, gravida ac, nulla. Ut malesuada, tellus sed facilisis tincidunt, orci erat lobortis leo, id varius massa lectus ultrices diam.

Heading Two

This is paragraph text. The rest of this paragraph is filler text to maintain balance. Quisque libero nulla, porttitor eu, convallis sed, gravida ac, nulla. Ut malesuada, tellus sed facilisis tincidunt, orci erat lobortis leo, id varius massa lectus ultrices diam.

Heading Three

This is paragraph text. The rest of this paragraph is filler text to maintain balance. Quisque libero nulla, porttitor eu, convallis sed, gravida ac, nulla. Ut malesuada, tellus sed facilisis tincidunt, orci erat lobortis leo, id varius massa lectus ultrices diam.

Heading Four

This is paragraph text. The rest of this paragraph is filler text to maintain balance. Quisque libero nulla, porttitor eu, convallis sed, gravida ac, nulla. Ut malesuada, tellus sed facilisis tincidunt, orci erat lobortis leo, id varius massa lectus ultrices diam.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

The styles above are used by appending a class tag of warn, info, and alert to the paragraph tag..
Example:

 <p class="warn">
 ....your text here......
 </p>

 <p class="info">
 ....your text here......
 </p>

 <p class="alert">
 ....your text here......
 </p>

The quote at the top of this page was achieved by appending the "quote" class to the paragraph tag.
Example:

<p class="quote">...your quoted text here...</p>

• List Item One
  • Sublevel List Item A
  • Sublevel List Item B
  • Sublevel List Item C
• List Item Two
• List Item Three
• List Item Four

1. List Item One
   1. Sublevel List Item A
   2. Sublevel List Item B
   3. Sublevel List Item C
2. List Item Two
3. List Item Three
4. List Item Four

• Checklist Item 1
• Checklist Item 2
• Checklist Item 3

The checklist style above is achieved by entering:

<ul class="checklist">

<li>List Item A</li>

<li>List Item B</li>

<li>List Item C</li>

</ul>

Working with Images and Alignment

In most editors you can align your images without any problems. If you're like us and and prefer to use the code view to keep a close eye on your XHTML, we have added two classes (.floatleft and .floatright) which can be applied to any element to properly float items such as media objects.

Here is an example:

<p><img src="images/myimage.png" alt="image name" class="floatleft"/>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>