Standardised sizing increases visual consistency in an interface.
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 to:
Increase visual consistency
Increase efficiency (fewer design choices = less code)
Make communication easier and reduce back and forth between design and engineering as the intent is clear and results are more predictable
Create a visual rhythm
If text is centred within a component (e.g. button) it’s already evenly distributed and doesn’t need to sit on the grid.
In addition to the above:
Most popular screen sizes are divisible by four, so grid columns fit the screen in the majority of use cases.
Many platforms allow users to set their preferred ‘density’, increasing or decreasing font size or whitespace in and between page elements. A 4px rule lets you scale consistently while maintaining the grid.
Touch target areas
To ensure there’s always a sufficient area for users to click or tap on interactive elements, NewsKit has a variety of component sizes (e.g. small, medium and large buttons and text inputs).
On mobile breakpoints and devices, all interactive elements should have a touch target area no less than 44px². This is the minimum standard for iOS and Android.
In most cases when there are multiple interactive elements in close proximity, make sure touch target areas are separated by enough clear space (16px) to balance information density and usability.
Sizing tokens specify sizes throughout NewsKit, such as for icons, space and minimum or maximum widths or heights. Sizing tokens also define space tokens. The available sizes are: