---
layout: docs
title: Typography
page_title: Typography - turretcss - A Responsive Front-end Framework for Accessible and Semantic Websites
description: A guide to the use of turretcss style definitions with typographic HTML elements including headings, paragraphs, blockquotes, etc.
---

## Example

<p class="lead">This is a lead paragraph with dominant styles that make it stand out from the content below, this can be used to introduce the following content and provide context for people skimming page content</p>

<p>This is a standard paragraph, it makes up the majority of page content. Paragraphs should be short in length and use a tone that makes content easily discoverable. This can be achieved with text formatting such as <sup>super text</sup> along with <sub>sub text</sub> or using text styles to highlight content using <strong>strong (or bold) text</strong> or <em>emphasis (or italic) text</em>, or maybe  <u>underline text</u>, as well as <del>strikethrough text</del> for redacted content.

<blockquote>You can even include a quote which will break up content that surrounds it.</blockquote>

<h3>A level 3 heading</h3>

<p>Using headings to breakup content is the simplist and most effective way to draw the user's attention to each context within a page. It also helps break up content visually which makes larger content easier to read.</p>

<p>Sometimes content will need to be formatted in other ways including:</p>

<ul>
  <li>Unordered lists</li>
  <li>with mutiple</li>
  <li>list items.</li>
</ul>

<p>As well as:</p>

<ol>
  <li>Ordered lists</li>
  <li>with mutiple</li>
  <li>list items.</li>
</ol>

<p>Text content can also have <a href="#">links</a> which should be visually identifiable from other content either through contrast (colour) or using underlines.</p>