Newskit Logo
Newskit Logo
View Github

Foundations

Sizing

Standardised sizing provides increased visual consistency in an interface.

Principles

Flow

Consider the use of size to create a consistent visual rhythm

Proportional

Appropriately size interface elements to give more prominence to the content hierarchy

Functional

Size elements for minimum touch target areas of interactive items to improve usability

Overview

NewsKit uses a simple, standard sizing scale. The size of every UI element and the space between elements is defined by a 4px rule (or pt/rem).

All UI elements align to a 4px square baseline grid. This is to provide:

  • Increased visual consistency
  • Increased efficiency: fewer design choices, less code
  • Easier communication and reduced back and forth between design and engineering as the intent is clear and results are more predictable.
  • Visual rhythm

Text that is centered within a component e.g. a button, does not need to sit on the grid as it is evenly distributed.

Why 4px?

A 4px rule provides a good balance of choice to a designer but, crucially, 4 is also divisible and this has some significant benefits:

  • Most popular screen sizes are divisible by 4, so grid columns fit the screen perfectly more often than not.
  • Increasingly, platforms are allowing users to set their preferred ‘density’ to accommodate specific user needs. This may be increasing or decreasing font sizes or white space in and between page elements. A 4px scale allows us to scale consistently and continue to maintain the grid.

Touch target areas

To ensure that there is always a sufficient area for users to click or tap on interactive elements, there are a variety of component sizes eg. small, medium, and large buttons, text input, etc.

On mobile breakpoints and devices, all interactive elements should have a touch target area of more than 44px². This ensures that it will meet the minimum standard for iOS and Android, whilst improving the user experience.

In most cases when there are multiple interactive elements in close proximity to one another, it is recommended to make sure touch target areas are separated by enough clear space (16px), to ensure balanced information density and usability.

Sizing tokens

Sizing tokens are used to specify sizes throughout the system, such as icons, space, and minimum or maximum widths or heights. Sizing tokens are also used to define space tokens. Available sizes are outlined below:

ExampleTokenValue

Code Usage

The Component Defaults page details the different ways in which you can override and apply sizing to NewsKit components. For more advanced use cases, these values can be accessed from the theme by calling either: getResponsiveSize, emotion’s useTheme hook, or getSizingCssFromTheme.

Spacing

Considered use of space can improve communication: reducing visual clutter, providing hierarchy or helping show a relationship between elements on a screen.

Spacing

Considered use of space can improve communication: reducing visual clutter, providing hierarchy or helping show a relationship between elements on a screen.