Web and Digital

Web standards

Typography (webfonts)

Primary fonts:

ITC Avant Garde

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

Secondary 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

We strive to meet WCAG 2.0 AA compliance for color contrast throughout the site. We revised our web templates in 2019 to improve contrast thresholds for links. Much of the site already accounts for appropriate color pairings, but as new content is added, it’s important to make sure contrast is sufficient by first using a tool like WebAIM’s Contrast Checker. The contrast ratio must be 4.5:1 or greater for color accessibility.

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
  #CC4E00 $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

Digital communications

Email signatures

Electronic signatures at the bottom of your emails can help strengthen the College’s visibility, while lending more distinction to your correspondence. Some suggestions to create the most effective signature include:

  • For ease of reading, typeset your signature using a common default font within your email application, such as Arial or Georgia. Do not use a decorative font.
  • Do not use an image as, or within, your signature. This helps guarantee the recipient sees your signature without needing to download an image.
  • An example of a proper signature is shown here:
    First Last | Title
    Gettysburg College | Department or Office Name
    300 North Washington Street | Gettysburg, PA 17325
    office: (717) 337-xxxx
    www.gettysburg.edu

HTML email headers

Email headers—or banners—are an excellent way for an office or department to incorporate the College’s brand into their electronic communications, especially with external audiences. These headers offer a way to distinguish these official messages from other personal emails. These headers are now created in a responsive manner, to accommodate various screen sizes and email programs, through coding by our IT department.

If your office or department is in need of an email header, please contact the design team via our design request form.


example html header