Fonts
MontserratExternal link in Bold for headings.
Open Sans font in Regular for body text.
Back to styles
Typography
Typography is used to create clear hierarchy throughout the layout.
Headings
Use sentence case for headings
Accessibility for headings
Use semantic headings and structure. Find out more about heading structureExternal link.
Example
A xlarge heading
A large heading
A medium heading
A small heading
HTML Snippet for headings
<h1 class="heading-xlarge">A xlarge heading</h1>
<h2 class="heading-large">A large heading</h2>
<h3 class="heading-medium">A medium heading</h3>
<h4 class="heading-small">A small heading</h4>Text wrapper
Use this to make sure lines of text don't exceed 75 characters, as they become harder to read beyond that point.
You can apply it to a block of content or a single element.
Example
This is body copy paragraph within the text wrapper. Pretium molestie ligula in, volutpat mattis libero.
Felis at varius tincidunt, turpis dui finibus risus, ac varius libero eros ac dolor.
This is body copy paragraph with a class of text applied to it. Pretium molestie ligula in, volutpat mattis libero.
HTML Snippet for text wrapper
<div class="text">
<p>This is body copy within the text wrapper. Pretium molestie ligula in, volutpat mattis libero.</p>
</div>
<p class="text">This is body copy paragraph with a class of text applied to it. Pretium molestie ligula in, volutpat mattis libero.</p>Lead paragraph
There should only be one lead paragraph per page.
Example
This is a lead paragraph. Pretium molestie ligula in, volutpat mattis libero. Aenean dapibus augue id dolor egestas, in tincidunt dolor volutpat.
This is a body copy paragraph. Felis at varius tincidunt, turpis dui finibus risus, ac varius libero eros ac dolor.
HTML Snippet for a lead paragraph
<div class="text">
<p class="lead">This is a lead paragraph. Pretium molestie ligula in, volutpat mattis libero. Aenean dapibus augue id dolor egestas, in tincidunt dolor volutpat.</p>
<p>This is a body copy paragraph. Felis at varius tincidunt, turpis dui finibus risus, ac varius libero eros ac dolor.</p>
</div>Body copy
Avoid using bold and italics.
Example
This is a body copy paragraph. Pretium molestie ligula in, volutpat mattis libero. Aenean dapibus augue id dolor egestas, in tincidunt dolor volutpat.
Pretium molestie ligula in, volutpat mattis libero. Aenean dapibus augue id dolor egestas, in tincidunt dolor volutpat.
HTML Snippet for body copy
<div class="text">
<p>This is a body copy paragraph. Pretium molestie ligula in, volutpat mattis libero. Aenean dapibus augue id dolor egestas, in tincidunt dolor volutpat.</p>
<p>Pretium molestie ligula in, volutpat mattis libero. Aenean dapibus augue id dolor egestas, in tincidunt dolor volutpat.</p>
<div>Links
Links without surrounding text should not have a full stop at the end.
Example
Link with surround text
HTML Snippet for links with surrounding text
<div class="text">
<p><a href="#">See all events</a></p>
<div>Body copy link
This is what a body copy link looks like.
HTML Snippet for body copy links
<div class="text">
<p>This is what a <a href="#">body copy link</a> looks like.</p>
<div>External link
A body copy external link External link. Fusce dapibus, tellus ac cursus commodo.
HTML Snippet for external links
<div class="text">
<p>A body copy <a href="#" rel="external">external link <span class="sr-only">External link</span></a>. Fusce dapibus, tellus ac cursus commodo.</p>
<div>Document list styling
Example
Link to document within body content
Lorem ipsum dolor sit amet, PDF document (PDF, 1MB) External link. Morbi lobortis lorem quis tellus euismod, non vulputate mi elementum.
Curabitur aliquet velit metus, Word document (Word, 1.5MB) External link. Proin pellentesque ornare magna a facilisis. In hac habitasse platea dictumst. Fusce at bibendum nulla.
Excel document (Excel, 0.5MB) External link, euismod et venenatis sed, faucibus id quam. Vivamus commodo ac mi sit amet blandit. Duis aliquam ut justo vel vehicula.
Integer a sapien ultricies, PowerPoint document (PowerPoint, 2MB) External link, malesuada turpis.
HTML Snippet for document links
<div class="text">
<p>Lorem ipsum dolor sit amet, <a href="#" rel="pdf">PDF document (PDF, 1MB)<span class="sr-only"> External link</span></a>. Morbi lobortis lorem quis tellus euismod, non vulputate mi elementum.</p>
<p>Curabitur aliquet velit metus, <a href="#" rel="doc">Word document (Word, 1.5MB)<span class="sr-only"> External link</span></a>. Proin pellentesque ornare magna a facilisis. In hac habitasse platea dictumst. Fusce at bibendum nulla.</p>
<p><a href="#" rel="xl">Excel document (Excel, 0.5MB)<span class="sr-only"> External link</span></a> , euismod et venenatis sed, faucibus id quam. Vivamus commodo ac mi sit amet blandit. Duis aliquam ut justo vel vehicula.</p>
<p>Integer a sapien ultricies, <a href="#" rel="pp">PowerPoint document (PowerPoint, 2MB)<span class="sr-only"> External link</span></a> malesuada turpis.</p>
<div>Document list
<div class="docList one">
<div class="listWebpart">
<ul>
<li class="word">
<a href="#">
<span class="info"> Change of name</span>
<span class="thirdInfo"> (Word, 119KB)</span>
</a>
</li>
<li class="pdf">
<a href="#">
<span class="info"> Change of name</span>
<span class="thirdInfo"> (PDF, 119KB)</span>
</a>
</li>
<li class="xl">
<a href="#">
<span class="info"> Change of name</span>
<span class="thirdInfo"> (Excel, 119KB)</span>
</a>
</li>
<li class="pp">
<a href="#">
<span class="info"> Change of name</span>
<span class="thirdInfo"> (PowerPoint, 185KB)</span>
</a>
</li>
</ul>
</div>
</div>Lists
List items start with a lowercase letter and have no full stop at the end.
Example
Bullet list
- here is a bulleted list
- in tincidunt dolor volutpat
- est non tempus malesuada
- imperdiet lorem consequat sit amet
HTML Snippet for list bullet
<ul class="list list-bullet">
<li>here is a bulleted list</li>
<li>in tincidunt dolor volutpat</li>
<li>est non tempus malesuada</li>
<li>imperdiet lorem consequat sit amet</li>
</ul>Numbered list
- here is a numbered list
- in tincidunt dolor volutpat
- est non tempus malesuada
- imperdiet lorem consequat sit amet
HTML Snippet for list numbers
<ol class="list list-number">
<li>here is a numbered list</li>
<li>in tincidunt dolor volutpat</li>
<li>est non tempus malesuada</li>
<li>imperdiet lorem consequat sit amet</li>
</ol>Navigation list
HTML Snippet for list nav
<ul class="list list-nav">
<li><a href="#">Related link</a></li>
<li><a href="#">Related link</a></li>
<li><a href="#">Related link</a></li>
<li><a href="#" rel="external">External link <span class="sr-only">External link</span></a></li>
<li><a href="#" class="more">More</a></li>
</ul>Stepped list
- A home visit
- Completion of an application form
- Attending a three day training course
- General medical and criminal records check (known as a Disclosure and Barring Service – DBS check)
- Working with a social worker on your assessment and portfolio
- Attending a fostering panel
- Registration as a foster carer
HTML Snippet for stepped list
<ol class="list list-step">
<li>A home visit</li>
<li>Completion of an application form</li>
<li>Attending a three day training course</li>
<li>General medical and criminal records check (known as a Disclosure and Barring Service – DBS check)</li>
<li>Working with a social worker on your assessment and portfolio</li>
<li>Attending a fostering panel</li>
<li>Registration as a foster carer</li>
</ol>Blockquote
Example
I had the opportunity to work with a number of partners on this project and engaged with a number of senior managers across the authority.
HTML Snippet for blockquote
<blockquote>
<span class="open-quote"></span>
<p>I had the opportunity to work with a number of partners on this project and engaged with a number of senior managers across the authority.</p>
<footer class="blockquote-footer">
<cite title="Source Title">Headteacher - Calverley Church of England Primary School</cite>
</footer>
</blockquote>