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:
- Helvetica Bold
- Arial Bold
- Sans serif
Mrs. Eaves
“Mrs. Eaves” is a serif face that is used for body copy. Available in Regular and Regular Italic.
Fallback fonts:
- Georgia
- 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:
- 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
- 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.
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
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.