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" Adobe Font. However, it has a special use-case, it should only be used in the site's header (with kcc logo) or navigation.



To embed all the Google fonts used for page content, copy the following code into the <head> element 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

If your system requires the fonts as an @import in a stylesheet, copy the following code into your stylesheet before you define your typography styles:

@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; */

Embedding The Adobe Font

warning The Eurostile Adobe Font is Reserved

The Eurostile Adobe Font is used in a header/navbar (if your system supports the use of headings in a header/navbar — as opposed to a logo/graphic.)

If you system supports using a heading within a header/navbar, copy the following code into the <head> of your HTML document:

<!-- Link to 'Eurostile' Adobe Font stylesheet --> <link rel="stylesheet" href="https://use.typekit.net/mli7lsm.css">
H1

HEADING ONE

Typeface:

Eurostile

Font vendor:

Adobe 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; }


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; }