This is how your content text will look

This page is to highlight all of the typographic styles within the template. This template is based around Google's Roboto typeface (obviously you can change that). The main paragraphs feature generous leading, and a comfortable maximum line length, this reduces eye strain and fatigue while reading long passages. Along with that, H1 – H5 have been styled (there are also h1 – h5 classes, just in case you want to fake a heading). Bellow, is some filler text to show off all of these styles.

Maecenas nec odio et ante tincidunt tempus. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Praesent nonummy mi in odio. Sed a libero. Vivamus consectetuer hendrerit lacus. Vestibulum fringilla pede sit amet augue. Praesent egestas neque eu enim. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi.

This is a sample blockquote
These are really nice for things like testimonials or pull quotes. Blockquotes draw attention and can add impact to highlight and punctuate specific messaging. Vivamus consectetuer hendrerit lacus. Vestibulum fringilla pede sit amet augue. Praesent egestas neque eu enim.

To show how images interact with text, that was an inline 100% width image. This is the recomended way to use images in this template. That said, there is nothing stopping you from doing it however you want. Many people like to use smaller images and float them to one of the sides. This is simply our recomendation to keep the aesthetic of the template. It also gives readers a visual break that can help long passages of text feel less fatiguing.

Basic text formating

Level 1 Heading

You probably shouldn't use an H1 inside of any of the content areas for SEO reasons (you gotta think about your document outlines mang), but it is available if you really want to. Maecenas nec odio et ante tincidunt tempus. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Praesent nonummy mi in odio. Sed a libero. Vivamus consectetuer hendrerit lacus. Vestibulum fringilla pede sit amet augue. Praesent egestas neque eu enim. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi.

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading

List styles

Bulleted lists:

Bullets are great
For spelling out benefits and
Turning visitors into leads.

Bulleted lists insided bulleted lists:

Bullets are great
You can use them all over to list things that are unordered
This is what a nested bulleted list looks like.
- Pretty standard stuff
- That said, the typography is pretty nice
This is the follow up bullet
We thought of everything...*

Numbered lists insided bulleted lists:

Bullets are great
You can use them all over to list things that are unordered
This is what a nested bulleted list looks like.
1. Sometimes you do need numbers
2. Pretty standard stuff
3. That said, the typography is pretty nice
This is the follow up bullet
We thought of everything...*

Numbered lists:

Bullets are great
But sometimes numbers are better
Like when you want to list something sequencially

Numbered lists insided numbered lists:

You dawg, I heard you like lists
So we got a list inside a list
1. So you can list
2. While you list
Pretty awesome, huh?

Bulleted lists insided numbered lists:

Bullets are great
You can use them all over to list things that are unordered
This is what a nested bulleted list looks like.
- Sometimes you do need bullets in your numbers
- This is what that looks like
This is the follow up number

*We hope

Code

We chose CSS as an example, but you can also do markup (HTML) and JS

@import url(http://fonts.googleapis.com/css?family=Questrial);
@import url(http://fonts.googleapis.com/css?family=Arvo);

@font-face {
	src: url(http://lea.verou.me/logo.otf);
	font-family: 'LeaVerou';
}

/*
 Shared styles
 */
 
section h1,
#features li strong,
header h2,
footer p {
	font: 100% Rockwell, Arvo, serif;
}

/*
 Styles
 */

* {
	margin: 0;
	padding: 0;
	font-weight: normal;
}

body {
	font: 100%/1.5 Questrial, sans-serif;
	tab-size: 4;
	hyphens: auto;
}

a {
	color: inherit;
}

section h1 {
	font-size: 250%;
}