Web Standards

>

Web Logo Standards

Approved Perelman School of Medicine logos for the web:

White text version for dark backgrounds: Perelman School of Medicine at the University of Pennsylvania
Blue text version for light backgrounds: Perelman School of Medicine at the University of Pennsylvania

Code used to embed the Perelman School of Medicine logo on your page:

White text version:

<a href="http://www.med.upenn.edu/"><img src="/images/psom_logo_white.png" alt="Perelman School of Medicine at the University of Pennsylvania" width="213" height="60" /></a>

Blue text version:

<a href="http://www.med.upenn.edu/"><img src="/images/psom_logo_blue.png" alt="Perelman School of Medicine at the University of Pennsylvania" width="213" height="60" /></a>

Since they are transparent PNGs, they will work on any background.

Please note: the logo may not be altered from its original form. Its dimensions may not be distorted, and it may not be displayed smaller than 60 pixels in height. It should be placed in the upper left-hand corner of the page for consistency and should link back to the Perelman School of Medicine home page.

High resolution logos for print, including stationery, can be found on the Perelman renaming website.


High resolution image support for the web:

Javascript code:

Include javascripts within the <head> tags

document.createElement("picture");
<script src="//cdnjs.cloudflare.com/ajax/libs/picturefill/2.1.0/picturefill.js" async"></script>

HTML code:

This script will swap the original logo with the high resolution logo.

In <source srcset> the image is defined with its pixel ratio. The original image file does not need to have a specified pixel-ratio as the default is '1x'. See example below.

<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source
   type="image/png"
   srcset="//www.med.upenn.edu/images/psom_logo_blue.png,
//www.med.upenn.edu/images/psom_logo_blue@2x.png 2x">
<!--[if IE 9]></video><![endif]-->
<img src="//www.med.upenn.edu/images/psom_logo_blue.png" alt="Perelman School of Medicine at the University of Pennsylvania" width="213" height="60" />
</picture>

Please note: If you are using the white logo, just make sure the image paths point to the white Perelman logo.

For more details, check out picturefill