Gettysburg.edu Style Guide

Information on Gettysburg.edu typography, major page and structural elements, and color palette.

On this page:

Typography (webfonts)

ITC Avant Garde

ITC Avant Garde is a sans serif face that is used for headings. Available in Bold and Bold Italic.

Fallback fonts:

  1. Helvetica Bold
  2. Arial Bold
  3. Sans serif

Mrs. Eaves

“Mrs. Eaves” is a serif face that is used for body copy. Available in Regular and Regular Italic.

Fallback fonts:

  1. Georgia
  2. Serif

Gettysburg.edu type hierarchy

Usage Font XL Desktop Desktop Tablet Mobile Additional Styling
.alpha ITC Avant Garde Gothic LT 94/94 90/90 58/64 32/41 letter-spacing: -0.04em;
.beta ITC Avant Garde Gothic LT 64/64 60/60 44/48 32/41 letter-spacing: -0.04em;
.gamma Mrs Eaves XL Serif
Narrow OT Regular
64/64 60/64 26/28 28/28 letter-spacing: -0.04em;
.delta ITC Avant Garde Gothic LT 36/44 35/42 22/26 23/26 letter-spacing: -0.04em;
.epsilon ITC Avant Garde Gothic LT 30/36 25/37 19/23 16/18 letter-spacing: -0.04em;
.zeta ITC Avant Garde Gothic LT 21/27 17/24 17/23 13/18 letter-spacing: -0.04em;
.eta Helvetica Bold, Arial Bold 14/21 14/24 15/19 13/18 letter-spacing: 0.01em;
p.large Mrs Eaves XL Serif
Narrow OT Regular
42/42 40/44 33/37 28/28 letter-spacing: -0.04em;
p Mrs Eaves XL Serif
Narrow OT Regular
30/38 28/38 26/30 22/25 letter-spacing: -0.04em;
p.small Helvetica Bold, Arial Bold 17/24 17/24 17/23 13/18 letter-spacing: 0.01em;
p.caption Helvetica Bold, Arial Bold 14/21 14/21 15/19 11/14 letter-spacing: 0.01em;

Structural headings and other elements

The above heading (“Structural headings and other elements”) is an example of the Heading 2 - .Delta style. Example page copy follows.

At Gettysburg College there are two hallmarks to the academic curriculum:

  1. We ask students to be self-reflective, to write and think in ways that express a growing self-awareness about the progress and impact of their education; and
  2. We ask students to make connections in what they are learning; to see relevant implications across courses, to achieve an education that is more than a transcript of self-contained courses.
Image Alt Text
This is a caption lorem ipsum dolor sit amet, consectetur adipiscing elit nunc alliquam ultrices.

Of course, we still ask students to select a major, a field about which they feel passionate, and in which they will study in depth. And the entire program begins with the highly recommended option of our first-year seminars, which create small, intense, residential learning communities of active learners around wonderfully interesting topics.

This is a truly exciting curriculum, structured around four key elements:

Heading 3 - .epsilon Style

Gettysburg College students are required to engage in multiple forms of inquiry -- in the humanities, the arts, the social sciences, and natural sciences -- in a self-conscious and intentional way.

Heading 4 - .zeta Style

We expect students to learn a variety of approaches, to apply them aptly, and to understand their value and their limitations.

Heading 5 - .eta style

We believe our graduates should know how to integrate what they have learned. It is not enough to have compartmentalized knowledge. Integrative thinking is required to create solutions, to develop new ideas, to exert leadership.

Heading 6 - .p--small style

We believe our graduates should know how to integrate what they have learned. It is not enough to have compartmentalized knowledge. Integrative thinking is required to create solutions, to develop new ideas, to exert leadership.

Tables

Column Heading Column Column Column
Lorem 12 March 24th, 2018 webmaster@gettysburg.edu
Dolar Sit 12 Feb 24th, 2018 webmaster@gettysburg.edu
Amet 12 March 24th, 2018 webmaster@gettysburg.edu
Consectetung 12 March 24th, 2018 webmaster@gettysburg.edu
Nunc 12 March 24th, 2018 webmaster@gettysburg.edu
Adipiscing 12 March 24th, 2018 webmaster@gettysburg.edu

Forms


CTA (Call to Action) buttons

Primary Button Secondary Button

Color palette

The selection and application of color on the new site best define the refreshed Gettysburg College brand.

Color compliance

Where possible, the design meets AA compliance for color contrast. Much of the code on the site already accounts for appropriate color pairings, but in the case of new uses, it’s important to make sure contrast is sufficient by first using a tool like Contrast Checker.

Design system colors

Swatch Hex Name Use
  #222222 $black Text color on $white and $alabaster backgrounds. Transparent overlay color on photographs.
  #FFFFFF $white Background color, text color on $sapphire and $navy, link and text color on photos
  #F5F5F5 $alabaster Filter bar background, large hover background color, zebra-stripe table background color
  #C0C0C0 $silver Horizontal rule color
  #FE6301 $orange Links in text 18px and larger
  #1948B4 $blue Links in text 17px and smaller
  #747474 $grey Active local navigation link color
  #84BAFF $cornflower Link color when used on $navy and
  #043B82 $sapphire Background color used next to $navy
  #043371 $navy Footer background color, button background color
  #FF0000 $red Form input error color