Design

Typography

Proxima Nova Regular

Proxima Nova Regular is the default typeface used for everything in all of the FanDuel applications and the website.

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Proxima Nova Bold

Proxima Nova Bold is used exclusively to indicate emphasis.

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz


Proxima Nova Regular Condensed

Proxima Nova Regular Condensed is reserved for Data chunk labels and is typically set as uppercase.

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Native

Sizes

Size 16 14 12 10
Use
  • App bar title
  • Cell title
  • Score
  • Button
  • Copy
  • Data chunk value
  • Sub cell title
  • Tab
  • Table header
  • Lineup summary
  • Sub cell description
  • Tab bar
  • Data chunk label
  • Player indicator

Web

Quick rules

Scale

Our typographic scale establishes firm ground rules. With that in mind we shouldn't deviate from sizes stated below. When implementing please use the outlined variables (e.g. $alpha, $beta).

An important point in the scale is the standard product body copy size of $zeta. This differs slightly from the editorial default of $epsilon.

The lower end of the scale $eta and $theta should ideally be used in an uppercase format.

Primary

Used for most situations across the application and editorial sites.

$alpha - 24
$beta - 22
$gamma - 20
$delta - 18
$epsilon - 16 - Editorial body
$zeta - 14 - Product body
$eta: - 12 - Uppercase
$theta - 10 - Uppercase

Extended

For edge case situations in heading area where large is required

$mega - 40
$giga - 36

Line heights

Body copy

Line heights across the application and editorial sites follow a similar scale convention to the data chunks. Body copy should never really go over 18.

E.g. 14/22, 16/24, 18/26

Headings

These should be reset to the default minimum. For instance in sketch a heading of 18 would have a line height of 22. This allows text to wrap onto two lines easily but also allows us to use spacing effectively between the heading and any potential copy or labels below them.