Typography

Microbe provides default styling for most typographic elements to allow easy creation of beautiful documents.

All styles are based on the HTML document's font-size (rem) and will scale according to the users stylesheet and the screen size.

Headings

Heading 1

Vestibulum venenatis neque nec iaculis viverra. Proin a odio ex.

Heading 2

Phasellus nec luctus dolor. Curabitur id facilisis diam.

Heading 3

Vivamus feugiat tempor tellus, vel consequat turpis gravida non.

Heading 4

Quisque tristique lobortis ligula id tempus.

Heading 5

Sed aliquet velit mauris, vel interdum diam mattis et.

Heading 6

Donec in lorem imperdiet, eleifend turpis eget, congue velit.

HTML
<h1>
  Heading 1
</h1>
<p>
  Vestibulum venenatis neque nec iaculis viverra. Proin a odio ex.
</p>
<h2>
  Heading 2
</h2>
<p>
  Phasellus nec luctus dolor. Curabitur id facilisis diam.
</p>
<h3>
  Heading 3
</h3>
<p>
  Vivamus feugiat tempor tellus, vel consequat turpis gravida non.
</p>
<h4>
  Heading 4
</h4>
<p>
  Quisque tristique lobortis ligula id tempus.
</p>
<h5>
  Heading 5
</h5>
<p>
  Sed aliquet velit mauris, vel interdum diam mattis et.
</p>
<h6>
  Heading 6
</h6>
<p>
  Donec in lorem imperdiet, eleifend turpis eget, congue velit.
</p>

Inline text

AbbreviationCitationCodeDeletedDefinitionEmphasisedIdiomaticInsertedCtrl + SHighlightedStrikethroughSampSmallXsubXsupStrongUnderlinedVar
HTML
<abbr>
  Abbreviation
</abbr>
<cite>
  Citation
</cite>
<code>
  Code
</code>
<del>
  Deleted
</del>
<dfn>
  Definition
</dfn>
<em>
  Emphasised
</em>
<i>
  Idiomatic
</i>
<ins>
  Inserted
</ins>
<kbd>
  Ctrl + S
</kbd>
<mark>
  Highlighted
</mark>
<s>
  Strikethrough
</s>
<samp>
  Samp
</samp>
<small>
  Small
</small>
<span>
  X
  <sub>
    sub
  </sub>
</span>
<span>
  X
  <sup>
    sup
  </sup>
</span>
<strong>
  Strong
</strong>
<u>
  Underlined
</u>
<var>
  Var
</var>

Horizontal ruler

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper blandit ultricies. Etiam non suscipit felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin feugiat purus hendrerit sapien condimentum, eu facilisis ex eleifend. Sed lobortis est a urna accumsan vestibulum. Curabitur iaculis sem lacus, id molestie eros ultrices eu. Nullam justo nulla, sollicitudin sed mi pretium, consequat varius erat. Phasellus sed eros dictum, congue enim in, dictum ante. Sed condimentum ut elit eu vehicula.


Fusce congue nec massa id eleifend. Donec id luctus ligula. In pellentesque diam eu magna interdum, a tristique arcu dignissim. In eu lacinia nisl. Phasellus eu nisi vitae enim aliquam rutrum. Suspendisse fringilla tortor et tincidunt vulputate. Nam a urna a purus ornare gravida non sit amet risus. Morbi in justo quis velit elementum fermentum. Etiam tristique diam nunc, quis suscipit velit suscipit non.

HTML
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper blandit ultricies. Etiam non suscipit felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin feugiat purus hendrerit sapien condimentum, eu facilisis ex eleifend. Sed lobortis est a urna accumsan vestibulum. Curabitur iaculis sem lacus, id molestie eros ultrices eu. Nullam justo nulla, sollicitudin sed mi pretium, consequat varius erat. Phasellus sed eros dictum, congue enim in, dictum ante. Sed condimentum ut elit eu vehicula.
</p>
<hr>
<p>
  Fusce congue nec massa id eleifend. Donec id luctus ligula. In pellentesque diam eu magna interdum, a tristique arcu dignissim. In eu lacinia nisl. Phasellus eu nisi vitae enim aliquam rutrum. Suspendisse fringilla tortor et tincidunt vulputate. Nam a urna a purus ornare gravida non sit amet risus. Morbi in justo quis velit elementum fermentum. Etiam tristique diam nunc, quis suscipit velit suscipit non.
</p>

Heading group

Get inspired with CSS

How to use CSS to add glam to your Website?

HTML
<hgroup>
  <h2>
    Get inspired with CSS
  </h2>
  <p>
    How to use CSS to add glam to your Website?
  </p>
</hgroup>

Blockquote

"Be the change that you wish to see in the world."
— Mahatma Gandhi
HTML
<blockquote>
  &#34;Be the change that you wish to see in the world.&#34;
  <footer>
    <cite>
      — Mahatma Gandhi
    </cite>
  </footer>
</blockquote>

Code block

console.log('Hello world!');
HTML
<pre><code>console.log('Hello world!');</code></pre>