Typography

The typography of the framework has the role to ensure the perfect aspect for text content both on desktop and mobile devices. The primary font is Arial, but it can be easily changed in a few seconds. The text elements are well organized and easy to read on mobile devices, because their font sizes were optimized for mobile view.

Below you can see the basic elements of typography included in Jumpeye framework.

General typography

Head 1 text

Head 2 text

Head 3 text

Head 4 text

Head 5 text

Head 6 text

<h1>Head 1 text</h1>
<h2>Head 2 text</h2>
<h3>Head 3 text</h3>
<h4>Head 4 text</h4>
<h5>Head 5 text</h5>
<h6>Head 6 text</h6>

This is a large header

This is a smaller subheader

<h2>This is a large header</h2>
<h4 class="subheader">This is a smaller subheader</h4>

Paragraph lead

This is the content of the paragraph. Sometimes you want to organize your text content in paragraphs in order to improve readability or highlight part of the text. The font size of the paragraph is set to 14px with a 18px line height.

<p class="lead">Paragraph lead</p>

<p>
    This is the content of the paragraph. Sometimes you want to organize your text content in paragraphs in order to offer a better readability for visitors or to highlight a part of the text.
    The font size of the paragraph is set to 14px with a 18px line height.
</p>

Sometimes you want to quote somebody and mark this through a blockquote.

The most beautiful thing we can experience is the mysterious. It is the source of all true art and all science. Albert Einstein

<blockquote>
	The most beautiful thing we can experience is the mysterious. It is the source of all true art and all science. 									
	<cite>Albert Einstein</cite>
</blockquote>

Links

Head 1 link

<h1><a href="">Head 1 text</a></h1>
<h2><a href="">Head 2 text</a></h2>
<h3><a href="">Head 3 text</a></h3>
<h4><a href="">Head 4 text</a></h4>
<h5><a href="">Head 5 text</a></h5>
<h6><a href="">Head 6 text</a></h6>

<a href="">This is a simple inline link</a>

Lists

ul circle

Coffee
Tea
- Green
- Black
- Fruit
Milk

ul disc

Coffee
Tea
- Green
- Black
- Fruit
Milk

ul square

Coffee
Tea
- Green
- Black
- Fruit
Milk

ol decimal

Coffee
Tea
1. Green
2. Black
3. Fruit
Milk

ol latin

Coffee
Tea
1. Green
2. Black
3. Fruit
Milk

ol roman

Coffee
Tea
1. Green
2. Black
3. Fruit
Milk

<ul class="[circle, disc, square]">
    <li>Coffee</li>
    <li>Tea
	    <ul class="[circle, disc, square]">
	        <li>Green</li>
	        <li>Black</li>
	        <li>Fruit</li>
	    </ul>
    </li>
    <li>Milk</li>
</ul>

<ol class="[decimal, latin, roman]">
    <li>Coffee</li>
    <li>Tea
	    <ol class="[decimal, latin, roman]">
	        <li>Green</li>
	        <li>Black</li>
	        <li>Fruit</li>
	    </ol>
    </li>
    <li>Milk</li>
</ol>