Web

Yale has developed a set of web guidelines that permits considerable design flexibility while preserving key interface and institutional branding elements that complement Yale’s visual identity. These user-oriented interface elements create a minimal but consistent set of conventions across all university websites.

Yale’s main website at Yale.edu incorporates the styles and standards described below. To access a more detailed guide outlining the design elements and content components in use on Yale.edu, please contact Andrea MacAdam in the Office of Public Affairs and Communications at andrea.macadam@yale.edu.

Logos

The Yale logo is “Yale” set in a modified version of the Yale typeface, and standard practice includes it in the footer of all web pages. The signature “Yale University” is normally included in the top-left corner of the header region on web pages. The site title is usually below the signature set in the YaleNew Roman typeface.

Header Example
Yale University signature       Example of the Yale University signature
Site title
YaleNew Roman		       Example of a website title

The standard colors for the Yale logo and signature are Yale Blue set against a white or light gray background or reversed white set against Yale Blue. The logo and signature may also be black or dark gray when the page design requires it.

It is recommended that the footer of all web pages include the Yale logo in the lower left corner. The footer should also have a copyright statement with year, and a link to the Yale University Privacy Policy. Websites may also include a contact e-mail link, social media buttons, and additional information. Footer content is generally placed near the Yale logo but must not crowd it; breathing space should always be left around the logo. 

Footer Examples
Example of a Yale footer layout with white background
Example of a Yale footer layout with blue background
  Yale logo space Privacy Policy, Accessibility and Copyright notice

The Yale logo should never be combined with other designs to form a new or hybrid logo. The logo and signature should be linked to the main Yale website.

In addition, Yale College and other organizations may have their own wordmarks. For schools and administrative divisions, special wordmarks are available from the University Printer.

Download logos (.zip)

Typefaces

Yale’s own typeface is the preferred serif font for Yale websites and may be used throughout for titles, headings, and menu items. The standard sans-serif font for Yale sites is Mallory which is recommended for body text and may also be used for menus and headings.

Recommended Styles
The Yale typeface Example of the Yale typeface heading 1
  Examples of the Yale typeface headings 2-4
Mallory Small Caps Example of the Mallory Small Caps heading 5
   
Mallory body text Example of the Mallory body text

If additional web fonts are used, care should be taken to select fonts that are highly legible and harmonize with the recommended typefaces. Unusual and “quirky” typeface styles should be avoided.

Mallory web fonts are available as part of the YaleSites offering; download the Yale typeface here.

Colors

Yale Blue is the university’s identifying color, and has the hex value #00356b. The standard range of blue tints is shown in the primary color palette below along with the standard range of grays and two accent colors. Additional colors may be used as long as they complement, rather than clash with, the colors in the primary color palette.

Primary Color Palette
Blues   Grays   Accent Colors
Example of the Yale blue colors Example of the Yale gray colors Example of the Yale accent colors, green and orange

White space & layout

The Yale web design standards make use of generous sizes for type, photos, and other design elements with plenty of white space between them. Every section and component of the design avoids being small and cramped. The layout grid offers large gutter spaces between columns and there is extra line-space between major divisions on a page.

Web page layouts should always be handled via a responsive grid system. Older fixed-width grids and layout methods should no longer be used since they do not display well across various screen sizes and devices.

Icons

Small icons representing Yale simply show the “Y” from the Yale logo, centered in a square format. These are the standard web shortcut icon, or “favicon,” social media icons, and home screen and application icons for mobile devices. The Yale favicon may only be used on websites having the Yale.edu web domain.

Example of the Yale Favicon, sized 16 by 16 Example of the Yale social media icon, sized 48 by 48
Favicon 16x16
Icon for social media 48x48

Download icon set (.zip)