iDeas Lab Style Guides
Website Style Guide
Korea Chair

Beyond Parallel

Beyond Parallel is a nonpartisan and authoritative analytic vehicle for delivering greater clarity and understanding to policymakers, strategists, and opinion leaders about Korean unification. The project will address issues that hold strategic significance for unification and functional issues such as economic development, migration, food security, transitional justice, human rights, and health that will be at the heart of how unification is carried out.

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"=>"Only used for page titles", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"alternate-gothic-no-3-d\", sans-serif !important; font-size: 56px; font-weight: 400; line-height: 61.6px; color:#10355f;"}{"group_title"=>"Header 2", "notes"=>"", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"alternate-gothic-no-3-d\", sans-serif !important; font-size: 36px; font-weight: 400; line-height: 39.6px; color: #333;"}{"group_title"=>"Header 3", "notes"=>"", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"alternate-gothic-no-3-d\", sans-serif !important; font-size: 30px; font-weight: 400; line-height: 33px; color: #333;"}{"group_title"=>"Header 4", "notes"=>"", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"museo-sans\", sans-serif !important; font-size: 20px; font-weight: 300; line-height: 22px; color: #333;"}

Overview of pairings

Headings
{"group_title"=>"Header 1", "notes"=>"Only used for page titles", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"alternate-gothic-no-3-d\", sans-serif !important; font-size: 56px; font-weight: 400; line-height: 61.6px; color:#10355f;"}{"group_title"=>"Header 2", "notes"=>"", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"alternate-gothic-no-3-d\", sans-serif !important; font-size: 36px; font-weight: 400; line-height: 39.6px; color: #333;"}{"group_title"=>"Header 3", "notes"=>"", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"alternate-gothic-no-3-d\", sans-serif !important; font-size: 30px; font-weight: 400; line-height: 33px; color: #333;"}{"group_title"=>"Header 4", "notes"=>"", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"museo-sans\", sans-serif !important; font-size: 20px; font-weight: 300; line-height: 22px; color: #333;"}

Overview of pairings

Headings
{"group_title"=>"Header 1", "notes"=>"Only used for page titles", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"alternate-gothic-no-3-d\", sans-serif !important; font-size: 56px; font-weight: 400; line-height: 61.6px; color:#10355f;"}{"group_title"=>"Header 2", "notes"=>"", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"alternate-gothic-no-3-d\", sans-serif !important; font-size: 36px; font-weight: 400; line-height: 39.6px; color: #333;"}{"group_title"=>"Header 3", "notes"=>"", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"alternate-gothic-no-3-d\", sans-serif !important; font-size: 30px; font-weight: 400; line-height: 33px; color: #333;"}{"group_title"=>"Header 4", "notes"=>"", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"museo-sans\", sans-serif !important; font-size: 20px; font-weight: 300; line-height: 22px; color: #333;"}

Overview of pairings

Headings
{"group_title"=>"Header 1", "notes"=>"Only used for page titles", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"alternate-gothic-no-3-d\", sans-serif !important; font-size: 56px; font-weight: 400; line-height: 61.6px; color:#10355f;"}{"group_title"=>"Header 2", "notes"=>"", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"alternate-gothic-no-3-d\", sans-serif !important; font-size: 36px; font-weight: 400; line-height: 39.6px; color: #333;"}{"group_title"=>"Header 3", "notes"=>"", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"alternate-gothic-no-3-d\", sans-serif !important; font-size: 30px; font-weight: 400; line-height: 33px; color: #333;"}{"group_title"=>"Header 4", "notes"=>"", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"museo-sans\", sans-serif !important; font-size: 20px; font-weight: 300; line-height: 22px; color: #333;"}

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"=>"Only used for page titles", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"alternate-gothic-no-3-d\", sans-serif !important; font-size: 56px; font-weight: 400; line-height: 61.6px; color:#10355f;"}{"group_title"=>"Header 2", "notes"=>"", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"alternate-gothic-no-3-d\", sans-serif !important; font-size: 36px; font-weight: 400; line-height: 39.6px; color: #333;"}{"group_title"=>"Header 3", "notes"=>"", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"alternate-gothic-no-3-d\", sans-serif !important; font-size: 30px; font-weight: 400; line-height: 33px; color: #333;"}{"group_title"=>"Header 4", "notes"=>"", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"museo-sans\", sans-serif !important; font-size: 20px; font-weight: 300; line-height: 22px; color: #333;"}

Overview of pairings

Headings
{"group_title"=>"Header 1", "notes"=>"Only used for page titles", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"alternate-gothic-no-3-d\", sans-serif !important; font-size: 56px; font-weight: 400; line-height: 61.6px; color:#10355f;"}{"group_title"=>"Header 2", "notes"=>"", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"alternate-gothic-no-3-d\", sans-serif !important; font-size: 36px; font-weight: 400; line-height: 39.6px; color: #333;"}{"group_title"=>"Header 3", "notes"=>"", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"alternate-gothic-no-3-d\", sans-serif !important; font-size: 30px; font-weight: 400; line-height: 33px; color: #333;"}{"group_title"=>"Header 4", "notes"=>"", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"museo-sans\", sans-serif !important; font-size: 20px; font-weight: 300; line-height: 22px; color: #333;"}

Overview of pairings

Headings
{"group_title"=>"Header 1", "notes"=>"Only used for page titles", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"alternate-gothic-no-3-d\", sans-serif !important; font-size: 56px; font-weight: 400; line-height: 61.6px; color:#10355f;"}{"group_title"=>"Header 2", "notes"=>"", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"alternate-gothic-no-3-d\", sans-serif !important; font-size: 36px; font-weight: 400; line-height: 39.6px; color: #333;"}{"group_title"=>"Header 3", "notes"=>"", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"alternate-gothic-no-3-d\", sans-serif !important; font-size: 30px; font-weight: 400; line-height: 33px; color: #333;"}{"group_title"=>"Header 4", "notes"=>"", "html"=>"

The five boxing wizards jump quickly.

", "extra_css"=>"font-family: \"museo-sans\", sans-serif !important; font-size: 20px; font-weight: 300; line-height: 22px; color: #333;"}