The Digital Strategy & Web Services Team requires that all Howard sites follow established industry standard best practices in site development, hosting, and post-launch maintenance. 

In order for a Howard constituent website to be approved to use a Howard subdomain, and therefore become an official part of the Howard web family, the following style guidelines must be met.

Colors

Color Guidelines

  • Please draw from the hex color codes provided below.
  • Slight variation for accessibility or theme reasons may acceptable, but please submit an inquiry for approval when varying color.
  • The primary colors should always be given priority. Blue should always be dominant. Red should make up no more than 25% of the color scheme.
  • Secondary colors are meant to be used as accents, such as for active and hover effects for hyperlinks, borders, etc.

Primary Color Palette

  • Blue: Hex #003A63
  • Red: Hex #E51937
  • Gray: Hex #5F6062 (variations of light and dark gray are acceptable)

Secondary Color Palette

  • Light blue: Hex #2a6ebb
  • Purple: Hex #5c3160
  • Orange: Hex #ea7125
  • Gold: Hex #c79316
  • Yellow: Hex #ffc82e
  • Dark Teal: Hex #5F6062 


The Clocktower Logo

The Clock Tower logo represents a time-honored landmark at the University, and it serves as the institutional marketing signature and primary identifier. The Clock Tower is available for usage by all offices, departments, schools and colleges at the University.

  • Obtain official logo image files from the Office of Communications. Do not use images downloaded from the web.
  • Logos may not be altered, stretched, or rearranged in any way.
  • Use the Clock tower logo preferably horizontal/landscape treatment and position in the left-hand-side of the website masthead.
  • The logo should normally serve as an active web link leading to the main university homepage at https://www2.howard.edu.  If the logo is not in the header in a way in which it can be linked in this way, then another type of link leading to https://www2.howard.edu should be added to the site header.
  • The University Seal may not be used.

Unit Signatures & Graphic Identifiers

Unit signatures consist of the primary University logo with the unit’s name to the right of the symbol. The purpose of unit signatures is to present a unified, consistent image for the University, while recognizing the individuality of each unit. They were created for use on internal and external communications pieces specific to each unit. Each official unit signature is a registered trademark and may not be altered.
 
The creation of new secondary logos is strongly discouraged. Units must obtain written permission from the Office of University Communications before development of any new graphic identifiers as well as final approval of the final design. Permission to develop a graphic identifier will be considered based on the following criteria: The unit can justify its need for external branding for marketing purposes; the unit is officially named for a donor or benefactor; the program or organization is not a legal entity of Howard University but exists to benefit a program; or the unit is a state or federal program operated by Howard University. Contact the Office of University Communications for established guidelines for the use and development of graphic identifiers.
University departments currently with approved primary or secondary logos on file with the Office of University Communications are:

  • Bison Express
  • Department of Intercollegiate Athletics
  • Howard University Bookstore
  • Howard University Hospital
  • The Andrew Rankin Memorial Chapel
  • Howard University Radio
  • Howard University Television
  • Moorland-Spingarn Research Center

Clock Tower and Unit Signature rules for use include:

  • Obtain official logo and unit signature image files from the Office of Communications.
  • Do not use Images downloaded from the web.
  • The Howard University clock tower logo and unit signatures may not be altered, stretched, or rearranged in any way.
  •  Use the clock tower logo horizontal/landscape treatment and position in the left-hand-side of the website masthead.
  • The logo should normally serve as an active web link leading to the main university homepage at https://www2.howard.edu.  If the logo is not in the header in a way in which it can be linked in this way, then another type of link leading to https://www2.howard.edu should be added to the site header.
  • The University Seal may not be used.

 


Other Style Elements

Fonts

  • Primary header font: Georgia (serif)
  • Primary body font: Open-sans (sans-serif)
  • Font-size: Site context-dependent

Font Families

  • Use font-families to define site fonts that end in “serif” and “san-serif” in case a browser does not support the above fonts.
  • “Fallback” Fonts: It is best practice when using web fonts to designate appropriate “fallback” fonts in your site’s CSS. To ensure maximum compatibility between operating systems and browsers, the font-family property should reference several font names as a “fallback” system. If the browser does not support the first font in the list, it tries the next font. Start with the font you want, and end with a generic family to let the browser pick a similar font in the generic family if no other fonts are available.
  • Recommended Font-Family Fallbacks
    • Header font-family: Georgia, ‘Serif12beta’, ‘Playfair Display’, ‘Times New Roman’, serif
      • html header tags include: h1, h2, h3, h4, h5, h6
      • Note: custom css styling that creates what appear to be header fonts should also follow these guideline

    • Body font-family: ‘Open Sans’, ‘Gill Sans’, Calibri, Arial, sans-serif;
      • html body tags include, but are not limited to: p, ol, ul, blockquote
      • Note: custom css styling that affects fonts within what appears to be text body should also follow these guidelines

Website Backgrounds

Website backgrounds should be subtle and be either a light grey or white.  A subtle background pattern can be overlayed as well.  Anything beyond that can be distracting and begin to clash with the content of the site, and so should not be used.

 


Photography

Photography use is encouraged for all Howard University communications, as appropriate. Photos should exhibit decorum consistent with the University’s values. Photography style may vary, however for most marketing, communications, positioning, and capital campaign efforts, portraying authentic subjects in a natural setting is appropriate and effective. Overly scripted/posed shots in artificial settings should generally be avoided.

Photography is an important tool for telling the Howard story. There are two elements we use to frame this story: our people and our places. Photography of people should convey the energy and emotion that makes Howard unique, while images of buildings and places should convey the strength and excellence of our institution.  Photography should always appear genuine and natural while being of professional, high-resolution quality. When using stock imagery and directing photographers, keep in mind that overly scripted/posed shots in artificial settings should generally be avoided. Images should always have a positive connotation. Metaphorical, over-exaggerated, and inauthentic imagery should not be used to represent the Howard brand.

Note: Click an image to download if you need to see a larger version.

Examples of appealing and appropriate images to use on Howard University websites.

Examples of images that should not be used on Howard University websites.