Typography and Colors

The typography on NREL.gov allows for clear and consistent headings and highly legible body paragraphs across multiple devices. The colors are based on the official NREL corporate color palette.

NREL.gov uses the Roboto typeface. It increases scannability and is lightweight for minimal page load impact. Font sizes are large enough for readability on all screen sizes, and line heights are kept open and inviting so that even dense information is not intimidating.

Roboto is a clean, open font whose geometric letterforms combined with smooth, natural curves makes it perfect for representing a scientific, professional organization that is committed to advancing clean energy.

Headers

Headers on NREL.gov are part of the style sheet.

H1. Roboto Light 300. 32px. (2em) #222.

H2. Roboto Light 300. 28px. (1.75em) #E07700.

H3. Roboto Regular 400. 24px. (1.5em) #222.

H4. Roboto Regular 400. 22px. (1.375em) #222.

H5. Roboto Regular 400. 20px. (1.25em) #222.
H6. Roboto Regular 500. 18px (1.125em). #222.

Linked Header Example—#0071b8

Linked headers have a Font Awesome right chevron at the end [ ]. The icon is added automatically with NREL's most recent style sheet.

  • Unicode: f054
  • HTML: <i class="fas fa-chevron-right"></i>

Utility Icons 

Font Awesome is an icon font that is used primarily for utility icons on NREL.gov. For decorative icons, read the icons section. Glyphicons, which are packaged with Bootstrap, can also be used where needed.

Links

The link color for NREL.gov is #0071b8. Active and hover states are the same color and underlined, while visited links are #9650b9. These colors comply with Section 508 color contrast specifications.

Bulleted lists of links should be avoided to ensure the best screen touchability, and unordered lists of links are preferable.

Colors

The colors used on NREL.gov are based on the official NREL corporate color palette. One of the design characteristics of NREL.gov is the use of high-contrast, bright colors paired with dark colors. The text showing each color's hex number is in the color (black or white) that passes the WebAIM 508 color contrast checker (WCAG AA level).

In the lineup of colors below, the top tier is a darkened version of the NREL color palette, the second tier is the official NREL color palette from the style guide (with the exception of #212121), and the lower two tiers are lighter versions.

#0B5E90

#A16911

#3D6321

#6F2D01

#4B545A

#000000

#0079C2

#F7A11A

#5D9732

#933C06

#5E6A71

#212121

#00A4E4

#FFC423

#8CC63F

#D9531E

#D1D5D8

#282D30

#5DD2FF

#FFD200

#C1EE86

#FE6523

#DEE2E5

#3A4246

Share