skip to content

Typography

Font

Use Harding for headings and the main body text.

Use Graphik for services that sit under the Nature Portfolio such as Nano.

Use system fonts or “native typography” for:

  • elements that are interactive, such as buttons, forms and navigation links
  • secondary information such as metadata, author names, publication dates and article summaries

Headings

Write headings in sentence case

For example, “Latest reviews and analysis” not “Latest Reviews and Analysis”.

Sentence case is easier for people to read.

Headings should follow our content guidelines.

Make headings meaningful

Use descriptive headings that convey the meaning of the section they refer to. This helps users scan and find the information they need, without having to read all of the content from top to bottom.
For example, “Publish with us” is clearer than “Information on submission”.

Use heading levels to communicate page structure

Use semantic heading levels <h1> to <h6> to show the relationship of sections to subsections in the page structure.
Only include one <h1> per page, for the main heading.

Don’t skip heading levels. For example, don’t follow an <h2> with an <h4>. Doing this can be confusing, particularly for some assistive technology users.

Learn more about how to use heading levels in the W3 guide to headings.

Heading sizes

Here are the heading sizes we use for Nature Journals.

Heading style Properties Max Min
heading 1 font-size:
font-weight:
font-family:
letter-spacing:
line-height:
32px
bold
harding
-0.0625rem
36px
24px
bold
harding
-0.01875rem
26px
heading 2 font-size:
font-weight:
font-family:
letter-spacing:
line-height:
24px
bold
harding
-0.01875rem
26px
20px
bold
harding
-0.01875
22px
heading 3 font-size:
font-weight:
font-family:
letter-spacing:
line-height:
20px
bold
harding
-0.01875
22px
20px
bold
harding
-0.01875
22px

Changing default heading sizes

Our typography styles determine the size of headings based on the heading level you apply. For example, an <h1> is the largest at 30px, followed by <h2> at 24px, and so on.

If you need to use a different font size for a heading, you can use a utility class to override the default sizing. For example:

<h2 class="u-h3">Smaller h2 rendering</h2>

Do not change the semantic heading level purely to make the heading visually larger or smaller.