Typography

Includes such styles as headings and body text, quotes, lists, text delimiter, etc.

Headings and main text

HTML-headings, from <h1> to <h6>:

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Main text example

The default font-size is equal to 14px, and the line-height is equal to the text size multiplied by 1.4. These rules are applied to the <body> element and are inherited throughout all text. In addition, an element <p>  (paragraph) has a default bottom padding 15px.

Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. The Force is strong with this one. I have you now. I find your lack of faith disturbing. Leave that to me. Send a distress signal, and inform the Senate that all on board were killed. You are a part of the Rebel Alliance and a traitor! Take her away!

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time! Kid, I've flown from one side of this galaxy to the other. I've seen a lot of strange stuff, but I've never seen anything to make me believe there's one all-powerful Force controlling everything. There's no mystical energy field that controls my destiny. It's all a lot of simple tricks and nonsense. I suggest you try it again, Luke. This time, let go your conscious self and act on instinct. Ye-ha! Red Five standing by.

Blockquotes

By default
<blockquote>

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

<blockquote>
    ...
</blockquote>

<blockqoute class="onequote">

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

<blockquote class="onequote">
    ...
</blockquote>

<blockqoute class="noquotes">

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

<blockquote class="noquotes">
    ...
</blockquote>

<blockqoute class="cloud">

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

<blockquote class="cloud">
    ...
</blockquote>

<blockqoute class="cloud border">

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

<blockquote class="cloud border">
    ...
</blockquote>

<blockqoute class="cloud left OR right">

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

<blockquote class="cloud left">
    ...
</blockquote>

<blockquote class="cloud right">
    ...
</blockquote>

Lists

Bulleted list
<UL>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
  • Faucibus porta lacus fringilla vel
<ul>
    <li>...</li>
</ul>

Numbered list
<OL>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
  4. Faucibus porta lacus fringilla vel
<ol>
    <li>...</li>
</ol>

Not stylized list
<ul class="list-unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
  • Faucibus porta lacus fringilla vel
<ul class="list-unstyled">
    <li>...</li>
</ul>

With underscore
<ul class="list-bordered">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
<ul class="list-bordered">
    <li>...</li>
</ul>

With arrows
<ul class="list-arrow">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
<ul class="list-arrow">
    <li>...</li>
</ul>

Numeration in the circle 
<ul class="list-count-sign">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
<ul class="list-count-sign">
    <li>...</li>
</ul>

List with icons
<ul class="list-icon-sign">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
<ul class="list-icon-sign">
    <li class="icon-toaster">...</li>
    <li class="icon-home">...</li>
</ul>

List with line icons
<ul class="list-icon-line">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel 
<ul class="list-icon-line">
    <li>
        <i class="bubble icon-toaster"></i>
        ...
    </li>
    <li>
        <i class="bubble icon-home"></i>
        ...
    </li>
</ul>

Inline list
<ul class="list-inline">

  • Item #1
  • Item #2
  • Item #3
  • Item #4
<ul class="list-inline">
    <li>...</li>
</ul>

Description list
<dl>

Description list
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Horizontal description list
<dl class="dl-horizontal">

Description list
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
    <dt>...</dt>
    <dd>...</dd>
</dl>

Text separator

<hr>

<hr>

Size
<hr class="larger large OR small" title="...">

<hr class="larger">
<hr class="large">
<hr class="small">

Style
<hr class="dashed OR dotted" title="...">

<hr class="dashed">
<hr class="dotted">

With text
<hr title="...">

<hr title="Separator">

Text in the circle
<hr class="circle" title="...">

<hr class="circle" title="Separator">

Text position
<hr class="left right OR center" title="...">

<hr class="left" title="Separator on the left">
<hr class="center" title="Separator in the center">
<hr class="right" title="Separator on the right">

Address

<address>

SeoSamba, Inc.
2140 S Dupont Highway , Camden
Delaware 19934
P: (123) 456-7890
Name
E: first.last@gmail.com
P: (123) 456-7890 
<address>
    <strong>SeoSamba, Inc.</strong><br />
    2140 S Dupont Highway , Camden<br />
    Delaware 19934<br />
    <abbr title="Phone">P:</abbr> (123) 456-7890    
</address>

<address>
    <strong>Name</strong><br />
    <abbr title="Email">E:</abbr> <a href="mailto:#">first.last@gmail.com</a><br />
    <abbr title="Phone">P:</abbr> (123) 456-7890        
</address>

Share with your friends

Google+