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 |
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.