Spacing

Guidelines

Last updated: June 2017

A clear information hierarchy is pivotal to the legibility of a page. With that in mind it’s incredibly important we have a robust and flexible spacing system that supports our typography and wider components.

These guidelines are here to help facilitate the spacing across our products without being too prescriptive at a base level. Each component or module should reference this system and stay true to the baseline grid.

All spacing across FanDuel should be divisible by 8. Simple, right? OK there’s some more to it than that but at its core everything comes back to that.

Going into a bit more detail we have a single core guideline:

All viewports use a base spacing of 16, with the option of increasing to 24 and 48 as appropriate.

Context, not screens

With the previous guidelines in mind it’s also important not to think solely about the size of a screen but rather the context of which the component or module will be placed and used.

Friends Mode as an example is a view comprised of three unique sections, contest, activity, and leaderboard. On desktop each column only occupies 13 of the screen width and therefore makes sense for components or modules to use the small screen spacing.

In a situation that didn’t follow this rule, perhaps one large content card that takes up the whole screen, we would employ a larger context spacing increasing from 16 to 24.

Now, these guidelines refer to the inner workings of a component/module within the context of a page, page layouts themselves should always follow the 16/24 rule where possible with a maximum width of 1400. For more information see the cards documentation.

Small viewport spacing

Horizontal

Horizontal spacing is crucial in ensuring that all content is aligned correctly. To ensure equal spacing and alignment we have applied 16 margins to the left and right screen edge while the vertical spacing between a component/module is also set at 16.

Vertical

Vertical spacing between a component/module is set at 16 in order to ensure a clear visual seperation between each.

Inside a component/module

A component/module on small screen has 16 padding all round in order to ensure good readability and seperation of contnet on screen. The content within a component/module will define the height of each individual area without the need for additional margin or padding. For more information see the cards documentation.

Large viewport spacing

Horizontal

Horizontal spacing on larger screens is determined by the relationship of each individual component/module. Unrelated components/modules such as side navigation or promotional modules have 48 vertical spacing between them and any other content, creating a clear seperation. A good example of this is friends mode on desktop where the content is split into 3 distinct columns and would therefore require the larger 48 margins applied between each column.

Related content that is displayed across multiple columns has a vertical spacing of 24 helping create a clear connection. An example of this is the lobby where the filters on the left are directly related to the list of contests to the right and would therefore require the smaller 24 margins.

Vertical spacing

Ensuring the correct vertical spacing between a component/module will help to visually connect/disconnect each. Unrelated components/modules have 24 vertical spacing between them and any other content. Related content that is displayed across multiple components/modules has a vertical spacing of 16 helping create a clear connection.

Desktop spacing inside a component/module

The spacing inside of a component/module is dependant on the screen space taken up by each individual component/module. If that component is only taking up a quarter of the screen as it’s just a small part of the layout as a whole? Then it makes sense to maintain the small screen margins of 16. Think less about the width of the screen itself and rather the width of the container that holds it. If that component/module is taking up 23 of the screen then it makes sense to apply the larger spacing of 24.

Rendered spacing when using type

Add space from the top of text, not the top of its bounding box

The values in this documentation refer to rendered spacing. In a text item, the top edge of the bounding box is always a few units above the top of the text (ascenders), because of leading/line-height/line spacing. Therefore, the spacing between the text box and anything above it will not be the same as the desired rendered spacing, which should be between the actual top of the text and the item above it.

Always space a text box from an item above it by making sure that the top of the text is the correct spacing value from the other item. Do not position the top of the text box to the correct spacing value from the other item.

The numbers used in this example are illustrative only. The actual values will depend on the type size and leading used.

The heading text is correctly spaced so that the top of it is 16 from the top of the card. However in this example, the top of the text box is only 11 from the top of the card. Use the value that Sketch or Zeplin gives you (in this case 11) and that will render the spacing correctly (in this case 16).

Add space from the baseline of text, not the bottom of the text

When adding space between the bottom of text and an item below it, always space from the baseline of the text, not the very bottom (descenders). By doing this, the spacing will look visually correct regardless of whether the text has any descenders.