ESM Style Guide
- Penn State Mark
- Colors
  - ESM Print
  - Web
- Typefaces
  - Print
  - Web
- Web Site Markup Language

ESM Style Guide

While there is no official style manual for the ESM Department, we have adopted certain conventions to maintain a consistent image for public-facing documents and marketing collateral.

Penn State Mark

Two tone with black lettering preferred. Use Pantone Matching System 287 for shield.
Preferred mark in Adobe Illustrator file format
Preferred web mark in .png format (web optimized for AD54)

Colors

ESM Print

Penn State Mark uses Pantone Matching System 287 for shield, black for Lettering.
For four-color process colors, use RGB color space. Use 0-102-255 and 0-0-153 for PMS 285 and 287, respectively.

Web

ESM

Use RGB 8 bit HEX #2461AA for blue text headings.
Use RGB 8 bit HEX #3366CC for hyperlinks, #6699CC for visited links and black for hover.
Use RGB 8 bit HEX #EEEEEE for sidebars and callout boxes.

PSU

Use RGB 8 bit HEX #0066FF for PMS 285 blue and #000099 for PMS 287 Blue.
Use RGB 8 bit HEX #666666 for PMS 424 for dark gray.

Typefaces

Print

Adobe Myriad Pro - preferred sans-serif

Use for department name and headings on printed matter. For web pages, use as a graphic only.

Adobe Garamond Pro - preferred serif

Use for body text of printed matter and as a graphic on web pages.

Web

Arial - preferred sans-serif

For font-family list, use tag “font-family: Arial, Helvetica, sans-serif;”

The ESM web site uses only sans-serif typefaces, however, for laboratory or personal pages, Times New Roman and Georgia are preferred. Use tag: “font-family: Times New Roman, Georgia, Times, serif;”

Web Site Markup Language

Use strict XHTML 1.0 transitional or strict, where possible
ESM style sheet is /css/esm.css
Sample header:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ESM Courses and Curriculum</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="/css/esm.css" rel="stylesheet" type="text/css" />
<style type="text/css" media="print">@import '/css/esmprint.css';</style>
</head>

Table of Contents