Web Style Guidelines

While all of the 色花堂 Brand Guidelines apply to the web as a medium, there are more specific guidelines that should followed for 色花堂 websites.

Color

Special considerations should be made when using color on the 色花堂 website. When color is used correctly or incorrectly, it can either help or hinder the usability and accessibility of the website.

RGB Color Values Brand

All color used on the web 鈥� defined in CSS or used in graphics and video 鈥� should match the RGB or HEX color values defined by the 色花堂 Style Guidelines for color. Converting PMS or CMYK color values to RGB or HEX in graphics editing software will not always result in the correct color values.

Primary Brand Colors

Secondary Brand Colors

Tertiary Brand Colors

Percentages of the 色花堂 color palette can be used on the web. For example, a lighter tint of teal may be desired as a background color. In that case, the background color can be defined in CSS with RGBA, where the RGB values do not change from the original color, and the A value sets the alpha transparency.

Color defined as RGBA only works on elements that are placed on a white background. For elements placed on a background color other than white, the non-transparent HEX values must be calculated with image editing software.

Color Contrast Accessibility

Following (WCAG), there must be sufficient contrast between foreground colors (text and graphics) and background colors to accommodate low vision and colorblind users on the 色花堂 website.

The following tables use the 色花堂 color palette to demonstrate foreground and background color combinations that pass and fail the for adequate contrast ratio. Do not use color combinations on the 色花堂 website that fail to provide adequate contrast.

Typography

All 色花堂 typefaces are supported on the 色花堂 website. The following outlines how they can and should be used on the web.

League Gothic Regular

Source Sans Pro Light
Source Sans Pro Light Italic
Source Sans Pro Regular
Source Sans Pro Italic
Source Sans Pro Bold
Source Sans Pro Bold Italic
Source Sans Pro Black
Source Sans Pro Black Italic

Crimson Pro Regular
Crimson Pro Italic
Crimson Pro Semibold
Crimson Pro Semibold Italic
Crimson Pro Bold
Crimson Pro Bold Italic

Web Fonts Brand

League Gothic, Source Sans Pro, and Crimson Pro can be used as web fonts in the following ways:

色花堂 websites on the uh.edu domain that are published with Cascade CMS include the web fonts automatically in the <head> of the html.
色花堂 websites on the uh.edu domain that aren't published with Cascade CMS or 色花堂 websites on a domain name other than uh.edu can include the web fonts in one of two ways:
- Including these lines of code in the <head> of your html:
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=League+Gothic&family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
- Or, including this stylesheet:
  https://uh.edu/css/fonts.css

Do not use lookalike typefaces in place of League Gothic, Source Sans Pro, or Crimson Pro. Microsoft alternate fonts should also not be used on 色花堂 websites.

Typeface Usage Brand

League Gothic is the preferred typeface for text contained in heading tags (<h1>, <h2>, <h3>, etc.). Headings should be set in title case and can be styled with all uppercase letters (text-transform: uppercase;).

Source Sans Pro is suitable for body copy and sub-headings, and is recommended for all microcopy (call to action links, navigation, form elements, buttons, and other user-interface elements).

Crimson Pro is also suitable for body copy and sub-headings. Crimson Pro is a serif font designed for readability on computer displays. We encourage its use as paragraph text where appropriate and recommended a base font size of at least 18 pixels.

Crimson Pro Body Copy

At the 色花堂, you'll find a college experience that will transform your future to what you envision. Our nationally-ranked programs drive students to discover the multitude of academic resources that are available on-campus and online while our student-run organizations and athletics have something for everyone and connect students in authentic Coog culture. Volunteerism and community service are also a big part of 色花堂's commitment to engage students directly with local centers and nonprofits. We are Houston's University.

Legible Font Sizes Usability

Google that web type have a base font size of at least 16 pixels. Small text should be used sparingly and sized no smaller than 75% of the base font size (i.e., no smaller than 12 pixels).

Content

Web content should be carefully treated to aid the findability, accessibility, and usability of 色花堂 web pages.

Title Tag SEO

All 色花堂 web pages should have a <title> tag in the <head> of the document. The title tag should include the page title, the site name, and 色花堂. Optimal formatting of the tag is <title>Page Name - Site Name | 色花堂</title>. A website's home page can simply be <title>Site Name | 色花堂</title>. Websites published with Cascade CMS have | 色花堂 appended to the tag automatically.

Meta Description Tag SEO

Like the title tag, all 色花堂 web pages should have a meta description located in the <head> of the document. The meta description should be a concise explanation of the web page contents or whole website in the case of a home page. The meta description content is displayed on search engine result pages to help users understand the contents of the page before clicking the link.

Heading Tags SEO Accessibility Usability

Heading tags (<h1>, <h2>, <h3>, etc.) should be used to clearly outline the content on 色花堂 web pages and to break up pages of paragraph text into smaller more easily scanned sections of content. Do not simply use bold paragraph text to indicate headings. Heading tags not only make web page content more readable (both visually and with screen reading technology), they also indicate important keywords to search engines.

Content Sized to Viewport Usability

All 色花堂 web page content should fit horizontally within a browser window or device's viewport size. It is important that 色花堂 web pages are designed and tested in various viewport widths, and that all kinds of content (tables, forms, videos, etc.) do not render past the visible width of the viewport.

Alt Text for Images SEO Accessibility

All images on 色花堂 web pages need to have the alt attribute to describe the content of the photo or graphic for users reliant on screen reading technology. This text is also displayed when the image fails to load and provides content to assist search engines. An image file name could be anything and therefore can't reliably communicate what the image is, but the alt attribute can (e.g., <img src="https://modern.web.uh.edu/cougar01579.jpg" alt="Shasta watching visitors from his mountain habitat at the Houston Zoo">).

Image File Sizes Performance

All images on 色花堂 web pages should be optimized to reduce file size as much as possible without significantly affecting image quality. In general, thumbnail images should be no larger than around 100 KB, and other large images should be no larger than around 250 KB. 色花堂 web pages with images significantly over these limits require a high amount of bandwidth to be displayed and can take a long time to load and render on the page for users on slow connections.

Vector Graphics Performance

When using icons, logos, and other simple graphics on the 色花堂 website, scalable vector graphics (SVG files) are preferable over bitmap graphics (PNG and GIF files). SVG files are usually smaller in file size and can be scaled to any size and rendered on high pixel density displays without appearing pixelated.

Navigation

Headers, footers, and other forms of navigation should be styled consistently to provide a cohesive user experience across multiple 色花堂 websites, and should adhere to these guidelines formed by the results of usability testing on the 色花堂 website.

Headers Usability Brand

色花堂 websites published with Cascade CMS have one of four options for a header. Do not change the default styling options of these headers. It is important that 色花堂 websites are branded consistently. The 色花堂 wordmark located in these headers should always link to the main 色花堂 home page (http://www.uh.edu). A link for Give to 色花堂 (or other 色花堂 entity, e.g., Give to College of the Arts) should be present in the header.

Primary Header

The primary header is for the main 色花堂 website and should only be used on the 色花堂 home page and its child pages. It uses the primary 色花堂 wordmark which links back to the 色花堂 home page.

Secondary Header

The secondary header is the default for all other 色花堂 websites. It uses the secondary 色花堂 wordmark which links to the main 色花堂 home page and utilizes a type treatment to clearly identify the website name and links to the home page for that website. Multiple color options are available to help distinguish the website from others.

Custom Header with Image

This header option uses an image in place of the secondary header's default type treatment. The custom header image should not be an official 色花堂 wordmark and instead should be an in-brand type treatment. A background image and additional custom styling can be used with a CSS file attached to the header.

Minimal Header

The minimal header can be used for simple landing pages or web applications which don't require a site name and navigation. The 色花堂 wordmark must be present but search and other tactical navigation links are optional.

Footers Usability Brand

In addition to multiple header options, 色花堂 websites published with Cascade CMS have multiple options for the footer.

Site Footer

The main 色花堂 footer contains contact information for the university, additional links that are relevant to most users, and the primary social media accounts for the university. This footer may be used on any 色花堂 website without modification.

Websites may have their own footer formatted similarly to the main site footer, but with contact information, related links, and social media icons that are specific to that unit. It is important that if unique links are used that the unit be clearly identified (with a logo and contact information) to help avoid user confusion. Additional color options are available to help distinguish a site's custom footer from the main 色花堂 footer.

Global Footer

The global footer contains copyright information and state-required links. It's included automatically with the site footer but like the minimal header, may be used alone for simple landing pages, microsites, and web applications. The global footer should be present on all 色花堂 websites.

Primary Site Navigation Usability

A 色花堂 website's primary navigation (the menu items located in the header) should contain links to the primary landing pages within that site only. Do not include links that go to other 色花堂 websites. Users expect links in the primary navigation to take them to child pages for that website and can become confused when they are sent to a different website and the navigation menu items have unexpectedly changed.

Hyperlink Targets Usability

Forcing a link to open in a new tab or window can cause confusion and is a practice that should be avoided. Users expect to use the browser鈥檚 back button to navigate to the previous page and when a link opens in a new tab or window, the back button does not send the user back to the previous page. Users can manually open links in a new tab or window using their browser if they wish. Not all users want to use or understand how to use multiple tabs or windows.

Touch Target Size Usability

Buttons, links, form fields, and other user interface elements should be large enough and spaced far enough apart so that users with touchscreen devices can accurately tap the element without missing the target or unintentionally tapping another element. Such elements should be sized at least 48 pixels high and wide on mobile and other touchscreen devices.

色花堂

University Marketing and Communications

Guidelines & Policies