Typography

KCC Typography



Roboto

Ro

Sample

The jay, pig, fox, zebra and my wolves quack!


Usage

Heading Font

Oswald

Os

Sample

The quick brown fox jumps over the lazy dog.


Usage

HEADING FONT

Open Sans

Op

Sample

When zombies arrive, quickly fax judge Pat!


Usage

Paragraph text



Heading Level 1 

- RESERVED

ALTERNATE HEADING LEVEL 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Paragraph text

  • Unordered List
  • Unordered List
  • Unordered List
  1. Ordered List
  2. Ordered List
  3. Ordered List


All content in the main section of a page uses Google Fonts.

There is only one other font that we use—the "Eurostile" Typekit font. However, it has a special use-case, it may only be used in the site's navigation (seen as "TYPOGRAPHY" on this page).



The prefered method to embed the Fonts is a <link> tag pointing to the stylesheet. To embed all the Google fonts used for page content, copy the following code into the <head> of your HTML document:

<link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald:500|Roboto:500,700&display=swap" rel="stylesheet">

Alternate Method Using @import

This is NOT our preferred method for embeding fonts (see Embed Google Fonts above).

If your system requires the fonts as an @import rule in a stylesheet (in a *.css file), copy the following code into your stylesheet before the style rules get defined:

/* Your system's *.css stylesheet */ @import url('https://fonts.googleapis.com/css?family=Open+Sans|Oswald:500|Roboto:500,700&display=swap');
/* The font-family declarations must happen after the @import rules. */ /* font-family: 'Roboto', sans-serif; */ /* font-family: 'Open Sans', sans-serif; */ /* font-family: 'Oswald', sans-serif; */

Embed The Typekit Font

warning The Eurostile Typekit Font is Reserved

The Eurostile Typekit font is reserved for use in our local-navigation bar (seen in the navbar on this page as "TYPOGRAPHY").

We prefer to embed third-party solutions into our HTML pages which already include those elements.

If this is not possible through your system, copy the following code into the <head> of your HTML document:

<!-- Link to 'Eurostile' Typekit font's stylesheet --> <link rel="stylesheet" href="https://use.typekit.net/mli7lsm.css">


Heading Styles


H1

HEADING ONE

Typeface:

Oswald

Font vendor:

Google Fonts

CSS

.typography__section--heading {   color: #c61f48;   font-family: 'Oswald', sans-serif;   font-size: 2rem;   font-weight: 500; // styles inherited
// from Bootstrap/reboot
  line-height: 1.2;   margin-bottom: .5rem;   margin-top: 0; }
H2

Heading Two

Typeface:

Roboto

Font vendor:

Google Fonts

CSS

.typography__h2 {   color: #666666;   font-family: 'Roboto', sans-serif;   font-size: 2rem;   font-weight: 500; // styles inherited
// from Bootstrap/reboot
  line-height: 1.2;   margin-bottom: .5rem;   margin-top: 0; }
H3

Heading Three

Typeface:

Roboto

Font vendor:

Google Fonts

CSS

.typography__h3 {   color: #0f3b63;   font-family: 'Roboto', sans-serif;   font-size: 1.75rem;   font-weight: 500; // styles inherited
// from Bootstrap/reboot
  line-height: 1.2;   margin-bottom: .5rem;   margin-top: 0; }
H4

Heading Four

Typeface:

Roboto

Font vendor:

Google Fonts

CSS

.typography__h3 {   color: #c61f48;   font-family: 'Roboto', sans-serif;   font-size: 1.7rem;   font-weight: 500; // styles inherited
// from Bootstrap/reboot
  line-height: 1.2;   margin-bottom: .5rem;   margin-top: 0; }
H5
Heading Five

Typeface:

Roboto

Font vendor:

Google Fonts

CSS

.typography__h3 {   color: #666666;   font-family: 'Roboto', sans-serif;   font-size: 1.5rem;   font-weight: 700; // styles inherited
// from Bootstrap/reboot
  line-height: 1.2;   margin-bottom: .5rem;   margin-top: 0; }
H6
Heading Six

Typeface:

Roboto

Font vendor:

Google Fonts

CSS

.typography__h3 {   color: #666666;   font-family: 'Roboto', sans-serif;   font-size: 1.4rem;   font-weight: 700; // styles inherited
// from Bootstrap/reboot
  line-height: 1.2;   margin-bottom: .5rem;   margin-top: 0; }

Paragraphs and Other Text Items


P

Paragraph text

Typeface:

Open Sans

Font vendor:

Google Fonts

CSS

p {   color: #666666;   font-family: 'Open Sans', sans-serif;   font-size: 1rem; // styles inherited
// from Bootstrap/reboot
  line-height: 1.5;   margin-bottom: .5rem;   margin-top: 0; }
UL

Unordered list

Typeface:

Open Sans

Font vendor:

Google Fonts

CSS

ul {   color: #666666;   font-family: 'Open Sans', sans-serif;   font-size: 1rem; // styles inherited
// from Bootstrap/reboot
  line-height: 1.5;   margin-bottom: .5rem;   margin-top: 0; }
OL

Ordered list

Typeface:

Open Sans

Font vendor:

Google Fonts

CSS

ol {   color: #666666;   font-family: 'Open Sans', sans-serif;   font-size: 1rem; // styles inherited
// from Bootstrap/reboot
  line-height: 1.5;   margin-bottom: .5rem;   margin-top: 0; }