university web style guide web - utah valley university · university marketing &...

webU N I V E R S I T Y W E B S T Y L E G U I D E

Web Logo & Graphic Standards

use this guideThis guide is to be used in conjunction with, and is a expansion of, thebranding style guide. Please refer to the branding style guide for basic guidelines.

This guide is specific to web usage. For print material, please refer to the branding style guide.

If you have questions about

University logo usage that are not

answered in this volume, do not

hesitate to contact our office.

U N I V E R S I T Y M A R K E T I N G

& C O M M U N I C A T I O N S

(801) 863-8206

Licensing Manager

(801) 863-7628

Art Director

(801) 863-6411

To view this style guide online, download applicable marks, and find additional resources, visit uvu.edu/marketing/style

Published by Utah Valley University Marketing & Communications

how to

U N I V E R S I T Y S T Y L E G U I D E 1

See the university style guide for logo color recommendations.

use this guide logosI N S T I T U T I O N A L M A R K S

MIN HEIGHT 32PX

MIN HEIGHT 32PX

MIN HEIGHT 20PX

Minimum Clear space is half of the height of the “U” within the logo represented by “X”.The recommended space is X*2 where possible or when used with other logos.

Minimum height for web ussage is listed next to the respective logos.

2 U N I V E R S I T Y S T Y L E G U I D E


MIN HEIGHT 114PX

sealU N I V E R S I T Y S E A L

Minimum Clear space is half of the height of the seal represented by “X”.

The recommended space is X*2 where possible or when used with other logos.



mascot

MIN HEIGHT 75PX

sealMinimum Clear space is half of the height of the Primary Athletic Mark represented by “X”.

The recommended space is X*2 where possible or when used with other logos.

P R I M A R Y A T H L E T I C M A R K

MIN HEIGHT 32PX



wordmarkP R I M A R Y A T H L E T I C W O R D M A R K

MIN HEIGHT 24PX

Minimum Clear space is half of the height of the “U” within the logo represented by “X”.The recommended space is X*2 where possible or when used with other logos.


wordmark

RGB: 39 93 56

COMPLEMENTARY COLOR PALETTE

#00843D#275D38

#E1523D

#0095C8

#823B34

#595478

#696158

#48A23F

#D45D00

#00BFB3

#8C8279

#78BE20

#FFB500

#86C8BC

#A7A8AA

#C5E86C

#FBDB65

#BDD6E6

#D0D0CE

RGB: 0 132 61

RGB: 225 82 61

RGB: 0 149 200

RGB: 130 59 52

RGB: 89 84 120

RGB: 105 97 88

RGB: 72 162 63

RGB: 212 93 0

RGB: 0 191 179

RGB: 140 130 121

RGB: 120 190 32

RGB: 225 181 0

RGB: 134 200 188

RGB: 167 168 170

RGB: 197 232 108

RGB: 251 219 101

RGB: 189 214 230

RGB: 208 208 206

Pantone 348Pantone 7483 (Primary)

Pantone 7625

Pantone 639

Pantone 7609

Pantone 5275

Pantone 405

Pantone 7738

Pantone 717

Pantone 3262

Pantone Warm Gray 8

Pantone 368

Pantone 7549

Pantone 564

Pantone Cool Gray 6

Pantone 374

Pantone 120

Pantone 544

Pantone Cool Gray 2

colorO F F I C I A L U N I V E R S I T Y C O L O R

PRIMARY COLOR PALETTE

#000000RGB: 0 0 0

Black

RGB: 39 93 56#275D38

Pantone 7483 (Primary)

#FFFFFFRGB: 255 255 255

White

#8E8C89RGB: 142 140 137

Pantone 8001 — web


typographyFONT STANDARDS

We require that all fonts used on the UVU site beWeb-safe fonts. See examples.

Do not underline text. Underlines should bereserved for links. Use other methods of emphasizingtext, such as bold, italics, headers, etc.

We recommend a limit of three or fewer fonts andfont colors used on any page.

We do not recommend or supportComic Sans MS, Cursive.

FONT EXCEPTIONS

To enhance and maintain the UVU marketingstandards, we have provided the use of Stratum.This font is available with these specifc guidelines:

Stratum is reserved for the official UVU header andfooter. It is not to be used as body text.

However, you can use Stratum as a headline, suchas h1-h6, as a paragraph header or a sectionheader. If you need assistance or feel you have aneed other than those described above, pleasecontact the marketing department for advice.

FONT SIZES

UVU sets the h1-h6 fonts to certain settings andthey are the recomended for university standards.

These sizes are a rounded estimate of the currentmost popular browser settings.

h1: 32pxh2: 24pxh3: 18pxh4: 15pxh5: 13pxh6: 11px

We recommend in most cases the body copy on web pages use a 14px font size, smaller fonts can be used with additive text.

I N S T I T U T I O N A L F O N T S


typographyINSTITUTIONAL PRIMARY — SANSERIF (USE IN HEADINGS) A a B b C c 1 2 3 A B C DStratum 1 Thin

A a B b C c 1 2 3 A B C DStratum 1 Light

A a B b C c 1 2 3 A B C DStratum 1 Regular

A a B b C c 1 2 3 A B C DStratum 1 Medium

A a B b C c 1 2 3 A B C DStratum 1 Black

A a B b C c 1 2 3 A B C DStratum 1 Black

INSTITUTIONAL PRIMARY – SERIF (BODY COPY)

A a B b C c 1 2 3 A a B bC cAdobe Garamond Pro, Regular and Italic

A a B b C c 1 2 3 A aB bC cAdobe Garamond Pro, Semibold and Semibold Italic

A a B b C c 1 2 3 A aB bC cAdobe Garamond Pro, Bold and Bold Italic

Inst i tut ional Secondar y (body copy)

A a B b C c 1 2 3 A B C DArial Regular, Bold and Oblique

A a B b C c 1 2 3 A B C DArial Narrow Regular, Italic, Bold and Bold Italic

SERIF FONTSGeorgia.Palatino Linotype, Book Antiqua, Palatino.Times New Roman, Times.

SANS-SERIF

Arial , Helvet ica.Arial Black, Gadget.Comic Sans MS, cursive.I m p a c t , C h a r c o a l .Lucida Sans Unicode, Lucida Grande.Tahoma, Geneva.Trebuchet MS, Helvetica.Verdana, Geneva.

MONOSPACE FONTS

Courier New, Courier.Lucida Console, Monaco.

E X A M P L E S


imagesP H O T O G R A P H Y

IMAGE DOWNLOAD INFORMATIONuvu.edu/marketing/photography


images SIZE

When using images on a page, it is best to use an imageeditor such as GIMP or Photoshop to scale the images to the final size that you want to use.

Example: If your image is 800px wide, do not resize it with HTML to <img width=”100“ height=”XXX” src=”XXXX” alt=”XXXX” />.

Scaling images down with HTML may cause loading issues. Do not stretch images to fit the container or area on a page. Images must maintain their aspect ratio.

Scaling up an image will pixelate it, or force the image to appear out of focus. Images should not be larger than the width of the current UVU Web templete.

For images that require a transparent background, it isrecomended to use .png files rather than .gif files.

Image file names should use lowercase letters, and, incases where there is a space, it is recommended to use adash or underscore.

Example: image-title.jpg or image_title.jpg

SEO (search engine optimization)

It is required that all images used on the UVU site are SEOfriendly, by setting the “alt” attribute in an “img” tag. The attribute can also be set using the “image description” field when inserting an image through OUCampus.

EXAMPLE: <img src=”imagepath/image-title.jpg” alt=”image dis-cription” width=”304” height=”228” />

SRC:the path to the file you want to use.

ALT:the text that will display if the image can’t be loaded.The alt tag is also what is read by a screen reader to help with accessibility.

TITLE:

(optional, recommended) = text that displays when a user hovers over an image or HTML tag. Web crawlers, such as Google, use “alt” and “title” attributes to pro-vide users information when they search for keywords.

NOTE: Using extra words and descriptions in the ‘alt’ and‘title’ tags can be considered a violation in some searchengines and will work against you; keep the informa-tion in these tags specific to the content to avoid issues.

Images with flattened text require properly tagged “alt” and “title” attributes.

1 0 U N I V E R S I T Y S T Y L E G U I D E

webO N L I N E P R E S E N C E

Many people interact with UVU’s brand identity through a variety of online properties, including the University’s website, search engine results, and your department’s social media accounts. It is imperative that the information they find there is clear and concise and that your use of brand images is appropriate. Whether your content is in front of or behind a login screen, please continually take inventory of how you present UVU’s brand identity, making sure that all information is up-to-date and clearly and consistently stated.

If you feel the web properties representing your department or area need assistance, please contact University Marketing & Communications who will work side-by-side with Web Development to create a web presence that is attractive while also meeting your department’s objectives.

WEB DESIGN ASSISTANCEuvu.edu/marketing/web

GETTING DIGITAL SIGNAGE ON THE WEBuvu.edu/marketing/sliders

SOCIAL MEDIA PROTOCOLuvu.edu/marketing/social

WEB COMMUNITY RESOURCESuvu.edu/web

university web style guide web - utah valley university · university marketing &...

Documents