left col

Larger Text Size

Bigger and bolder ususally gets attention quickly, so we've made it easier to highlight specific text using various styles. Remember that headings are bigger by default but they have a very specific purpose which is not just to have bigger text.

right col

left col

Editing Styles Drop-down

The examples below are all used within the standard editing toolbar. They will be applied to the paragraph, link, and heading elements that you are working with. Adding larger text may disruput some layouts so use these sparingly.

Headings are not just bigger, bolder text

Before just looking at making it bigger we want to STRESS that heading elements help users, especially screen readers, quickly move around the page. If you start putting headings in the wrong place it can be confusing and could become an accessiblity issue. Learn more about headings in the best practices information.

right col

left col

Basic Options

The four styles that will help control text size and/or make it stand out from regular content is found in Stand Out Text, Stand Out Block, Large, and Larger Text. They are all found under the Styles drop-down menu inside the editing toolbar.

Stand Out Text / Stand out Block styles were designed to do just what their names imply, help content stand out from the regular content. The block will also place a different color background around the text to help is further separate it from surrounding content.

Stand Out Text is larger by default

Use the stand out text style and it will automatically make a larger font size. This will also make a thiner font weight, we want this to stand out but not dominate the content.

Stand Out Block is not as big, but has other features that make it shine

Stand out block style is going to make the text a little bigger, but also adds padding and background color to separate it from surrounding text.

Large text is bigger than regular text and can stand out without overtaking the page.

Larger Text is really just making the same content even bigger, this can dominate the surrounding text.

The Styles drop-down

toolbar editing showing styles drop-down

Styles which control text size

toolbar styles for larger text

right col

left col

Larger Headings

Yes you can also use larger styles with headings. We do not recommend using Stand Out Text or Stand Out Block as they could change the regular appearance of the heading and confuse users.

right col

left col

Heading 1 with stand out text

Heading 1 with stand out block

Heading 1 with large text

Heading 1 with larger text

Heading 2 with stand out text

Heading 2 with stand out block

Heading 2 with large text

Heading 2 with larger text

right col

left col

Heading 3 with stand out text

Heading 3 with stand out block

Heading 3 with large text

Heading 3 with larger text

Heading 4 with stand out text

Heading 4 with stand out block

Heading 4 with large text

Heading 4 with larger text

Heading 5 with stand out text

Heading 5 with stand out block

Heading 5 with large text

Heading 5 with larger text

right col

left col

Larger Notices

right col

left col

Notice 1 with Larger Text

Notice 2 with Larger Text

Default Notice with Larger Text

Information Notice with Larger text

Notice Alert with Larger Text

Notice Warning with Larger Text

Notice Success with Larger Text

Notice Date with Larger Text

Notice Time with Larger Text

Notice Event with Larger Text

Notice Date and Notice Time with Larger Text

right col

left col

Larger List Items

right col

left col

List item regular
list item stand out text
list item stand out block
list item larger text
list item regular again

order list item regular
order list item stand out text
order list item stand out block
order list item larger text
order list item regular again

right col

left col

Larger Blockquotes and Links

right col

left col

Blockquote with larger text applied

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

We have another paragraph using a link with larger text. Remember that when you use a style it will impact all items within that element.

In the above example we used the larger text style from within the link editor styles and not the toolbar styles.

When you put larger on the paragraph that includes the link, you see that a link with larger text will also get the larger text format.

right col