Effective October 2024, we will retire Avenir as our primary web typeface. In its place, we will adopt Nunito Sans, a Google font, specifically for web usage. Please note that Avenir will remain our primary typeface for print and other communications.
Are you currently using Avenir on your websites? Here’s how to switch to Nunito Sans.
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
Nunito Sans (Sans Serif)
- sans-serif-light: 300 (fmr. avenir-light: 100)
- sans-serif-book: 400 (fmr. avenir-book: 200)
- sans-serif-roman: 500 (fmr. avenir-roman: 300)
- sans-serif-medium: 600 (fmr. avenir-medium: 400)
- sans-serif-heavy: 700 (fmr. avenir-heavy: 500)
- sans-serif-black: 800(fmr. avenir-black: 600)
Italic fonts are available for each weight.
Produkt (Serif)
- 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 has 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.
.sans-serif-light {
font-family:"Nunito Sans", sans-serif;
font-weight:300;
font-style:normal;
}
.sans-serif-black-italic {
font-family:"Nunito Sans", sans-serif;
font-weight:800;
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 (Nunito Sans: 300-800, Produkt: 100-400).
You can italicize Nunito Sans text by changing the font-style attribute to font-style:italic.
Usage Guidelines
Nunito Sans, our primary typeface, is recommended for all body copy, subheads, and headlines. The default styles for Nunito Sans should be as follows:
Normal text:
color: #3d4952;
font-family: "Nunito Sans", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
}
Headings:
h2 { font-family: "Nunito Sans", sans-serif; font-weight: 800; font-size: 27px; letter-spacing: -0.1pt; }
h3 { font-family: "Nunito Sans", sans-serif; font-weight: 800; font-size: 21px; }
h4 { font-family: "Nunito Sans", sans-serif; font-weight: 800; font-size: 16px; }
h5 { font-family: "Nunito Sans", sans-serif; font-weight: 800; font-size: 12px; }
h6 { font-family: "Nunito Sans", sans-serif; font-weight: 600; font-size: 12px; }
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
Switching from Avenir to Nunito Sans on your website
UCSB Web Theme site
If your site uses the UCSB Web Theme framework, you're all set! The framework's CSS has already been updated to replace Avenir with Nunito Sans. If your site includes custom CSS or modules that reference the Avenir font, please follow the steps below.
- Ensure your site is using the correct CSS CDN: https://webfonts.brand.ucsb.edu/webfont.min.css
- In your site folder, perform a case-insensitive search for the term "avenir" using "Find in Folder"
- If your site uses Asset Injector module, check the CSS there as well
- Update the Avenir font references with the corresponding Nunito Sans equivalents:
- avenir-light: 100 -> sans-serif-light: 300
- avenir-book: 200 -> sans-serif-book: 400
- avenir-roman: 300 -> sans-serif-roman: 500
- avenir-medium: 400 -> sans-serif-medium: 600
- avenir-heavy: 500 -> sans-serif-heavy: 700
- avenir-black: 600 -> sans-serif-black: 800
Example - CSS
-- Before --
body {color: #3d4952;
font-family: Avenir, "Century Gothic", sans-serif;
font-weight: 200;
font-style: normal;
font-size: 1.6rem;
margin-top: 0;
line-height: 2.3rem;
}
-- After --
body {color: #3d4952;
font-family: "Nunito Sans", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 1.6rem;
margin-top: 0;
line-height: 2.3rem;
}
Example - SASS
-- Before --
(/themes/mytheme/scss/_default-variables.scss)
$avenir-font-stack: Avenir, "Century Gothic", sans-serif;
$avenir-light: 100;
$avenir-book: 200;
$avenir-roman: 300;
$avenir-medium: 400;
$avenir-heavy: 500;
$avenir-black: 600;
$sans-serif: $avenir-book;
(/themes/mytheme/scss/_overwrite.scss)
body {
color: $lightgray-darken-60;
font-family: $avenir-font-stack;
font-weight: $sans-serif;
font-style: normal;
font-size: $base-font-size;
margin-top: 0;
line-height: 2.3rem;
}
-- After --
(/themes/mytheme/scss/_default-variables.scss)
$sans-serif-font-stack: "Nunito Sans", sans-serif;
$sans-serif-light: 300;
$sans-serif-book: 400;
$sans-serif-roman: 500;
$sans-serif-medium: 600;
$sans-serif-heavy: 700;
$sans-serif-black: 800;
$sans-serif: $sans-serif-book;
(/themes/mytheme/scss/_overwrite.scss)
body {
color: $lightgray-darken-60;
font-family: $sans-serif-font-stack;
font-weight: $sans-serif;
font-style: normal;
font-size: $base-font-size;
margin-top: 0;
line-height: 2.3rem;
}
Questions or need assistance? Please contact webtheme@brand.ucsb.edu.