Web Guidelines

Guidelines
Elements
HTML/CSS

Typography

Documentation and examples for global typefaces and typography styles.

Arial

Arial is the primary typeface that is used for typography such as headings, paragraphs, and other body content.

This is the primary typeface, Arial. Arial is used for paragraphs, lists, headings, body text, and more.

Copy

<p>This is the primary typeface, Arial. Arial is used for paragraphs, lists, headings, body text, and more</p>

CSS

Copy

font-family: Arial, Helvetica, sans-serif;
font-weight: 400;

Montserrat

Montserrat is the complimentary typeface that can be used for elements such as headings and pull quotes.

This is Montserrat, our secondary typeface.

Copy

<p class=”montserrat-font”>This is Montserrat, our secondary typeface.</p>

HTML Import

Copy

<link rel=”preconnect” href=”https://fonts.gstatic.com”>
<link href=”https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,800;1,900&display=swap” rel=”stylesheet”>

CSS

Copy

.montserrat-font {
font-family: ‘Montserrat’, sans-serif;
}

Headings

All HTML headings, <h1> through <h6> are available and have pre-defined, responsive font sizes.

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading
h6. Heading
Copy

<h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>

CSS classes .h1 through .h6 are also available to apply heading font styles when not using the associated HTML elements.

h1. Styled Heading

h2. Styled Heading

h3. Styled Heading

h4. Styled Heading

h5. Styled Heading
h6. Styled Heading
Copy

<p class=”h1″>h1. Styled Heading</p>
<p class=”h2″>h2. Styled Heading</p>
<p class=”h3″>h3. Styled Heading</p>
<p class=”h4″>h4. Styled Heading</p>
<p class=”h5″>h5. Styled Heading</p>
<p class=”h6″>h6. Styled Heading</p>

Details

  • Font family: ‘Arial’
  • Color: Ōnin Black – #101820. See Colors for more choices.

<h1> through <h6> CSS

Copy

h1,h2,h3,h4,h5,h6 {
line-height: 1.25em;
color: #101820;
font-family: Arial, Helvetica, sans-serif;
}

/* Mobile headings */

h1 {
font-size: 34px;
}

h2 {
font-size: 26px;
}

h3 {
font-size: 22px;
}

h4 {
font-size: 20px;
}

h5 {
font-size: 18px;
}

h6 {
font-size: 16px;
}

/* Phablet headings */

@media (min-width: 400px) {
h1 {
font-size: 38px;
}

h2 {
font-size: 30px;
}

h3 {
font-size: 26px;
}

h4 {
font-size: 22px;
}

h5 {
font-size: 18px;
}

h6 {
font-size: 16px;
}
}

/* Tablet headings */

@media (min-width: 750px) {
h1 {
font-size: 44px;
}

h2 {
font-size: 34px;
}

h3 {
font-size: 28px;
}

h4 {
font-size: 24px;
}

h5 {
font-size: 20px;
}

h6 {
font-size: 18px;
}
}

/* Tablet or small desktop headings */

@media (min-width: 1000px) {
h1 {
font-size: 50px;
}

h2 {
font-size: 38px;
}

h3 {
font-size: 32px;
}

h4 {
font-size: 28px;
}

h5 {
font-size: 22px;
}

h6 {
font-size: 18px;
}
}

/* Desktop headings */

@media (min-width: 1200px) {
h1 {
font-size: 48px;
}

h2 {
font-size: 36px;
}

h3 {
font-size: 34px;
}

h4 {
font-size: 28px;
}

h5 {
font-size: 22px;
}

h6 {
font-size: 18px;
}
}

/* Large Desktop headings */

@media (min-width: 1400px) {
h1 {
font-size: 54px;
}

h2 {
font-size: 42px;
}

h3 {
font-size: 36px;
}

h4 {
font-size: 30px;
}

h5 {
font-size: 24px;
}

h6 {
font-size: 20px;
}
}

.h1 through .h6 CSS classes

Copy

.h1, .h2, .h3, .h4, .h5, .h6 {
line-height: 1.25em;
color: #101820;
font-family: Arial, Helvetica, sans-serif;
}

/* Mobile headings */

.h1 {
font-size: 34px;
}

.h2 {
font-size: 26px;
}

.h3 {
font-size: 22px;
}

.h4 {
font-size: 20px;
}

.h5 {
font-size: 18px;
}

.h6 {
font-size: 16px;
}

/* Phablet headings */

@media (min-width: 400px) {
.h1 {
font-size: 38px;
}

.h2 {
font-size: 30px;
}

.h3 {
font-size: 26px;
}

.h4 {
font-size: 22px;
}

.h5 {
font-size: 18px;
}

.h6 {
font-size: 16px;
}
}

/* Tablet headings */

@media (min-width: 750px) {
.h1 {
font-size: 44px;
}

.h2 {
font-size: 34px;
}

.h3 {
font-size: 28px;
}

.h4 {
font-size: 24px;
}

.h5 {
font-size: 20px;
}

.h6 {
font-size: 18px;
}
}

/* Tablet or small desktop headings */

@media (min-width: 1000px) {
.h1 {
font-size: 50px;
}

.h2 {
font-size: 38px;
}

.h3 {
font-size: 32px;
}

.h4 {
font-size: 28px;
}

.h5 {
font-size: 22px;
}

.h6 {
font-size: 18px;
}
}

/* Desktop headings */

@media (min-width: 1200px) {
.h1 {
font-size: 48px;
}

.h2 {
font-size: 36px;
}

.h3 {
font-size: 34px;
}

.h4 {
font-size: 28px;
}

.h5 {
font-size: 22px;
}

.h6 {
font-size: 18px;
}
}

/* Large Desktop headings */

@media (min-width: 1400px) {
.h1 {
font-size: 54px;
}

.h2 {
font-size: 42px;
}

.h3 {
font-size: 36px;
}

.h4 {
font-size: 30px;
}

.h5 {
font-size: 24px;
}

.h6 {
font-size: 20px;
}
}

Hero Headings

Hero headings are for use when larger font size is required than <h1> provides. The .hero-heading class can be applied to <h1> through <h6> or the <p> tag. Hero headings can be either Arial or Montserrat.

Arial Hero Headings

Details

  • Font family: ‘Arial’
  • Line height: 1.25em
  • Color: #101820. See Colors for more options.

This is a Hero Heading

Copy

<h1 class=”hero-heading”>This is a Hero Heading</h1>

Copy

<p class=”hero-heading”>This is a Hero Heading</p>

Montserrat Hero Headings

Details

  • Font family: ‘Montserrat’
  • Line height: 1.25em
  • Color: #101820. See Colors for more options.

This is a Hero Heading

Copy

<h1 class=”hero-heading montserrat-font”>This is a Hero Heading</h1>

Copy

<p class=”hero-heading montserrat-font”>This is a Hero Heading</p>

CSS

Copy

/* Mobile hero heading */

.hero-heading {
font-size: 40px;
}

/* Phablet headings */

@media (min-width: 400px) {

.hero-heading {
font-size: 46px;
}
}

/* Tablet headings */

@media (min-width: 750px) {
.hero-heading {
font-size: 50px;
}
}

/* Tablet or small desktop headings */

@media (min-width: 1000px) {
.hero-heading {
font-size: 56px;
}
}

/* Desktop headings */

@media (min-width: 1200px) {
.hero-heading {
font-size: 60px;
}
}

/* Large Desktop headings */

@media (min-width: 1400px) {
.hero-heading {
font-size: 64px;
}
}

Paragraphs

Default styling for paragraphs or other large sections of body copy.

Details

  • Font family: ‘Arial’
  • Font weight: ‘Regular’
  • Line height: 1.5em
  • Color: #101820. See Colors for more options.

This is a paragraph. Paragraphs and other main body copy will be Arial “Regular” with a font size of 16px (1.6rem).

Copy

<p>This is an example of body copy. Default body copy will be Arial “Regular” with a font size of 16px (1.6rem). For maximum readability, paragraphs widths are 600px wide.</p>

CSS

Copy

p {
font-size: 1.6rem;
font-weight: regular;
line-height: 1.5em;
font-family: Arial, Helvetica, sans-serif;
}

Font Sizes

Pre-defined font sizes that are available for use in various HTML elements and areas of body copy. Extra-small and small text is appropriate for element descriptions, image captions, and other related uses. “Normal” text is the default for body copy. “Large” text is best used for acting as a heading (non-semantic) or for text within an element that benefits from a large, more noticeable font.

Details

  • Extra-small: 12px (1.2rem)
  • Small: 14px (1.4rem)
  • Normal: 16px (1.6rem)
  • Large: 20px (2rem)

Font sizes in rem that are displayer here are based on a brower reset included as part of our Divi Child theme.

This is extra-small text. This is extra-small bold text.

This is small text. This is small bold text.

This is normal text. This is normal bold text.

This is large text. This is large bold text.

Copy

<p class=”xs-text”>This is extra-small text. <span class=”fw-700″>This is extra-small bold text.</span></p>

 

<p class=”small-text”>This is small text. <span class=”fw-700″>This is small bold text.</p>

<p class=”normal-text”>This is normal text. <span class=”fw-700″>This is normal bold text.</span></p>

<p class=”large-text”>This is large text. <span class=”fw-700″>This is large bold text.</span></p>

CSS

Copy

.xs-text {
font-size: 12px;
}

.small-text {
font-size: 14px;
}

.normal-text {
font-size: 16px;
}

.large-text {
font-size: 20px;
}

Font Weights

Font weights that can be applied via CSS classes. For Arial, since it is our default web font, the CSS class names aren’t font-specific. For Montserrat, use the appropriate CSS class to call the required font and font weight. These are compatible between Arial and Montserrat, depending on the typeface’s available font weights.

Arial Font Weights

This is Arial Regular.

This is Arial Bold.

This is Arial Black.

Copy

<p>This is Arial Regular.</p>
<p class=”text-bold”>This is Arial Bold.</p>
<p class=”font-arial-black”>This is Arial Black.</p>

CSS

Copy

.text-bold {
font-weight: bold;
}

.font-arial-black {
font-family: Arial Black, Arial Bold, sans-serif;
}

Montserrat Font Weights

This is Montserrat Thin 100

This is Extra-light 200

This is Montserrat Light 300

This is Montserrat Regular 400

This is Montserrat Medium 500

This is Montserrat Semi-bold 600

This is Montserrat Bold 700

This is Montserrat Extra-bold 800

This is Montserrat Black 900

Copy

<p class=”font-montserrat-thin”>This is Montserrat Thin 100</p>
<p class=”font-montserrat-extra-light”>This is Montserrat Extra-light 200</p>
<p class=”font-montserrat-light”>This is Montserrat Light 300</p>
<p class=”font-montserrat-regular”>This is Montserrat Regular 400</p>
<p class=”font-montserrat-medium”>This is Montserrat Medium 500</p>
<p class=”font-montserrat-semi-bold”>This is Montserrat Semi-bold 600</p>
<p class=”font-montserrat-bold”>This is Montserrat Bold 700</p>
<p class=”font-montserrat-extra-bold”>This is Montserrat Extra-bold 800</p>
<p class=”font-montserrat-black”>This is Montserrat Black 900</p>

CSS

Copy

.font-montserrat-thin {
font-family: montserrat,sans-serif;
font-weight: 100;
font-style: normal;
}

.font-montserrat-thin-italic {
font-family: montserrat,sans-serif;
font-weight: 100;
font-style: italic;
}

.font-montserrat-extra-light {
font-family: montserrat,sans-serif;
font-weight: 200;
font-style: normal;
}

.font-montserrat-extra-light-italic {
font-family: montserrat,sans-serif;
font-weight: 200;
font-style: italic;
}

.font-montserrat-light {
font-family: montserrat,sans-serif;
font-weight: 300;
font-style: normal;
}

.font-montserrat-light-italic {
font-family: montserrat,sans-serif;
font-weight: 300;
font-style: italic;
}

.font-montserrat-regular {
font-family: montserrat,sans-serif;
font-weight: 400;
font-style: normal;
}

.font-montserrat-regular-italic {
font-family: montserrat,sans-serif;
font-weight: 400;
font-style: italic;
}
.font-montserrat-medium {
font-family: montserrat,sans-serif;
font-weight: 500;
font-style: normal;
}

.font-montserrat-medium-italic {
font-family: montserrat,sans-serif;
font-weight: 500;
font-style: italic;
}

.font-montserrat-semi-bold {
font-family: montserrat,sans-serif;
font-weight: 600;
font-style: normal;
}

.font-montserrat-semi-bold-italic {
font-family: montserrat,sans-serif;
font-weight: 600;
font-style: italic;
}

.font-montserrat-bold {
font-family: montserrat,sans-serif;
font-weight: 700;
font-style: normal;
}

.font-montserrat-bold-italic {
font-family: montserrat,sans-serif;
font-weight: 700;
font-style: italic;
}

.font-montserrat-extra-bold {
font-family: montserrat,sans-serif;
font-weight: 800;
font-style: normal;
}

.font-montserrat-extra-bold-italic {
font-family: montserrat,sans-serif;
font-weight: 800;
font-style: italic;
}

.font-montserrat-black {
font-family: montserrat,sans-serif;
font-weight: 900;
font-style: normal;
}
.font-montserrat-black-italic {
font-family: montserrat,sans-serif;
font-weight: 900;
font-style: italic;
}