Text


Adding Headers

About Headers

Think of headers as the outline of your page. They should be arranged to show the hierarchical ordering of information from the broadest and most important (Heading 2) to secondary information that supports the information in your Heading 2 (Heading 3) to the most specific information that supports the information in your Heading 3 (Heading 4).

Like an outline, you should always start with most important — Header 2 — with your Header 3 information below that and your Header 4 information below your Header 3 information. Do not skip levels — don't start with a Header 3, or go straight from a Header 2 to a Header 4. You can go from a Header 3 or a Header 4 back to a Header 2 when you switch broad topics.

As a general rule, we recommend that you do not apply bold or italics to your headers as they already have a bold style applied to them and the italics should only be used in specific use cases.

Accessibility

For screen reader users, header tags are vital in giving a sense of the main topics of the page and enabling easier navigation through your content. Think of your headers as a table of contents for your page for both screen reader software and your users. Additionally, effective header tags help with search engines — making your site more accessible to everyone.

Examples of Header Formats:

Header 2

Header 3

Header 4

Header 5
Header 6

Example of How to Use the Header Formats:

United States (Header 2)

This information is about the United States. Lorem ipsum dolor sit amet, cu solet vocent similique sea, sale iusto utroque an mel. Sed doctus iisque ceteros ei, iracundia aliquando eos id. Corpora conclusionemque at eos, usu elitr debitis in.

Oregon (Header 3)

This information is about the state of Oregon in the United States. Lorem ipsum dolor sit amet, cu solet vocent similique sea, sale iusto utroque an mel. Sed doctus iisque ceteros ei, iracundia aliquando eos id. Corpora conclusionemque at eos, usu elitr debitis in.

Eugene (Header 4)

This information is about the city of Eugene in the state of Oregon in the United States. Lorem ipsum dolor sit amet, cu solet vocent similique sea, sale iusto utroque an mel. Sed doctus iisque ceteros ei, iracundia aliquando eos id. Corpora conclusionemque at eos, usu elitr debitis in.

California (Header 3)

This information is about the state of California in the United States. Lorem ipsum dolor sit amet, cu solet vocent similique sea, sale iusto utroque an mel. Sed doctus iisque ceteros ei, iracundia aliquando eos id. Corpora conclusionemque at eos, usu elitr debitis in.

San Francisco (Header 4)

This information is about the city of San Francisco in the state of California in the United States. Lorem ipsum dolor sit amet, cu solet vocent similique sea, sale iusto utroque an mel. Sed doctus iisque ceteros ei, iracundia aliquando eos id. Corpora conclusionemque at eos, usu elitr debitis in.

Canada (Header 2)

This information is about the country of Canada. Lorem ipsum dolor sit amet, cu solet vocent similique sea, sale iusto utroque an mel. Sed doctus iisque ceteros ei, iracundia aliquando eos id. Corpora conclusionemque at eos, usu elitr debitis in.

British Columbia (Header 3)

This information is about the province of British Columbia in the country of Canada. Lorem ipsum dolor sit amet, cu solet vocent similique sea, sale iusto utroque an mel. Sed doctus iisque ceteros ei, iracundia aliquando eos id. Corpora conclusionemque at eos, usu elitr debitis in.

Vancouver (Header 4)

This information is about the city of Vancouver in the province of British Columbia in the country of Canada. Lorem ipsum dolor sit amet, cu solet vocent similique sea, sale iusto utroque an mel. Sed doctus iisque ceteros ei, iracundia aliquando eos id. Corpora conclusionemque at eos, usu elitr debitis in.

How to Add Headers

To style headers for your body copy, highlight the text you want to format and click on the button that says “Normal” on the toolbar. That will give you a drop-down menu. Scroll down and select from Heading 2 or Heading 3 or Header 4.

Be sure to use “header” tags (H2 for major headings, H3 for subheadings, H4 for sub-subheadings) to separate sections rather than just bolding the text.

Screenshot of WYSIWYG of button to add headers

Adding Text Above or Below a Grid or Other Non-Standard Item

When working around your grids or other template items you may need to add text above or below that item. As an example, when there are two grids or templates adjacent to each other and you want to add a horizontal line between them.

To add a new text paragraph above or below your grid or other template item, you will need to use the “insert paragraph” option shown here as a red line and red box with a left curved arrow:

Inserting a new paragraph between two grids

To add spacing between two grids or template items when editing your content, click near where you want to add the new paragraph space and place your mouse cursor above or below the grey box where you want the extra space added and the red line and a red box with a white arrow will appear:

Inserting a new paragraph return icon

Click on the red box with the arrow and it will add a new paragraph space where the red line is shown.


Special Characters

Special Characters Editor button, which uses an Ω symbol

You can use the Special Characters (Ω) button in the editor to add special characters (—, ©, ™, ¢, £, ≈, etc.). When you click on this button it will open a pop-up window with more than 100 different letters and characters you can insert into your content.

To insert a character, place your cursor where you want the new character, click the Special Characters button, then click on the character you want and it will be added to your content.


Typography in Cosmic

Do you want to customize the size or weight of a line of text on your website? Learn about the typography options available in our Drupal Cosmic theme:

Typography in Cosmic