Type System

Typographic scale with pixel-perfect alignment

Type System is a general-purpose design system and stylesheet for beautiful, readable typesetting on the web. Following tried-and-true typographic principles and inspired by Robert Bringhurst, Type Systems offers smart defaults for consistently balanced hierarchy and effortless visual rhythm.

Type Scale

Aa
Aa
Aa
Aa
Aa
Aa

72 Hello

48px Hello

36px Hello

24px Hello

18px Hello

12px Hello

Measure

Using 32em as the max-width ensures line lengths never exceed roughly 66 characters, staying within the widely-regarded range of 45–75 characters.

“Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal.”

“The simplest scale is a single note, and sticking with a single note draws more attention to other parameters, such as rhythm and inflection...

In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years...

In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years...

In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years...

In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years...

Usage

Typographic styles

class description
.h0 font size 0 on the type scale
.h1 font size 1 on the type scale
.h2 font size 2 on the type scale
.h3 font size 3 on the type scale
.h4 font size 4 on the type scale
.h5 font size 5 on the type scale
.h6 font size 6 on the type scale
.xh0 font size 0 above the breakpoint
.xh1 font size 1 above the breakpoint
.xh2 font size 2 above the breakpoint
.xh3 font size 3 above the breakpoint
.xh4 font size 4 above the breakpoint
.xh5 font size 5 above the breakpoint
.xh6 font size 6 above the breakpoint
.mx sets max-width to maintain a readable measure
.bold font weight bold
.lh1 line height 1

Margin styles

class description
.mt0 margin top 0
.mt1 margin top 1 on the space scale
.mt2 margin top 2 on the space scale
.mt3 margin top 3 on the space scale
.mt4 margin top 4 on the space scale
.mt5 margin top 5 on the space scale
.mt6 margin top 6 on the space scale
.mb0 margin bottom 0
.mb1 margin bottom 1 on the space scale
.mb2 margin bottom 2 on the space scale
.mb3 margin bottom 3 on the space scale
.mb4 margin bottom 4 on the space scale
.mb5 margin bottom 5 on the space scale
.mb6 margin bottom 6 on the space scale

“White space is to be regarded as an active element, not a passive background.”

– Jan Tschichold