Typography

Good typography style is the basis of every website, and we have also built some great typrography styles into TorqueUI.

Headings

All the HTML headings from h1 to h6. We have also made heading classes available matching the HTML headling with classes from .h1 through .h6. Usable in situations where you want to match the font styling of a HTML heading but for some reason don’t want to use a heading. Like SEO situations or you want to use the styling inline in some text.

<h1> Heading

<h2> Heading

<h3> Heading

<h4> Heading

<h5> Heading

<h6> Heading

.h1 Heading

.h2 Heading

.h3 Heading

.h4 Heading

.h5 Heading

.h6 Heading

<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>
<div class="h1">.h1 Heading</div>
<div class="h2">.h2 Heading</div>
<div class="h3">.h3 Heading</div>
<div class="h4">.h4 Heading</div>
<div class="h5">.h5 Heading</div>
<div class="h6">.h6 Heading</div>

Body text

Body text in TorqueUI has a font-size of 14px. The font-size is applied to the <body> element and is inherited down thru the page and the elements using em sizing. Below is a example of body text. In addition to this <p> tags (paragraph elements) receive a bottom margin of half their line-height (0.5em`);

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia ipsum soluta nemo facilis magni iste, nulla voluptatum dolorem, vel. Quae maxime, aliquam adipisci. Voluptatibus laborum inventore, molestias minima earum voluptates!

Beatae at illum quas, asperiores cum officia itaque perferendis nisi assumenda provident dignissimos fugiat error, reiciendis unde, dolore quisquam dolores quod, atque incidunt suscipit impedit maiores magni quia? Ipsam, quis.

Ea minus aperiam atque quis nisi amet, iste exercitationem dolor perspiciatis quae distinctio neque culpa quasi ipsum doloremque vel nihil. Quis iste tempore et possimus, ratione nemo, sit numquam perspiciatis!

<p>Lorem ...</p>
<p>Beatae ...</p>
<p>Ea minus ...</p>

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem itaque in harum similique laborum pariatur ex ullam reprehenderit dolorum accusamus. Saepe, nesciunt, totam minus distinctio voluptates est recusandae vero ab! — Some smartass

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem
  itaque in harum similique laborum pariatur ex ullam reprehenderit dolorum
  accusamus. Saepe, nesciunt, totam minus distinctio voluptates est recusandae
  vero ab!
  <small>— Some smartass</small>
  </p>
</blockquote>

Inline elements

Inline elements are a way to style or emphasize text found in headlines or paragraphs.

Small or secondary text

This text is small

.h1 heading with small or secondary text

This text is small

<small>This text is small</small>
<h1>.h1 heading with <small>small</small> or <small>secondary text</small></h1>
<p>This text is <small>small</small></p>

Emphasized text

This text is emphasized

<em>this text is emphasized</em>

Important text

This text is important

<strong>this text is important</strong>

Underlined text

This text is underlined

<u>This text is underlined</u>

Strikethrough text

Strikethrough text or striking text with a line through.

~~This text is strikethrough~~ ~~This text is deleted / strikethrough~~

<s>This text is strikethrough</s>
<del>This text is deleted / strikethrough</del>

Inserted text

This text is inserted

<ins>This text is inserted</ins>

Marked or highlighted text

This text is marked/highlighted

<mark>This text is marked/highlighted</mark>

Text as links

This text is a link

This text is a link inside a paragraph

Heading as a link

<a href="#">This text is a link</a>
<p>This text is a <a href="#">link</a> inside a paragraph</p>
<h1><a href="#">Heading as a link</a></h1>