Typography
Intro
This is Montserrat. The brand typeface.
Montserrat is the primary brand typeface for Instinthub. An elegant serif infused with a quirky warmth, this headline face projects trustworthiness, optimism, and sincerity.
The light weight sets an editorial tone while uncommon rounded corners infuse the typeface with a distinctive personality.
Nunito is our supporting font
Nunito is our workhouse typeface, carefully chosen to support Means in more functional moments. Purposefully plain, this sans-serif prioritizes legibility and balances the expressiveness of Means.
Type Scale
We follow a 8px baseline grid for achieving a vertical rhythm on all block-level elements in the app.
Headline 1
Montserrat
Regular, 44px / 48px
Headline 2
Montserrat
Regular, 36px / 43px
Headline 3
Montserrat
Regular,Semibold, 28px / 35px
Headline 4
Montserrat
Regular,Semibold, 20px / 25px
Body-1
Nunito
Bold,Semi-bold,Regular, 14px
Body-2
Nunito
Bold,Semi-bold,Regular, 16px
Body-3
Nunito
Bold,Semi-bold,Regular, 14px
Body-4
Nunito
Bold,Semi-bold,Regular, 12px
Paragraphs
The default body text is 16px. For optimum reading length, the paragraph width is capped at 635px.
Example
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.
Small meta text
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.
Helper classes
- small-meta for 14px text
- textcolor--secondary for light gray text (65% opacity)
- font-weight--bold for bold text (500 weight)
- font-weight--light for light text (300 weight)
- font-style--italic for italics text
Less variables
- @font-family-- Montserrat, Nunito
- @large-copy for 17px text
- @medium-copy for 16px text
- @small-copy for 14px text
