iDeas Lab Style Guides
Website Style Guide
AILA (Abshire-Inamori Leadership Academy)

CSIS Journalism Bootcamp

The CSIS Journalism Bootcamp aims to provide aspiring journalists with a practical experience in Washington, D.C. centered around multimedia reporting on international affairs in a volatile media landscape.

During the week-long bootcamp, journalism and international relations students work with CSIS’s award-winning production studio, the iDeas Lab, its expert scholars, and a network of prominent practitioners to report on timely issues and acquire new skills that allow them to diversify their storytelling.

CSIS welcomes a new school to participate each quarter, and works closely with faculty advisers to ensure the program simultaneously complements their area of study.

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"=>"Heading 2", "notes"=>"Section headings", "html"=>"

When zombies arrive, quickly fax judge Pat.

", "extra_css"=>"font-size: 40px; font-family: baskerville-urw,Georgia,Times,'Times New Roman',serif; font-weight: 300;; "}{"group_title"=>"Heading 3", "notes"=>"H3 headings used in the main body text", "html"=>"

When zombies arrive, quickly fax judge Pat.

", "extra_css"=>"font-size: 26px; color: #000; font-family: baskerville-urw, Georgia,Times,'Times New Roman',serif; "}{"group_title"=>"Case Study headings", "notes"=>"Headings used in the \"aside\" component, separate from the main body text;", "html"=>"

When zombies arrive, quickly fax judge Pat.

", "extra_css"=>"font-family: canada-type-gibson, sans-serif; font-size: 24.5px; color:#000;"}

Overview of pairings

Headings
{"group_title"=>"Heading 2", "notes"=>"Section headings", "html"=>"

When zombies arrive, quickly fax judge Pat.

", "extra_css"=>"font-size: 40px; font-family: baskerville-urw,Georgia,Times,'Times New Roman',serif; font-weight: 300;; "}{"group_title"=>"Heading 3", "notes"=>"H3 headings used in the main body text", "html"=>"

When zombies arrive, quickly fax judge Pat.

", "extra_css"=>"font-size: 26px; color: #000; font-family: baskerville-urw, Georgia,Times,'Times New Roman',serif; "}{"group_title"=>"Case Study headings", "notes"=>"Headings used in the \"aside\" component, separate from the main body text;", "html"=>"

When zombies arrive, quickly fax judge Pat.

", "extra_css"=>"font-family: canada-type-gibson, sans-serif; font-size: 24.5px; color:#000;"}

Overview of pairings

Headings
{"group_title"=>"Heading 2", "notes"=>"Section headings", "html"=>"

When zombies arrive, quickly fax judge Pat.

", "extra_css"=>"font-size: 40px; font-family: baskerville-urw,Georgia,Times,'Times New Roman',serif; font-weight: 300;; "}{"group_title"=>"Heading 3", "notes"=>"H3 headings used in the main body text", "html"=>"

When zombies arrive, quickly fax judge Pat.

", "extra_css"=>"font-size: 26px; color: #000; font-family: baskerville-urw, Georgia,Times,'Times New Roman',serif; "}{"group_title"=>"Case Study headings", "notes"=>"Headings used in the \"aside\" component, separate from the main body text;", "html"=>"

When zombies arrive, quickly fax judge Pat.

", "extra_css"=>"font-family: canada-type-gibson, sans-serif; font-size: 24.5px; color:#000;"}

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"=>"Heading 2", "notes"=>"Section headings", "html"=>"

When zombies arrive, quickly fax judge Pat.

", "extra_css"=>"font-size: 40px; font-family: baskerville-urw,Georgia,Times,'Times New Roman',serif; font-weight: 300;; "}{"group_title"=>"Heading 3", "notes"=>"H3 headings used in the main body text", "html"=>"

When zombies arrive, quickly fax judge Pat.

", "extra_css"=>"font-size: 26px; color: #000; font-family: baskerville-urw, Georgia,Times,'Times New Roman',serif; "}{"group_title"=>"Case Study headings", "notes"=>"Headings used in the \"aside\" component, separate from the main body text;", "html"=>"

When zombies arrive, quickly fax judge Pat.

", "extra_css"=>"font-family: canada-type-gibson, sans-serif; font-size: 24.5px; color:#000;"}

Overview of pairings

Headings
{"group_title"=>"Heading 2", "notes"=>"Section headings", "html"=>"

When zombies arrive, quickly fax judge Pat.

", "extra_css"=>"font-size: 40px; font-family: baskerville-urw,Georgia,Times,'Times New Roman',serif; font-weight: 300;; "}{"group_title"=>"Heading 3", "notes"=>"H3 headings used in the main body text", "html"=>"

When zombies arrive, quickly fax judge Pat.

", "extra_css"=>"font-size: 26px; color: #000; font-family: baskerville-urw, Georgia,Times,'Times New Roman',serif; "}{"group_title"=>"Case Study headings", "notes"=>"Headings used in the \"aside\" component, separate from the main body text;", "html"=>"

When zombies arrive, quickly fax judge Pat.

", "extra_css"=>"font-family: canada-type-gibson, sans-serif; font-size: 24.5px; color:#000;"}

Overview of pairings

Headings
{"group_title"=>"Heading 2", "notes"=>"Section headings", "html"=>"

When zombies arrive, quickly fax judge Pat.

", "extra_css"=>"font-size: 40px; font-family: baskerville-urw,Georgia,Times,'Times New Roman',serif; font-weight: 300;; "}{"group_title"=>"Heading 3", "notes"=>"H3 headings used in the main body text", "html"=>"

When zombies arrive, quickly fax judge Pat.

", "extra_css"=>"font-size: 26px; color: #000; font-family: baskerville-urw, Georgia,Times,'Times New Roman',serif; "}{"group_title"=>"Case Study headings", "notes"=>"Headings used in the \"aside\" component, separate from the main body text;", "html"=>"

When zombies arrive, quickly fax judge Pat.

", "extra_css"=>"font-family: canada-type-gibson, sans-serif; font-size: 24.5px; color:#000;"}