Typography

CF2 uses a modular type scale with configurable fonts, weights, and sizes.

Type Scale

The type scale uses a ratio (default: 1.333 - Perfect Fourth) to calculate sizes:

Size	Headline	Subheadline	Content
`xl`	ratio^4	ratio^3	ratio^2
`l`	ratio^3	ratio^2	ratio
`m`	ratio^2	ratio	1 (base)
`s`	ratio	1	1/ratio

Example with 1.333 ratio and 16px base:

Content M: 16px
Content L: ~21px (16 * 1.333)
Headline M: ~28px (16 * 1.333^2)
Headline XL: ~50px (16 * 1.333^4)

Font Families

Category	Purpose	Example
Headline Font	Primary headings	Montserrat, Poppins
Subheadline Font	Secondary headings	Open Sans, Lato
Content Font	Body text	Open Sans, Roboto

Font Weights

Value	Name
`400`	Regular
`500`	Medium
`600`	SemiBold
`700`	Bold
`800`	ExtraBold
`900`	Black

Usage in JSON

JSON

{
  "type": "Headline/V1",
  "selectors": {
    ".elHeadline": {
      "attrs": {
        "data-style-guide-headline": "xl",
        "style": {
          "font-size": 48,
          "font-weight": "700",
          "font-family": "\"Montserrat\", sans-serif",
          "line-height": 120,
          "letter-spacing": 0
        }
      },
      "params": {
        "font-size--unit": "px",
        "line-height--unit": "%",
        "letter-spacing--unit": "px"
      }
    }
  }
}

Line Height

Line-height uses %: Always use percentage values (e.g., 120, 150) with "line-height--unit": "%"

Tight 110-120%

Normal 140-150%

Relaxed 160-180%

Overriding Styleguide

To use custom typography values instead of styleguide defaults:

JSON

{
  "selectors": {
    ".elHeadline": {
      "attrs": {
        "data-style-guide-headline": "m",
        "style": {
          "font-size": 36,
          "color": "#1e40af"
        }
      },
      "params": {
        "style-guide-override-headline": true,
        "font-size--unit": "px"
      }
    }
  }
}