Primary Text: Open Sans

Open Sans is a versatile sans serif typeface based on its century-old, timeless predecessor, DIN, but modernized for usability and with slight changes to the design to humanize the family.

Type Scale

• Heading One

  3em

  Open Sans Heavy Condensed

• Heading Two

  2.6em

  Open Sans Heavy Condensed

• Heading Three

  2.2em

  Open Sans Heavy Condensed

• Heading Four

  2em

  Open Sans Heavy Condensed

• Heading Five

  1.8em

  Open Sans Heavy Condensed

• Heading Six

  1.6em

  Open Sans Heavy Condensed

• Paragraph

  1.07em

  Open Sans Light

Paragraphs

The default body text is 1rem (16px).

Headings

The default heading color is Dark Gray.

Hyperlinks

The default color of hyperlinks is the Primary brand color. Hover state increases opacity of text underline. Hyperlinks are also bold by default.

Animation

Optionally, hyperlinks can have an animated underline style. Simply add any rel attribute to the a element. For example, super-duper hyperlink.

See individual components (lists, buttons, etc.) for more styles

Modifiers are extra classes used to modify the appearance, alignment, size, behavior etc. of standard component styles. Note: these modifiers are intended for generally unstyled base html elements. Specific components with highlight stylized content elements have their own unique modifiers. Use with caution.

Webfont CSS

				
	/* Open Sans <link rel="stylesheet" type="text/css" href="/common/css/din-next/din-next.css"> */
	@font - face {
    font - family: 'Open Sans Light';
    src: url('3a21ee_0_0.eot');
    src: url('3a21ee_0_0.eot?#iefix') format('embedded-opentype'),
		url('3a21ee_0_0.woff2') format('woff2'),
		url('3a21ee_0_0.woff') format('woff'),
		url('3a21ee_0_0.ttf') format('truetype'),
		url('3a21ee_0_0.svg#wf') format('svg');
	}

	@font - face {
    font - family: 'Open Sans Bold';
    src: url('3a21ee_1_0.eot');
    src: url('3a21ee_1_0.eot?#iefix') format('embedded-opentype'),
		url('3a21ee_1_0.woff2') format('woff2'),
		url('3a21ee_1_0.woff') format('woff'),
		url('3a21ee_1_0.ttf') format('truetype'),
		url('3a21ee_1_0.svg#wf') format('svg');
	}

	@font - face {
    font - family: 'Open Sans Regular';
    src: url('3a21ee_2_0.eot');
    src: url('3a21ee_2_0.eot?#iefix') format('embedded-opentype'),
		url('3a21ee_2_0.woff2') format('woff2'),
		url('3a21ee_2_0.woff') format('woff'),
		url('3a21ee_2_0.ttf') format('truetype'),
		url('3a21ee_2_0.svg#wf') format('svg');
	}

	@font - face {
    font - family: 'Open Sans SemiBold';
    src: url('3a21ee_3_0.eot');
    src: url('3a21ee_3_0.eot?#iefix') format('embedded-opentype'),
		url('3a21ee_3_0.woff2') format('woff2'),
		url('3a21ee_3_0.woff') format('woff'),
		url('3a21ee_3_0.ttf') format('truetype'),
		url('3a21ee_3_0.svg#wf') format('svg');
	}

	/* Roboto <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700&display=swap" rel="stylesheet"> */
	@font-face {
	  font-family: 'Roboto Slab';
	  font-style: normal;
	  font-weight: 300;
	  font-display: swap;
	  src: local('Roboto Slab Light'), local('RobotoSlab-Light'), url(https://fonts.gstatic.com/s/robotoslab/v9/BngRUXZYTXPIvIBgJJSb6u9mxLCGwR2oefDo.woff2) format('woff2');
	  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}
	@font-face {
	  font-family: 'Roboto Slab';
	  font-style: normal;
	  font-weight: 400;
	  font-display: swap;
	  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v9/BngMUXZYTXPIvIBgJJSb6ufN5qWr4xCC.woff2) format('woff2');
	  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}
	@font-face {
	  font-family: 'Roboto Slab';
	  font-style: normal;
	  font-weight: 700;
	  font-display: swap;
	  src: local('Roboto Slab Bold'), local('RobotoSlab-Bold'), url(https://fonts.gstatic.com/s/robotoslab/v9/BngRUXZYTXPIvIBgJJSb6u92w7CGwR2oefDo.woff2) format('woff2');
	  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}

	/* Gibson <link rel="stylesheet" type="text/css" href="/common/css/gibson/family.css"> */
	/* Gibson */

	@font-face {
		font-family: 'GibsonRegular';
		src: url('gibson-regular-webfont.eot');
		src: url('gibson-regular-webfont.eot?#iefix') format('embedded-opentype'),
		url('gibson-regular-webfont.woff') format('woff'),
		url('gibson-regular-webfont.ttf') format('truetype'),
		url('gibson-regular-webfont.svg#gibsonregular') format('svg');
		font-weight: normal;
		font-style: normal;
	}

	@font-face {
		font-family: 'GibsonLight';
		src: url('gibson-light-webfont.eot');
		src: url('gibson-light-webfont.eot?#iefix') format('embedded-opentype'), url('gibson-light-webfont.woff') format('woff'), url('gibson-light-webfont.ttf') format('truetype'), url('gibson-light-webfont.svg#gibsonlight') format('svg');
		font-weight: normal;
		font-style: normal;
	}

	@font-face {
		font-family: 'GibsonSemiBold';
		src: url('gibson-semibold-webfont.eot');
		src: url('gibson-semibold-webfont.eot?#iefix') format('embedded-opentype'),
		url('gibson-semibold-webfont.woff') format('woff'),
		url('gibson-semibold-webfont.ttf') format('truetype'),
		url('gibson-semibold-webfont.svg#gibsonsemibold') format('svg');
		font-weight: normal;
		font-style: normal;
	}

	@font-face {
		font-family: 'Gibson-Regular';
		src: url('gibson-regular-webfont.eot');
		src: url('gibson-regular-webfont.eot?#iefix') format('embedded-opentype'),
		url('gibson-regular-webfont.woff') format('woff'),
		url('gibson-regular-webfont.ttf') format('truetype'),
		url('gibson-regular-webfont.svg#gibsonregular') format('svg');
		font-weight: normal;
		font-style: normal;
	}

	@font-face {
		font-family: 'Gibson-Light';
		src: url('gibson-light-webfont.eot');
		src: url('gibson-light-webfont.eot?#iefix') format('embedded-opentype'), url('gibson-light-webfont.woff') format('woff'), url('gibson-light-webfont.ttf') format('truetype'), url('gibson-light-webfont.svg#gibsonlight') format('svg');
		font-weight: normal;
		font-style: normal;
	}

	@font-face {
		font-family: 'Gibson-SemiBold';
		src: url('gibson-semibold-webfont.eot');
		src: url('gibson-semibold-webfont.eot?#iefix') format('embedded-opentype'),
		url('gibson-semibold-webfont.woff') format('woff'),
		url('gibson-semibold-webfont.ttf') format('truetype'),
		url('gibson-semibold-webfont.svg#gibsonsemibold') format('svg');
		font-weight: normal;
		font-style: normal;
	}