Typography is the cornerstone of successful design. Because the majority of LUCI’s visual design contains text, hitting the right mark for typography is a key factor in the overall usability of NetApp’s applications and online products.
Use the Source Sans Pro font family for websites and applications. Four font weights are provided to establish hierarchy, ensure legibility and create on-screen harmony.
To use the font in your product link the font stylesheet in your product's head or you can npm install the font:
<head>
...
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">
...
</head>Install with npm.
npm i -S npm-font-source-sans-pro
Copy the font files to your web server.
Import the font into your SCSS file.
@import '/my-font-directory/npm-font-source-sans-pro/source-sans-pro.scss';
Reference npm package of Source Sans Pro for additional details and support.
The mixins below include the responsive type specifications listed without the spacing rules that are defined in the long form text component.
| Mixin/outcome | < 420px | 421px to 768px | 769px + |
|---|---|---|---|
|
Level 1 Heading |
Source Sans Pro Light |
Source Sans Pro Light |
Source Sans Pro Light |
|
Level 2 Heading |
Source Sans Pro Regular |
Source Sans Pro Regular |
Source Sans Pro Regular |
|
Level 3 Heading |
Source Sans Pro Regular |
Source Sans Pro Regular |
Source Sans Pro Regular |
|
Level 4 Heading |
Source Sans Pro Semibold |
Source Sans Pro Semibold |
Source Sans Pro Semibold |
|
Level 5 Heading |
Source Sans Pro Semibold |
Source Sans Pro Semibold |
Source Sans Pro Semibold |
|
Level 6 Heading |
Source Sans Pro Semibold |
Source Sans Pro Semibold |
Source Sans Pro Semibold |
|
Paragraph, Large |
Source Sans Pro Regular |
Source Sans Pro Regular |
Source Sans Pro Light |
|
Paragraph, Medium |
Source Sans Pro Regular |
Source Sans Pro Regular |
Source Sans Pro Regular |
|
Paragraph, Small |
Source Sans Pro Regular |
Source Sans Pro Regular |
Source Sans Pro Regular |
Four font weights are provided to establish hierarchy, ensure legibility and create on-screen harmony.
| Name | Value |
|---|---|
|
|
300 |
|
|
400 |
|
|
600 |
|
|
700 |
Use size tokens in your product to align with LUCI’s typographic styles.
| Name | Value |
|---|---|
|
|
12px |
|
|
14px |
|
|
16px |
|
|
24px |
|
|
42px |
|
|
46px |
|
|
52px |
|
|
32px |
|
|
36px |
|
|
40px |
|
|
28px |
|
|
30px |
|
|
32px |
|
|
24px |
|
|
20px |
|
|
18px |
If you are unable to include an external link to Google Fonts within your site or application, you can download the font and embed it within your application or host it on an internal server.
@font-face {
font-family: 'Source Sans Pro';
src: url ('/path/to/your/font/woff2/otf/SourceSansPro-Regular.otf.woff2') format('woff2') url('/path/to/your/font/woff/otf/SourceSansPro-Regular.otf.woff') format('woff');
}You can learn more about @font-face on MDN Web Docs.
If you are using LUCI to create a content-only, marketing-focused website, you may choose to use the font Gotham instead of Source Sans Pro. To use Gotham, please visit the NetApp Brand site for instructions and support.