University Web Standards


Websites published by academic and administrative units must adhere to Pitt’s brand standards for websites. These standards ensure our sites properly represent the University’s brand to audiences and provide a consistent and familiar user experience. 

In addition to the web standards detailed below, University sites should follow W3C Web standards, which include consistent use of semantic HTML, accessibility compliance with ADA section 503c, and adherence to best practices regarding usability, including responsive design, for handheld devices.

University Web Themes

While custom websites may be produced, all sites must meet Pitt’s basic Web standards. It is strongly recommended that units leverage one of the approved University web themes, which serve as a great foundation. University Communications will consult with you on how you may add custom elements to extend your design when circumstances require.

Starter HTML Template

If you are building a custom site for a University unit, please download the starter HTML/CSS template. This set of files will provide you with the correct fonts, colors, graphics, and basic HTML code for your site. Using this as a starting point will ensure consistency and compliance with basic University brand standards.

Brand Standards for Websites

University Header

The official Pitt logo must appear at the top of each page in the header element. The header may not be edited, resized, or include additional elements. It must include the correct margins and spacing. No other marks may appear above, adjacent to, or on the same horizontal plane as the University seal and signature. Attributes of the header include:

  • Official Web version of University seal and signature justified left. The display width for the seal and signature is 135px by 42px. 

Site Title/Logos

The title of the site must appear in the font Cooper Hewitt. Unique unit logos are not permitted in the header space without permission from University Communications. Contact us if you feel you need a unique mark for your site. The site title may include two lines of text in order to accommodate a stacked title or the name of a parent unit. The unit name must be rendered HTML-based Cooper Hewitt font at 22px in height on one line or 14px over 22px if two lines. 

Example header with one-line title and navigation:

Example header element with two-line title and navigation:


Fonts & Sizes

Page width should be responsive with a maximum width of 1,140 pixels for the content container. Appropriate margins and padding must be used. The approved typeface for all headers and body text is also Roboto. Sizes below are indicated in pixels, but using em units is acceptable. 

Pay close attention to the margins and padding. The appropriate amount of padding is necessary for readability.

Header Size and Margins

font-size: 40px; (or equivalent)
font-family: "Rubik";
font-weight: 700;

margin-bottom: 49px;

Note: H1 should be used for page title only.


font-size: 23px; (or equivalent)
font-family: "Open Sans";
font-weight: 700;

margin-top: 60px;*
margin-bottom: 30px;


font-size: 18px; (or equivalent)
font-family: "Open Sans";
font-weight: 700;

margin-top: 50px;
margin-bottom: 25px;


font-size: 14px; (or equivalent)
font-family: "Open Sans";
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em; (or equivalent)

margin-top: 30px;
margin-bottom: 15px;

*If beginning a page with an H2, no top margin should be applied.


Examples of appropriate use of color are demonstrated in the official graphic themes. University academic and administrative sites should not arbitrarily incorporate unique color palettes.


  • Pitt Royal Blue: #003594
  • University Gold: #ffb81c
  • White
  • Grey: #e8e9ee 
  • Dark Grey: #2b2b2b


  • Pitt Royal Blue: #003594
  • University Gold: #ffb81c
  • White
  • Orange: #ff6600


  • Dark Grey: #2b2b2b


  • Blue: #3366ff (light background)
  • University Gold: #ffb81c (dark background)
  • Text-decoration: none



Every page should include a footer element. The footer may be kept simple or include links to forms, popular resources, social media, and other destinations. When the use of a unique logo is required, it may appear in the footer. See examples of appropriate footer styles here.

At a minimum the footer should contain:

  • Official Unit name
  • Street address
  • E-mail address
  • Phone Number
  • Link to Web feedback form
  • Revision date