turretcss

Typography


A guide to the use of turretcss style definitions with typographic HTML elements including headings, paragraphs, blockquotes, etc.

Example

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

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 super text along with sub text or using text styles to highlight content using strong (or bold) text or emphasis (or italic) text, or maybe underline text, as well as strikethrough text for redacted content.

You can even include a quote which will break up content that surrounds it.

A level 3 heading

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.

Sometimes content will need to be formatted in other ways including:

  • Unordered lists
  • with mutiple
  • list items.

As well as:

  1. Ordered lists
  2. with mutiple
  3. list items.

Text content can also have links which should be visually identifiable from other content either through contrast (colour) or using underlines.