Skip to main content Skip to secondary navigation

Typography Styles

Text Area Styles

Intro Text looks like this. The Intro Text style is found under the "Styles" menu in the editing tool. We recommend you use the Intro Text style to begin the text content on any page that begins with a Text Area Paragraph, like Example Page 2. This increases the ease of scanning content for your users.

Heading Styles

Headings are important as visual indicators for your sighted users to scan content, but they are also important to the structure, SEO, and accessibility of your site. 

Learn more about how to create and use headings 

This is your heading 2 style

This is your heading 3

This is your heading 4

This is your heading 5

 

Normal Text style

The Normal Text style looks like this. This is the default text style in the Text Area Paragraph, your standard paragraph text style for the body of text throughout long lengths of text content. We designed this paragraph text style to be easy to read from a comfortable distance between your eyes to your screen—the font size is bigger than in the past, and the line spacing is wider, to make it easy for your eyes to track from the end of one line to the beginning of the next line.

Link styles

In order to create a link, first, select the text you wish to link inside the editing tool. Then click the link button:

sample_link

Heading Link style

This is the Heading Link style that will automatically appear after you have selected the header text and turned it into a link. Use the Heading Link style inside bodies of text or as a link by itself. The Heading Link style appears as an Action link.

This is your linked heading 2 style

This is your linked heading 3

This is your linked heading 4

This is your linked heading 5

Normal Text Link style

This is the Normal Text Link style that will automatically appear after you have selected text and turned it into a link. Use the Normal Text Link style inside bodies of text, or as a link by itself.

Action Link style

After — and only after you have created a text link, you can also apply the Action Link style for additional visual indication of a link, that is not inside a body of the text:

Action Link style with carrot

The Action Link style is meant to increase the visual indication of a link to a user, and is meant to be used on a line by itself, like the above, or as a list of links, like this: 

 

 

Button link

The Button link style can be applied to any link you have already created and can be found in the "Styles" dropdown in the editing tool. Use the Button link style to call out a link prominently on the screen. 

Button Link style 

 

Big Button link

The Big Button link style can be applied to any link you have already created and can be found in the "Styles" dropdown in the editing tool. Use the Big Button link style to call out a link even more prominently on the screen. We recommend reserving the use of this button to links that require significant visual contrast. Maybe one or two instances on your site could solicit the need for this button style:

Big button Link style

 

Secondary Button link

The Secondary Button link style can be applied to any link you have already created and can be found in the "Styles" dropdown in the editing tool. Use the Secondary Button style for any link that requires prominence, but not as much as a solid-color button. A Secondary Button could be one that provides a second option to users that may not be the primary user task. An example of this could be listing an "Apply" button using the default Button link style, followed by a "Learn more about admissions" button using the Secondary Button link style.

Secondary button link style

Horizontal dividing border


A horizontal dividing border displayed above can be used to separate the content of any kind. A horizontal dividing border can be created using the horizontal border icon in the editing tool:

 

An unordered list

Can be applied with the unordered list icon in the editing tool:

  • list item

  • list item

  • list item


An ordered list

Apply an ordered list with the ordered list icon in the editing tool:

  1. ordered list item

  2. ordered list item

  3. ordered list item


Table

 

Column Header

Column Header

Column Header

Row Header

Item 1

Item 2

Item 3

Row Header

Item 4

Item 5

Item 6

Quote style

"The Quote style can be found in the "Normal" menu in the editing tool. Use the quote style... for quotes!"

Splash style

This is a style you can use for the text that you want to over-emphasize. We recommend using this style for short lengths of copy, like big numbers (seen below) or big words in strings of 2-3. Overuse of this style can make your page difficult to read and parse visually. 

1026

Drop Cap First Letter style

This is a style that can be used to grab readers attention. We recommend using this style at the beginning of a page to add personality to the text.

Sed libero. Vivamus consectetuer hendrerit lacus. Phasellus magna. Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo. Fusce a quam.