Type

Examples

This is a heading 1

Summary: This study examined the effects of enhanced layout (headers, indentation, and figure placement) on reading performance, comprehension, and satisfaction. Participants read text passages with and without enhanced layout. Results showed that reading speed and comprehension were not affected by layout, however, participants were more satisfied with the enhanced layout and reported it to be less fatiguing to read.

This looks like a heading 2

Summary: This study examined the effects of enhanced layout (headers, indentation, and figure placement) on reading performance, comprehension, and satisfaction. Participants read text passages with and without enhanced layout. Results showed that reading speed and comprehension were not affected by layout, however, participants were more satisfied with the enhanced layout and reported it to be less fatiguing to read.


This is a level 1 heading

This is a level 2 heading

This is a level 3 heading

This is a level 4 heading

This is a level 5 heading
This is a level 6 heading

This is paragraph text

This is small paragraph text

This is a hyperlink

Apply header styles to other elements

You may want to style a level 2 heading like a level 1. You can do this by applying the following HTML classes:

  • alpha - Applies level 1 heading style
  • beta - Applies level 2 heading style
  • gamma - Applies level 3 heading style
  • delta - Applies level 4 heading style
  • epsilon - Applies level 5 heading style
  • zeta - Applies level 6 heading style

Fundamentals

Summary


Roboto is our default typeface

We use Roboto for both marketing and products

Exceptions

Segoe UI is used when Roboto is not suitable. For example ReadyRoll uses Segoe UI because it sits within a Microsoft product.

Redgate display typeface is only used for Redgate logos and some titles on marketing material.


Create clear hierarchy

UI with good typographical hierarchy

Use size, weight, and spacing to create hierarchy

Using the correct size, weight, and spacing of text will make it easier to scan and find information, saving users time, making it quicker to perform the correct action.

UI with bad typographical hierarchy

Don't hide information

Not having the correct hierarchy has the same effect as hiding information. It could even cause misunderstandings that lead to wrong actions being taken.


Aim for a line-length of 50-80 charecters

UI with ideal line-length

50-80 charecters is the magic number

Most users will feel more comfortable reading with a line-length of 50-80 charecters, especially in long bodies of text. It could reduce fatigue, and increase retention rates.

UI with long line-length

Avoid long and short line-lengths

Line-lengths over 80 and under 50 charecters can feel daunting


Use UPPERCASE sparingly

UI with ideal line-length

Using uppercase

Uppercase text should be used sparingly. Only use uppercase text when it helps to scan infornation, for example tags and labels

UI with long line-length

Never SHOUT

Uppercase text could be percieved as shouting, and Redgate never shouts. Avoid using uppercase text when there's even the slightest chance of it being pecieved as shouting.


Use enough contrast

UI with good contrast

Text contrast must meet standards

Text contrast must meet the WCAG 2.0 level AA standards. Our products and services will then be accessible to more users.

UI with bad contrast

Low-contrast text is not the answer

Not using enough contrast could make text invisible to some users. This leads to wrong actions being taken and could make usability impossible.

Code

This is a level 1 heading

This is a level 1 heading

This is a level 2 heading

This is a level 2 heading

This is a level 3 heading

This is a level 3 heading

This is a level 4 heading

This is a level 4 heading

This is a level 5 heading
This is a level 5 heading

This is paragraph text

This is paragraph text

This is small paragraph text

This is small paragraph text

This is a hyperlink
This is a hyperlink

This is a paragraph that looks like a level 3 heading

This is a paragraph that looks like a level 3 heading