Typography is the cornerstone to a 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 success of NetApp’s applications and online products.
Use the Source Sans Pro font family for web properties and applications.
To use the font in your product link the font stylesheet in your product's head:
<head>
...
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">`
...
</head>The mixins below include the responsive type specifications listed without the spacing rules that are defined in Long Form Text.
| 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 harmony on-screen.
| 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 |
In China Google Fonts is blocked and will prevent your site or application from loading when you include the stylesheet link for Source Sans Pro.
If you need to support users in China, complete the following steps to host the Source Sans Pro font family on your site or application server:
Download the zip file for the fonts.
@font-face {
font-family: 'Source Sans Pro';
src: url ('/path/to/your/font/SourceSansPro-Regular.ttf') format('ttf');
}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.