Typography

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.

Font Family

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>

Type Samples

Paragraph

Five jumping wizards hex bolty quick

Paragraph, Large
scss-mixin: luci-body-text-lg()
font-size: 24px
line-height: 1.5
font-weight: 400

Five jumping wizards hex bolty quick

Paragraph
scss-mixin: luci-body-text-md()
font-size: 16px
line-height: 1.5
font-weight: 400

Five jumping wizards hex bolty quick

Paragraph, Small
scss-mixin: luci-body-text-sm()
font-size: 14px
line-height: 1.5
font-weight: 400

Headings

Five jumping wizards hex bolty quick

Level 1 Heading
scss-mixin: luci-level-1-heading()
font-size: 52px
line-height: 1.3
font-weight: 300

Five jumping wizards hex bolty quick

Level 2 Heading
scss-mixin: luci-level-2-heading()
font-size: 40px
line-height: 1.3
font-weight: 400

Five jumping wizards hex bolty quick

Level 3 Heading
scss-mixin: luci-level-3-heading()
font-size: 32px
line-height: 1.3
font-weight: 400

Five jumping wizards hex bolty quick

Level 4 Heading
scss-mixin: luci-level-4-heading()
font-size: 24px
line-height: 1.3
font-weight: 600
Five jumping wizards hex bolty quick
Level 5 Heading
scss-mixin: luci-level-5-heading()
font-size: 20px
line-height: 1.3
font-weight: 600
text-transform: uppercase
Five jumping wizards hex bolty quick
Level 6 Heading
scss-mixin: luci-level-6-heading()
font-size: 18px
line-height: 1.3
font-weight: 600

Font Weights

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

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

52px

$luci-font-size-h2

40px

$luci-font-size-h3

32px

$luci-font-size-h4

24px

$luci-font-size-h5

20px

$luci-font-size-h6

18px