Typography

This page presents most of typographical aspects of The News II template. Make your readers happy with great Typography and User Experience!

This is a sample info message. Use <p class=»info»>Your info message goes here!</p>.

This is a sample tips message. Use <p class=»tips»>Your tips goes here!</p>.

This is a sample error message. Use <p class=»warning»>Your error message goes here!</p>.

This is a sample audio message. Use <p class=»audio»>Your audio message goes here!</p>.

This is a sample webcam message. Use <p class=»webcam»>Your webcam goes here!</p>.

This is a sample email message. Use <p class=»email»>Your email message goes here!</p>.

This is a sample creditcart message. Use <p class=»creditcart «>Your creditcart message goes here!</p>.

This is a sample feed message. Use <p class=»feed»>Your feed goes here!</p>.

This is a sample email message. Use <p class=»help»>Your help message goes here!</p>.

This is a highlight phrase. Use <span class=»highlight-1″>Your highlight phrase goes here!</span>.

This is a highlight phrase. Use <span class=»highlight-2″>Your highlight phrase goes here!</span>.

This is a highlight phrase. Use <span class=»highlight-3″>Your highlight phrase goes here!</span>.

This is a highlight phrase. Use <span class=»highlight-4″>Your highlight phrase goes here!</span>.

Below is a sample of <pre> or <div class=»code»>

#wrapper {
	position: relative;
	float: left;
	display: block;
}

This is a sample pin note. Use <span class=»clear»>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer urna. Aenean tristique. Fusce a neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </span> This is a sample pin note. Use <span class=»clear-1″>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer urna. Aenean tristique. Fusce a neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </span> This is a sample pin note. Use <span class=»clear-2″>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer urna. Aenean tristique. Fusce a neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </span>This is a sample pin note. Use <span class=»color»>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer urna. Aenean tristique. Fusce a neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </span> This is a sample pin note. Use <span class=»color-1″>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer urna. Aenean tristique. Fusce a neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </span> This is a sample pin note. Use <span class=»color-2″>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer urna. Aenean tristique. Fusce a neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </span> This is a sample pin note. Use <span class=»color-3″>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer urna. Aenean tristique. Fusce a neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </span> This is a sample pin note. Use <span class=»color-4″>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer urna. Aenean tristique. Fusce a neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </span> This is a sample pin note. Use <span class=»color-5″>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer urna. Aenean tristique. Fusce a neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </span>This is a sample pin note. Use <span class=»color-6″>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer urna. Aenean tristique. Fusce a neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </span>This is a sample pin note. Use <span class=»color-7″>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer urna. Aenean tristique. Fusce a neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </span>