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