Typography

Guidelines

Last updated: June 2017

Proxima Nova Regular

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

Proxima Nova Bold

Proxima Nova Bold is used exclusively to indicate emphasis.

Proxima Nova Regular Condensed

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

Shentox

Shentox bold is our chosen display typeface for marketing and advertising materials. Shentox can also be used on the FanDuel Apps and website but should be done so in accordance to the guidelines set.

For more information on when and where to use Shentox view our Shentox guidelines.


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

  • Product body text size is 14
  • Line height for product body is 22
  • Line height for headings are reset to 1
  • Only use bold for emphasis
  • Labels use both condensed and uppercase

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. 1422, 1624, 1826

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.

Shentox guidelines

Shentox Bold is our display typeface on the product and should be used for page, section and branded headings. Shentox bold should always be displayed in uppercase to ensure consistency and legibility. Shentox Bold helps to add character, value and importance to areas of the product.

When used excessively Shentox loses its value and becomes difficult to read and should be used sparingly.

Page and section headings

Using Shentox for page and section headings helps emphasize each section of the product and creates a clear visual hierarchy.

Do

Use Shentox for page and section headings

Branded headings and names

Using Shentox for branded headings and names helps add character, value and importance. An example of this is the FanDuel Players Club and Rewards Center where there are eleven branded levels that require impact and presence.

Do

Use Shentox for branded headings and names

Text length

Readability is compromised when using Shentox for pieces of text containing more than six or seven words.

Don't

Use Shentox for a long line of text

Scannable items

Never use for a long list of scannable items or repeated headings in a list.

Don't

Use Shentox for a long list of repeated headings

Lowercase or sentence case

Shentox should only be displayed in uppercase and never in lowercase or sentence case to ensure consistency and legibility.

Don't

Use Shentox in lowercase or sentence case

Shentox bold italic

In order to ensure consistency and legibility never use Shentox Bold Italic within the product.

Don't

Use Shentox Bold Italic