Our families of web fonts are available for use on any ucsb.edu sub-domain (ex: subdomain.ucsb.edu). Utilizing them will create more consistency and familiarity as users navigate across UC Santa Barbara websites. The web fonts are centrally hosted and can be used with any content management system.

Available Font Styles

Avenir

  • avenir-light (100)
  • avenir-light-oblique (100, italic)
  • avenir-book (200)
  • avenir-book-oblique (200, italic)
  • avenir-roman (300)
  • avenir-oblique (300, italic)
  • avenir-medium (400)
  • avenir-medium-oblique (400, italic)
  • avenir-heavy (500)
  • avenir-heavy-oblique (500, italic)
  • avenir-black (600)
  • avenir-black-oblique (600, italic)

Produkt

  • produkt-thin (100)
  • produkt-extra-light (200)
  • produkt-light (300)
  • produkt-regular (400)

Embedding Fonts

To embed the fonts into a webpage, simply copy this code into the <head> of your HTML document.

<link href="https://webfonts.brand.ucsb.edu/webfont.min.css" rel="stylesheet">

Specify in CSS

Now that your HTML document have access to the fonts, you can use them to style your text.
In your style sheets, apply the attributes:

font-family
font-weight
font-style

All three attributes are necessary to get the font working in all browsers. 
 

.avenir-light {
  font-family:Avenir, "Century Gothic", sans-serif; 
  font-weight:100; 
  font-style:normal;
}

.avenir-black-oblique {
  font-family:Avenir, "Century Gothic", sans-serif; 
  font-weight:600; 
  font-style:italic; 
}

.produkt-thin {
  font-family:Produkt, serif; 
  font-weight:100; 
  font-style:normal;
}

Changing Font Weight and Italics

We suggest using the numerical font-weight value (Avenir: 100-600, Produkt: 100-400).

You can italicize Avenir text by changing the font-style attribute to font-style:italic.

Usage Guidelines

Avenir, our primary typeface, is recommended for all body copy, subheads, and headlines. The default styles for Avenir should be as follows:

Normal text:

body {
 color: #3d4952;
 font-family: Avenir, "Century Gothic", sans-serif;
 font-weight: 200;
 font-style: normal;
 font-size: 16px;
}

 

Headings:

h1 { font-family: Avenir, "Century Gothic", sans-serif; font-weight: 600; font-size: 38px; letter-spacing: -0.1pt; }

 

h2 { font-family: Avenir, "Century Gothic", sans-serif; font-weight: 600; font-size: 27px; letter-spacing: -0.1pt; margin: 26px 0 10px 0; }

 

h3 { font-family: Avenir, "Century Gothic", sans-serif; font-weight: 600; font-size: 21px; margin: 20px 0 10px 0; }

 

h4 { font-family: Avenir, "Century Gothic", sans-serif; font-weight: 600; font-size: 16px; margin: 16px 0 8px 0; }

 

h5 { font-family: Avenir, "Century Gothic", sans-serif; font-weight: 600; font-size: 12px; text-transform: uppercase; }

 

h6 { font-family: Avenir, "Century Gothic", sans-serif; font-weight: 400; font-size: 12px; text-transform: uppercase; }

 

 

Produkt is our secondary typeface. Produkt should primarily be used in large headlines and quotes.

 

Display Extra Large

68px weight 200

 

Display Large 

50px weight 300

 

Display Medium 

48px weight 300

 

Display Small 

28px weight 300

Accessibility

The University of California Information Technology Accessibility Policy requires compliance with the WCAG 2.0 level AA standards for all web-based information. Our Digital Color Palette meets the AA standard on normal (14 to 18px) text. You should check the color contrast ratio when you put text over colored background. We recommend use of the following accessibility checking tools to ensure that your sites meet the AA standard before launch.

Color contrast checker: https://webaim.org/resources/contrastchecker/

Siteimprove: http://siteimprove.ucop.edu

For more information about the University's Accessibility initiative, visit https://www.ucop.edu/electronic-accessibility/index.html