Typography

Our primary typeface is Untitled Sans. Designed by Klim, it maximizes normality and is devoid of distracting or uniquely identifiable features.

Bonsai calculates the proportion of the line height to the golden ratio, then uses modular arithmetic to create a rhythmic step function of type sizes.

1440 pt
Breakpoint
12
Column Grid
72 pt
Margins
42 pt
Column Size
  1. Small
    18 / 32 pt
    Regular
  2. Medium
    18 / 32 pt
    Regular
  3. Large
    18 / 32 pt
    Regular
  4. Extra Large
    18 / 32 pt
    Regular
  5. Super Large
    18 / 32 pt
    Regular

Space & Structure
Bonsai is a universal typographic system that structures visual elements based on their proportion to the size of the containing display. This system has been designed to remove every difficulty that stands in the way of communication and memorability.
Breakpoint
The size of the user’s viewport is the first metric to consider when creating a design. The breakpoint sets values for the size of the margin, the number of grid columns, and several key padding values.

This page is being viewed at the 1440 breakpoint, and all values for text and visual elements on this page will be inherited from this breakpoint.
Margin
The margin value is a cornerstone of our typographic design system, and we use it to set the rhythm for the screen’s visual space and structure.

This page has a margin value of 72. Padding values at this size will follow a visual rhythm of the margin:
1x72, 2x72, 3x72, and so on.
Grid
The grid system is established by using the margin value to set the gutter size. Column sizes are fluid, adjusting in size until the next breakpoint.

This breakpoint uses a 12 column grid. The margin width is 72 pt, so gutter is set to 72 pt. Column widths are fluid and currently measure 42 pt.
Padding
Padding between large visual elements is created by using multiples of the margin value. This creates a universal, visual rhythm for screens of all sizes.

The margin value for this breakpoint is 72. The margin value is multiplied to get the padding sizes we use at this breakpoint: 144 (2x), 216 (3x), and 288 (4x).
Typography
Every difficulty standing in the reader’s way means a loss of quality in communication and memorability. Bonsai provides type size and spacing that will retain legibility and visual integrity for reading experiences on screens of any size.
Line Height
Line-height establishes the general size of a typographic element’s container and drives calculation of the font-size.
Font Size
Font sizes are derived from the line-height using a step function, creating a rigorous, mathematical type hierarchy.
Padding
To add padding between large text elements, subtract the line height of Small type by 24. For small text, subtract by 16.
Baseline
Arrange typographic elements using their container size and avoid the tedious process of aligning text elements using the baseline.