iDeas Lab Style Guides
Website Style Guide
Missile Defense Project

Missile Threat

Missile Threat brings together a wide range of information and analyses relating to the proliferation of cruise and ballistic missiles around the world and the air and missile defense systems designed to defeat them. Missile Threat is a product of the Missile Defense Project at the Center for Strategic and International Studies.

Typography

Headings

Headings define the title of a section in text content, and they are usually a bit larger and/or more distinctive than surrounding text. Sizes are defined from H1 to H6.

A few rules of thumb:

  1. Make sure to use them! Using bold text instead of a heading is not enough. This negatively affects accessibility, as the underlying code does not reflect the intended hierarchy.
  2. Use headings in order of their hierarchy. Do not select heading levels based on their appearance.

Overview of pairings

Headings
{"group_title"=>"Header 1", "notes"=>"", "html"=>"

The wizard quickly jinxed the gnomes before they vaporized.

", "extra_css"=>"color: #5f7981; font-family: \"Source Sans Pro\", sans-serif !important; line-height: 44px; font-size: 28.9px; font-weight: 700; letter-spacing: 1.2px;"}{"group_title"=>"Header 2", "notes"=>"", "html"=>"

The wizard quickly jinxed the gnomes before they vaporized.

", "extra_css"=>"color: #073447; font-family: \"Source Sans Pro\", sans-serif !important; line-height: 41px; font-size: 26px; font-weight: 600;"}{"notes"=>"", "html"=>"

The wizard quickly jinxed the gnomes before they vaporized.

", "extra_css"=>"color: #5f7981; font-family: \"Source Sans Pro\", sans-serif !important; line-height: 1.5em; font-size: 22.1px; font-weight: 400;", "group_title"=>"Header 3"}{"group_title"=>"Header 4", "notes"=>"", "html"=>"

The wizard quickly jinxed the gnomes before they vaporized.

", "extra_css"=>"color: #333; font-family: \"Open Sans\", sans-serif !important; line-height: 26px; font-size: 18px; font-weight: 500;"}

Overview of pairings

Headings
{"group_title"=>"Header 1", "notes"=>"", "html"=>"

The wizard quickly jinxed the gnomes before they vaporized.

", "extra_css"=>"color: #5f7981; font-family: \"Source Sans Pro\", sans-serif !important; line-height: 44px; font-size: 28.9px; font-weight: 700; letter-spacing: 1.2px;"}{"group_title"=>"Header 2", "notes"=>"", "html"=>"

The wizard quickly jinxed the gnomes before they vaporized.

", "extra_css"=>"color: #073447; font-family: \"Source Sans Pro\", sans-serif !important; line-height: 41px; font-size: 26px; font-weight: 600;"}{"notes"=>"", "html"=>"

The wizard quickly jinxed the gnomes before they vaporized.

", "extra_css"=>"color: #5f7981; font-family: \"Source Sans Pro\", sans-serif !important; line-height: 1.5em; font-size: 22.1px; font-weight: 400;", "group_title"=>"Header 3"}{"group_title"=>"Header 4", "notes"=>"", "html"=>"

The wizard quickly jinxed the gnomes before they vaporized.

", "extra_css"=>"color: #333; font-family: \"Open Sans\", sans-serif !important; line-height: 26px; font-size: 18px; font-weight: 500;"}

Overview of pairings

Headings
{"group_title"=>"Header 1", "notes"=>"", "html"=>"

The wizard quickly jinxed the gnomes before they vaporized.

", "extra_css"=>"color: #5f7981; font-family: \"Source Sans Pro\", sans-serif !important; line-height: 44px; font-size: 28.9px; font-weight: 700; letter-spacing: 1.2px;"}{"group_title"=>"Header 2", "notes"=>"", "html"=>"

The wizard quickly jinxed the gnomes before they vaporized.

", "extra_css"=>"color: #073447; font-family: \"Source Sans Pro\", sans-serif !important; line-height: 41px; font-size: 26px; font-weight: 600;"}{"notes"=>"", "html"=>"

The wizard quickly jinxed the gnomes before they vaporized.

", "extra_css"=>"color: #5f7981; font-family: \"Source Sans Pro\", sans-serif !important; line-height: 1.5em; font-size: 22.1px; font-weight: 400;", "group_title"=>"Header 3"}{"group_title"=>"Header 4", "notes"=>"", "html"=>"

The wizard quickly jinxed the gnomes before they vaporized.

", "extra_css"=>"color: #333; font-family: \"Open Sans\", sans-serif !important; line-height: 26px; font-size: 18px; font-weight: 500;"}

Overview of pairings

Headings
{"group_title"=>"Header 1", "notes"=>"", "html"=>"

The wizard quickly jinxed the gnomes before they vaporized.

", "extra_css"=>"color: #5f7981; font-family: \"Source Sans Pro\", sans-serif !important; line-height: 44px; font-size: 28.9px; font-weight: 700; letter-spacing: 1.2px;"}{"group_title"=>"Header 2", "notes"=>"", "html"=>"

The wizard quickly jinxed the gnomes before they vaporized.

", "extra_css"=>"color: #073447; font-family: \"Source Sans Pro\", sans-serif !important; line-height: 41px; font-size: 26px; font-weight: 600;"}{"notes"=>"", "html"=>"

The wizard quickly jinxed the gnomes before they vaporized.

", "extra_css"=>"color: #5f7981; font-family: \"Source Sans Pro\", sans-serif !important; line-height: 1.5em; font-size: 22.1px; font-weight: 400;", "group_title"=>"Header 3"}{"group_title"=>"Header 4", "notes"=>"", "html"=>"

The wizard quickly jinxed the gnomes before they vaporized.

", "extra_css"=>"color: #333; font-family: \"Open Sans\", sans-serif !important; line-height: 26px; font-size: 18px; font-weight: 500;"}

Elements

The following styles represent areas of text content that are frequently used within the page or post’s main written content (not UI elements).

Overview of pairings

Headings
{"group_title"=>"Header 1", "notes"=>"", "html"=>"

The wizard quickly jinxed the gnomes before they vaporized.

", "extra_css"=>"color: #5f7981; font-family: \"Source Sans Pro\", sans-serif !important; line-height: 44px; font-size: 28.9px; font-weight: 700; letter-spacing: 1.2px;"}{"group_title"=>"Header 2", "notes"=>"", "html"=>"

The wizard quickly jinxed the gnomes before they vaporized.

", "extra_css"=>"color: #073447; font-family: \"Source Sans Pro\", sans-serif !important; line-height: 41px; font-size: 26px; font-weight: 600;"}{"notes"=>"", "html"=>"

The wizard quickly jinxed the gnomes before they vaporized.

", "extra_css"=>"color: #5f7981; font-family: \"Source Sans Pro\", sans-serif !important; line-height: 1.5em; font-size: 22.1px; font-weight: 400;", "group_title"=>"Header 3"}{"group_title"=>"Header 4", "notes"=>"", "html"=>"

The wizard quickly jinxed the gnomes before they vaporized.

", "extra_css"=>"color: #333; font-family: \"Open Sans\", sans-serif !important; line-height: 26px; font-size: 18px; font-weight: 500;"}