NetApp logo
LUCI Version 4.0.0

Typography

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.

Font Stack

Use the Helvetica Neue font family for websites and applications. It’s a clear, direct, economical and universal typeface with high legibility and accessibility scores. These characteristics define its role as the typeface applied across all long-form copy for NetApp. We use two different weights of Helvetica Neue:

  1. Helvetica Neue Regular is used for all body copy and smaller details across the brand.
  2. Helvetica Neue Bold is used for body copy headings and to highlight certain words and information that needs to draw attention.

In cases where Helvetica Neue is not available, our system alternative Arial should be used.

Type Samples

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 +

luci-level-1-heading()

Level 1

Helvetica Neue Regular
42px/50px

Helvetica Neue Light
46px/55px

Helvetica Neue Light
52px/62px

luci-level-2-heading()

Level 2

Helvetica Neue Regular
32px/38px

Helvetica Neue Light
36px/43px

Helvetica Neue Light
40px/48px

luci-level-3-heading()

Level 3

Helvetica Neue Regular
28px/33px

Helvetica Neue Light
30px/36px

Helvetica Neue Light
32px/38px

luci-level-4-heading()

Level 4

Helvetica Neue Regular
24px/28px

Helvetica Neue Regular
24px/28px

Helvetica Neue Regular
24px/28px

luci-level-5-heading()

Level 5

Helvetica Neue Regular
20px/24px

Helvetica Neue Regular
20px/24px

Helvetica Neue Regular
20px/24px

luci-level-6-heading()

Level 6

Helvetica Neue Regular
18px/24px

Helvetica Neue Regular
18px/24px

Helvetica Neue Regular
18px/24px

luci-body-text-lg()

Paragraph, Large

Helvetica Neue Regular
16px/24px

Helvetica Neue Regular
20px/24px

Helvetica Neue Light
24px/28px

luci-body-text-md()

Paragraph, Medium

Helvetica Neue Regular
16px/24px

Helvetica Neue Regular
16px/24px

Helvetica Neue Regular
18px/24px

luci-body-text-sm()

Paragraph, Small

Helvetica Neue Regular
14px/21px

Helvetica Neue Regular
14px/21px

Helvetica Neue Regular
14px/21px

Font Weights

Four font weights are provided to establish hierarchy, ensure legibility and create on-screen harmony.

Name Value

$luci-font-weight-light

300

$luci-font-weight-regular

400

$luci-font-weight-semi-bold

600

$luci-font-weight-bold

700

Font Sizes

Use size tokens in your product to align with LUCI’s typographic styles.

Name Value

$luci-font-size-xs

12px

$luci-font-size-sm

14px

$luci-font-size-md

16px

$luci-font-size-lg

24px

$luci-font-size-h1-sm

42px

$luci-font-size-h1-md

46px

$luci-font-size-h1-lg

52px

$luci-font-size-h2-sm

32px

$luci-font-size-h2-md

36px

$luci-font-size-h2-lg

40px

$luci-font-size-h3-sm

28px

$luci-font-size-h3-md

30px

$luci-font-size-h3-lg

32px

$luci-font-size-h4-lg

24px

$luci-font-size-h5-lg

20px

$luci-font-size-h6-lg

18px