Design &
Pattern Library

TYPOGRAPHY

This is Playfair Display. Our <h1>

Playfair is a transitional design. In the European Enlightenment in the late 18th century, broad nib quills were replaced by pointed steel pens as the popular writing tool of the day. Together with developments in printing technology, ink, and paper making, it became to print letterforms of high contrast and delicate hairlines that were increasingly detached from the written letterforms.

This design lends itself to this period, and while it is not a revival of any particular design, it takes influence from the designs of John Baskerville and from ‘Scotch Roman’ designs.

Meet Roboto Condensed the supporting font for <h2>,<h3>,<h4>,<h5>,<h6>.

Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.

Typescale

Typescale is based on 1.333 – Perfect Fourth.

Heading One

4.209em/67.34px

Heading Two

3.157em/50.52px

Heading Three

2.369em/37.90px

Heading Four

1.777em/28.43px

Body

1.125em/18.00px

Paragraphs

The default body text is 16px. For optimum reading length, the paragraph width is capped at 635px.

Main Section Title

Sub-section title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.