Font-Family: Nevisbold, Arial, Helvetica, Sans-Serif;

University of Wisconsin-Platteville

Web Style Guide April 12, 2012

Colors


Orange
#fe7311 / 
Blue
#076bb3 / 
Dark Blue
#031523

Dark Gray
#666666 / 
Gray
#a0a0a0 / 
Light Gray
#d9d9d9 / 
White
#ffffff

Font Families

NevisBold for Large Headings
Headings that use NevisBold should always be transformed to all uppercase letters. Font weight should be “normal” because NevisBold is already a bold font. Always use letter spacing of 2px. Smaller headings do not use NevisBold. See headings CSS code for more details.
Trebuchet for Body
Trebuchet for normal body paragraphs and “small body” paragraphs should always be #424242, which is a very dark gray. The reason for this is to provide more contrast with headings to make the headings “pop” more. See body CSS code for more details.

HeadingsCSS

h1 {

font-family: nevisBold, Arial, Helvetica, sans-serif;

font-weight: normal;

text-transform: uppercase;

letter-spacing: 2px;

font-size: 24px; /* 170% FOR MOBILE */

}

h2 {

font-family: nevisBold, Arial, Helvetica, sans-serif;

font-weight: normal;

text-transform: uppercase;

letter-spacing: 2px;

font-size: 19px; /* 140% FOR MOBILE */

}

h3 {

font-family: nevisBold, Arial, Helvetica, sans-serif;

font-weight: normal;

text-transform: uppercase;

letter-spacing: 2px;

font-size: 14px; /* 100% FOR MOBILE */

}

h4 {

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-weight: bold;

text-transform: none;

letter-spacing: auto;

font-size: 14px; /* 100% FOR MOBILE */

}

h5 {

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-weight: bold;

font-style: italic;

text-transform: none;

letter-spacing: auto;

font-size: 14px; /* 100% FOR MOBILE */

}

h6 {

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-weight: normal;

text-transform: none;

letter-spacing: auto;

font-size: 14px; /* 100% FOR MOBILE */}

Headings Illustrated

Body CSS

p {
font-size: 14px; /*100% FOR MOBILE */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
color: #424242;
}

.small-body {
font-size: 10px; /* 85% FOR MOBILE */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
color: #424242;
}

Body Illustrated

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis convallis dignissim augue non faucibus. Donec ac nulla diam, at posuere felis. In aliquet nisl vitae arcu lacinia condimentum. Morbi eu odio eu sem tempus vulputate. In hac habitasse platea dictumst. Duis aliquet urna vel eros lobortis at accumsan metus pretium. Curabitur imperdiet consectetur sapien, at gravida nulla cursus vel.

Small Body Illustrated

Page 1 of 1