Global Specifications

Accessibility, color, typography, logos, and other specifications that apply globally to all University of Houston websites.

Accessibility

All University web pages should be accessible in some form to those with disabilities, be they technological barriers (slow modems) or physical barriers (users with impaired vision). This is not just state law, but good sense: the more users who can access your information the better. For more information, please read the Executive Summary of UH Web Accessibility Standards.


Color

The official colors of the University of Houston are red, white, and silver. They are defined on the web by the following HEX or RGB color codes.

Color HEX RGB
Red #cc0000 rgb(204,0,0)
White #ffffff rgb(255,255,255)
Silver #999999 rgb(153,153,153)

All web documents should have a white background. Avoid the use of black in anything, as it provides too harsh of a contrast on a white background. Instead, use the following shades of gray, as they provide a softer look. The default color of type is the dark gray as defined below. Only use dark grey for type, as some visitors may find lighter shades too difficult to read.

Color HEX RGB
Dark gray #333333 rgb(51,51,51)
Medium gray #666666 rgb(102,102,102)
Silver #999999 rgb(153,153,153)
Light gray #cccccc rgb(204,204,204)

Typography

The following font standards comply with the University of Houston brand policy and conform with best practices on the web.

Fonts

The University of Houston website uses only two font stacks:

  • Helvetica, Arial, or the system sans-serif font for body copy
  • Tex Gyre Adventor for headings

Tex Gyre Adventor is a free, open-source version of ITC Avant Garde Gothic, the preferred font used in non-web University of Houston documents.

Additional font choices should be avoided.

Lorem ipsum

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat…

Incorrect

Lorem ipsum

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat…

Incorrect

Lorem ipsum

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat…

Correct

Text color

The default color for all type on University of Houston web pages is dark gray as defined above and not black. The use of red should be reserved for hyperlinks only.

All body copy should be on a white background in order to provide adequate contrast.

Reverse type (white text on a dark background) is acceptable in some situations but should be used sparingly.

Lorem ipsum

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat…

Incorrect

Lorem ipsum

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat…

Incorrect

Lorem ipsum

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat…

Correct

Text size

Body copy on the University of Houston website should be set at 15px with a line-height of 24px for paragraphs and other large blocks of text. A line-height of 21px is acceptable for narrow columns of text (e.g., sidebars, spiff captions). These text and leading sizes provide optimal readability on a variety of screen sizes and devices.

Text should not be set any smaller than 12px. Text set below 15px should be reserved for small user interface elements, photo captions, and fine print.

Lorem ipsum

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat…

Incorrect

Lorem ipsum

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat…

Incorrect

Lorem ipsum

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat…

Correct

Emphasis

Bold text should be reserved for headings and used sparingly in body copy to denote text with strong importance. Entire paragraphs should not be set in a bold font. Use of italics should be used to denote text with stressed emphasis only.

Lorem ipsum

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat…

Incorrect

Lorem ipsum

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat…

Incorrect

Lorem ipsum

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat…

Correct

Alignment

All headline and body copy on the University of Houston website should be left-aligned. Center-aligned and right-aligned text should be avoided as it is harder to read multiple lines and harder to scan for keywords than left-justified text.

Lorem ipsum

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat…

Incorrect

Lorem ipsum

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat…

Incorrect

Lorem ipsum

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat…

Correct

Logos

The University of Houston logotype must appear in the header of all web pages. Unit websites may request a logotype that includes their website name from the Web Team. Only logos provided by UH Marketing & Communication with the explicit intent for website headers may be used. No other logos or marks should appear in the header.


Photography

University of Houston has a large collection of evergreen photography available for use at http://images.uh.edu/. A CougarNet account is required to access these photographs.

Photographs and all other images used on the University of Houston website should saved with the RGB color mode and not CMYK. Pay careful attention file sizes and dimensions before placing an image on a web page. Images should not be too small and appear pixelated and should not be too large and take a long time to download on low-bandwidth connections.

Photo credit guidelines

When to include a photo credit:

  • If the photographer has specified that a photo credit be included or
  • The photo(s) are to be used for journalistic or editorial purposes.
  • Photos used in marketing or advertising pieces do not need photo credits unless specified.

How to add a photo credit:

  • If a photographer's name is listed, the credit would read: Photographer's name/University of Houston
  • If no name is listed, then your credit would read: photo/University of Houston.
  • The credit line can be in a very small but readable type and placed just under the photo. 10px is the minimum font size on the web. Here is an example:
Photo example
photo/University of Houston

comments powered by Disqus