Branding in SharePoint is not just about the structure, but also about the content. This is an easy template you can use to check if the content will look in accordance to your design.
HTML
This HTML is setup using all the text styles available in the ribbon. Just copy paste the HTML into the source editor of your publishing field.
<h1>
H1 Lorem ipsum dolor sit amet
</h1>
<p>
[paragraph]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae justo non quam sagittis rhoncus vitae nec tellus. Vivamus suscipit enim tellus, vel eleifend sapien tincidunt non. Morbi aliquet pretium nisl, in accumsan libero bibendum quis. Ut porta velit nec purus varius, eu faucibus arcu elementum.
</p>
<p>
<span class="ms-rteStyle-Quote">
[quote]Duis imperdiet, elit in suscipit venenatis, enim urna venenatis tortor, vitae vestibulum lacus magna eget nisi.
</span>
</p>
<p>
<span class="ms-rteStyle-IntenseQuote">
[Intense quote]
Nulla vehicula, metus id sagittis facilisis, leo purus imperdiet nulla, in vehicula enim eros sed tellus. Phasellus aliquet sodales adipiscing. Cras congue tellus a enim congue, a vehicula libero interdum.
</span>
</p>
<p>
<span class="ms-rteStyle-Emphasis">
[Emphasis]Sed vitae lacus ac nibh dictum semper sit amet ut nisi. Fusce convallis lorem sollicitudin, venenatis arcu vitae, iaculis velit.
</span>
</p>
<p>
<span class="ms-rteStyle-IntenseEmphasis">
[Intense Emphasis] Suspendisse sit amet risus turpis. Suspendisse a purus non felis tincidunt semper.
</span>
</p>
<p>
<span class="ms-rteStyle-References">
[Reference]Vivamus aliquam ante ornare felis dapibus, id porta diam pharetra. Morbi a odio laoreet, vehicula nisi et, commodo quam.
</span>
</p>
<p>
<span class="ms-rteStyle-IntenseReferences">
[Intense Reference] Integer aliquam sed nulla vitae luctus. Maecenas a purus sed lectus fermentum posuere ut id diam.
</span>
</p>
<p>
<span class="ms-rteStyle-Accent1">
[Accent 1]Integer aliquam sed nulla vitae luctus. Maecenas a purus sed lectus fermentum posuere ut id diam.
</span>
</p>
<p>
<span class="ms-rteStyle-Accent2">
[Accent 2]Integer aliquam sed nulla vitae luctus. Maecenas a purus sed lectus fermentum posuere ut id diam.
</span>
</p>
<h2>
H2 Lorem ipsum dolor
</h2>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse viverra tincidunt malesuada. In non augue in mi ornare rutrum. Quisque lobortis, risus id pulvinar placerat, ipsum libero vehicula erat, id varius massa ligula sed augue.
</p>
<h3>
H3 Lorem ipsum dolor
</h3>
<p>
Nulla pretium purus metus. Sed sed pharetra nibh, volutpat placerat nunc. Nunc accumsan sem a leo pharetra, ac pulvinar nunc venenatis. Maecenas non eros sit amet odio luctus imperdiet. Maecenas luctus neque ante, sit amet iaculis elit interdum non. Nunc turpis metus, mattis in tellus commodo, auctor porttitor quam. Duis in tincidunt justo, quis ornare velit. Aliquam euismod libero nulla, in malesuada sem sagittis nec. Quisque bibendum nibh dapibus, laoreet mauris vel, malesuada sem.
</p>
<h4>
H3 Lorem ipsum dolor
</h4>
<p>
Mauris eget nisi elementum, consectetur metus vel, ullamcorper nisi. Sed semper pellentesque diam fermentum varius.
</p>
<h1 class="ms-rteElement-H1B">
H1 Alternate
</h1>
<p>
Sed tincidunt nibh turpis, non posuere urna condimentum at. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<h2 class="ms-rteElement-H2B">
H2 Alternate
</h2>
<p>
Morbi non tristique turpis. Proin at consequat mauris, pellentesque ornare mauris. Sed enim dui, congue sit amet dolor ac, condimentum viverra neque.
</p>
<h3 class="ms-rteElement-H3B">
H3 Alternate
</h3>
<p>
Donec a fringilla nulla. Aliquam id velit in mi eleifend euismod. Nullam velit dui, malesuada eu tincidunt non, feugiat in risus.
</p>
<h4 class="ms-rteElement-H4B">
H4 Alternate
</h4>
<ul>
<li>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</li>
<li>
Aliquam tincidunt mauris eu risus.
</li>
<li>
Vestibulum auctor dapibus neque.
</li>
</ul>
<p>
Donec a fringilla nulla. Aliquam id velit in mi eleifend euismod. Nullam velit dui, malesuada eu tincidunt non, feugiat in risus.
</p>
<ol>
<li>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</li>
<li>
Aliquam tincidunt mauris eu risus.
</li>
<li>
Vestibulum auctor dapibus neque.
</li>
</ol>
CSS
To change the CSS in all the different styles available you can use the following rules. You can use them all or just the ones you need.
/* paragraph */
.ms-rtestate-field p,
p.ms-rteElement-P {
}
/* h1 */
.ms-rtestate-field h1, h1.ms-rteElement-H1 {
}
/* h2 */
.ms-rtestate-field h2, h2.ms-rteElement-H2 {
}
/* h3 */
.ms-rtestate-field h3, h3.ms-rteElement-H3 {
}
/* h4 */
.ms-rtestate-field h4, h4.ms-rteElement-H4 {
}
/* h1 alternate */
H1.ms-rteElement-H1B {
}
/* h2 alternate */
H2.ms-rteElement-H2B {
}
/* h3 alternate */
H3.ms-rteElement-H3B {
}
/* h4 alternate */
H4.ms-rteElement-H4B {
}
/* quote */
.ms-rteStyle-Quote {
}
/* intense quote */
.ms-rteStyle-IntenseQuote {
}
/* emphasis */
.ms-rteStyle-Emphasis {
}
/* intense emphasis */
.ms-rteStyle-IntenseEmphasis {
}
/* reference */
.ms-rteStyle-References {
}
/* intense reference */
.ms-rteStyle-IntenseReferences {
}
/* accent 1 */
.ms-rteStyle-Accent1 {
}
/* accent 2 */
.ms-rteStyle-Accent2 {
}