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.
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:
color: #3d4952;
font-family: Avenir, "Century Gothic", sans-serif;
font-weight: 200;
font-style: normal;
font-size: 16px;
}
Headings:
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