Typography

This page presents most of typographical aspects of MusicTopI 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>