Skip to main content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.

Transformative Website Style Guide: Style

This guide offers practical advice on creating a transformative library website.

Color Contrast and Visibility

Color Pairs that Do Not Work Well Together

Use colors that provide enough contrast to maintain clear legibility. Here are some color pairs that you should avoid (especially when referring to a background with text):
  • Green + Purple
  • Light Green + Yellow
  • Yellow + White
  • Black + Red
  • Black + Blue
  • Black + Purple

 

Color Blocking

Color can create visual separation (think blocks). Simply adding a background color can sometimes be just enough emphasis to direct your users to the information they are looking for. Think about signage; rarely do you see words simply hanging on a wall in a building. Often there is a background color to first draw attention to the sign.

Using Hex Codes

Hexadecimal (hex) codes are a great way to specify color in your web design. By matching the color code, you can be sure that the color you are selecting is an exact match.
The first two letters/numbers refer to the red value, the next two refer to green value, and the last two refer to the blue value. These values are defined between 00 and FF (instead of from 0 to 255 in RGB).

How To Color Match

Use a browser extension (like Colorzilla) to select a color from anywhere on the page. The eyedropper tool will automatically copy the hex code for you to paste into your content management system.

Fonts

Although you will first want to keep within your brand guidelines, when considering fonts for your website note the following:
  • Remember to use a contrasting color for all text on your website.
  • Keep your fonts to 2-3 different fonts to maintain a cohesive look.

Fonts not to use and why:

Comic Sans - appears childish and informal
Courier New - low resolution
Times New Roman - narrow spacing and can appear lazy since it is typically a default font
 
There are several other fonts to avoid using, these are just a few and are dependent on context of the design.

White Space

Letting your website “breathe” will help the user find what they are looking for. Too much visual clutter can cause fatigue on both the eye and the brain. Don't be afraid to leave space between design elements. The margins act as pathways for your users and will help keep their eye moving throughout the content.