Web Style Guide

The web style guide inherits visual identity rules from the University Style Guide. Exceptions include typography, color, writing style and accessibility, which are specific to screen media. See the University style guide for logo usage and visual brand identity guidelines. In addition to web applications, this style guide applies to official electronic university collateral, like email communication, online ads, PowerPoint presentations, etc. 

Web Templates

All new web development will be done in the UW-Green Bay Content Management System, in the designated institutional templates unless deemed otherwise necessary for the project. The visual web style guidelines that follow are automatically incorporated into the designated institutional web template.  

The goal is to maintain a uniform look and feel across the UW-Green Bay website. It is a priority to communicate to the audience that our University is a cohesive, intelligent and professional institution.  

Typography 

Headings

Heading font: 'Montserrat,' sans-serif
font-weight: bold
color: #4c4c4c
line-height: 125% 

  • Heading 1 - font-size: 36px 
  • Heading 2 - font-size: 36px  
  • Heading 3 - font-size: 28px 
  • Heading 4 - font-size: 18px 

Body Text

Body text font: ‘Helvetica Neue,' Arial, Helvetica, sans-serif
font-size: 13px
line-height: 180%
color: #292f33
margin-bottom: 15px 

Colors

Colors  Hexadecimal Value  RGB Values 
Phoenix Green  #0F5640  R: 15 G: 86 B: 64 
Old, web safe green*  #006633*  R: 0 G: 102 B: 51* 
Kelly Green  #137E3A  R: 19 G: 126 B: 58 
Bright Accent Green  #279C43  R: 39 G: 156 B: 67 
Light Accent Green  #A7C776  R: 167 G: 199 B: 118 
Dark Gray  #343434  R: 52 G: 52 B: 52 
Mid Gray  #4F4E4C  R: 79 G: 78 B: 76 
Light Gray  #EEEEEE  R: 238 G: 238 B: 238 
White  #FFFFFF  R: 255 G: 255 B: 255 

*Color deprecated – usable, but regarded as obsolete and best avoided. 

Logo Usage

See UW-Green Bay Graphic Style Guide for logo usage.

Web Writing Style

Writing Style

The goal is a writing style that engages readers in a conversation. Consider your audience. Speak directly, answer their questions and give information as concisely and clearly as possible. Avoid overwhelming readers with text. Web visitors are task-oriented – they skim and scan. Help web visitors find what they are looking for with clear subheadings, bulleted lists and numbered lists.

Editorial Style

Clarity, accuracy and consistency are critical for UW-Green Bay’s brand identity. See the complete graphic and editorial styleguide. The following is a quick-reference guide for editing style consistency on the web.

Guideline

Example of what to do

Example of what not to do

Capitalize program names
Lowercase disciplines
A UW-Green Bay Psychology degree…
Earn your degree in psychology.
A UW-Green Bay psychology degree…
Earn your degree in Psychology.
“Ph.D.” or “Professor,”
not “Dr.”
Firstname Lastname, Ph.D.
Firstname Lastname, Professor
Dr. Firstname Lastname
(confused with medical doctor)
Omit “:00” 3 p.m. 3:00 p.m.
For each list item, use consistent punctuation and sentence structure.
  • One for the money
  • Two for the show
  • Three to get ready
  • One for the money
  • The show gets two
  • To get ready, three.
Use UW-Green Bay or University of Wisconsin-Green Bay UW-Green Bay
University of Wisconsin-Green Bay

UWGB (only for limited space, social media handle, web url, email address)
UW-GB
UW – Green Bay
University of Wisconsin – Green Bay
University of Wisconsin in Green Bay
UWGB
No comma needed before the ‘and’ or ‘or’ before the last item in a series unless it provides clarification. Red, yellow and blue are primary colors. College of Arts, Humanities and Social Sciences Red, yellow, and blue are primary colors.
College of Arts, Humanities, and Social Sciences

Other Editorial Guidelines:

  • Check the spelling of every name and the title at www.uwgb.edu/directory.
  • Use single spaces after a period.
  • Commas and periods generally go within quotation marks.

Search Engine Optimization (SEO)

When writing for web, keep in mind that our audience is using Google and other online search engines to find information. It is important to make sure important search words are present in the text of the page. Page titles, headings and images with alternate text are important areas that are displayed in search engines. Successful SEO depends on identifying the words your customers really use when they search, not just the words you think they’re using. The bottom line is, write about what you know and consider the audience.

  • Make sure each page has a unique page title.
  • Use descriptive meta descriptions. This helps your resource to get indexed and also shows in search engine results.
  • Choose web addresses that are easily read by people.
    • Avoid acronyms, spell out key words
    • EG: “marketing-and-university-communication” instead of “MUC”
    • Hint: this is better for Search Engine Optimization, too
    • Note: There is an opportunity to create aliases that redirect to longer URLs
  • Be aware of link-building scams. Only link to trusted resources that enhance your content.

Accessibility

Good accessibility practices are important to make your content easier to find and your site easier to use for all users. Minimum accessibility requirements for UW-Green Bay content are listed below. For a complete list of accessibility guidelines, see the WCAG 2.0.

  • Use proper headings to help readers peruse your text (Heading 1, Heading 2, Heading 3…etc, rather than adjusting font size and boldness)
  • Use specific link text that makes the destination clear (eg. “See guidelines.” is better than “For guidelines click here.”)
  • Use the bulleted or numbered list tool (rather than typing the bullets/dashes and numbers. Watch for this when copying from word.)
  • Image alternate text – include a textual description of images
  • Avoid using image with text in them, and if you do, make sure equivalent text is available (text that has been converted to an image cannot be selected, searched, read through a screen reader, enlarged, etc.)
  • Avoid autoplay for videos, animations, audio, etc.
  • Each page needs a unique, descriptive title.
  • Make sure the reading order of your content matches the actual layout (e.g. column content reads left to right…if you stack two sets of columns to read vertically, only visual readers can see the visual correlation…search engines, mobile users, and screen readers will read right-to-left.)

User Experience (UX)

  • Use buttons sparingly, but strategically to make the goal of a page clear.
  • Do not overuse bold. If everything is bold, nothing is.
  • Keep site content up-to-date and relevant.
  • Underline is reserved for hyperlinks, do not underline web text that is not a hyperlink.
  • Consider the various screen sizes on which your users will access your content. Remember to check how your site displays on a mobile device.
  • Put time into exploring widgets to create a column layout as appropriate.
  • Be aware of incoming links to your site.
    • Communicate URL changes to campus partners who may link to your content to prevent broken links
    • Consider how users will navigate to your content. (eg. New program? Make sure it’s linked appropriately from your college site.)

Images

  • Use high resolution images that are saved for web. Image resolution should be 72dpi and sized appropriately (below 2000 pixels wide).
  • Be sure that images are not scaled disproportionately tall or wide.
  • Do not use images that are protected by copyright unless you are licensed to do so.
    • Just because images are available on the web, doesn’t mean they’re free to use.
    • The University is held liable. Each infringement can cost upwards of $10,000.
  • Contact the Office of Marketing and University Communication for photo needs.
  • Use relevant images that are representative of the programs and people at UW-Green Bay.
  • Choose images that are relevant and complementary to the content on the page.
  • Where possible, caption photos with detail and accuracy.
  • Remember to include alternate text for your images. Be descriptive. Imagine describing the image to someone who cannot see it.

Responsibility

Web contributors have a responsibility to uphold the quality and accuracy of information. Each web editor is a representative for their program and is required to complete training prior to working with the UW-Green Bay website. Web editors are accountable for ensuring compliance with these guidelines. 

  • Is it quality work that represents the excellence expected at UW-Green Bay?
  • Did you proofread your work?
  • Did you consider your audience?
  • Does it comply with these guidelines?
  • Do your changes impact campus partners who may link to your site? 

Questions?

Please send your requests through the IT Request Help or join the Web User Group