Hatch Logo
/

<Typography> Component

Type Styles


TT Commons Pro is the default type style for all text across the system. All type styles use t-shirt sizing (x-small, small, medium, large, x-large) to specify groupings of font sizes. The system was designed so that a medium display (heading) would have proper hierarchy with respective medium titles (subheadings) and paragraph styles.


Desktop and mobile type styles are typically swapped at the 768px breakpoints, but some layouts use 1024px as the breakpoint.




Type Weights

RegularTT Commons Pro Regular (350)Used for paragraph styles
BookTT Commons Pro Book (400)Used for display (heading) styles
MediumTT Commons Pro Medium (500)Used for title (subheading) styles
DemiboldTT Commons Pro Demibold (600)Used for bold paragraph styling

CSS

Code Block


:root {
  --font-weight-regular: 350;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;
  --font-family: 'TT Commons Pro', Arial, sans-serif;
}

Display (Heading) Styles


Usage of display styles should primarily be for page titles, heroes, and section titles. The largest sizes are used sparingly for aesthetic emphasis in locations such as stat cards or other large display areas.


Display/Extra Large Desktop

Display/Extra Large Mobile

Name: hatch-type-display-x-largeWeight: Book (400)Desktop

font-size: 96px
line-height: 96px

Mobile

font-size: 48px
line-height: 52px

Display/Large Desktop

Display/Large Mobile

Name: hatch-type-display-largeWeight: Book (400)Desktop

font-size: 76px
line-height: 76px

Mobile

font-size: 38px
line-height: 44px

Display/Medium Desktop

Display/Medium Mobile

Name: hatch-type-display-mediumWeight: Book (400)Desktop

font-size: 56px
line-height: 60px

Mobile

font-size: 32px
line-height: 36px

Display/Small Desktop

Display/Small Mobile

Name: hatch-type-display-smallWeight: Book (400)Desktop

font-size: 48px
line-height: 56px

Mobile

font-size: 28px
line-height: 32px

CSS

Code Block


.hatch-type-display-x-large {
font-family: var(--font-family);
margin-top: 0;
margin-bottom: 0;
color: var(--hdc-navy-900);
font-weight: var(--font-weight-regular);


font-size: 48px;
line-height: 52px;


@media (--viewport-large) {
font-size: 96px;
line-height: 96px;
}
}


.hatch-type-display-large {
font-family: var(--font-family);
margin-top: 0;
margin-bottom: 0;
color: var(--hdc-navy-900);
font-weight: var(--font-weight-regular);


font-size: 38px;
line-height: 44px;


@media (--viewport-large) {
font-size: 76px;
line-height: 76px;
}
}


h1,
.hatch-type-display-medium {
font-family: var(--font-family);
margin-top: 0;
margin-bottom: 0;
color: var(--hdc-navy-900);
font-weight: var(--font-weight-regular);


font-size: 32px;
line-height: 36px;


@media (--viewport-large) {
font-size: 56px;
line-height: 60px;
}
}


h2,
.hatch-type-display-small {
font-family: var(--font-family);
margin-top: 0;
margin-bottom: 0;
color: var(--hdc-navy-900);
font-weight: var(--font-weight-regular);


font-size: 28px;
line-height: 32px;


@media (--viewport-large) {
font-size: 48px;
line-height: 56px;
}
}



Title (Subheading) Styles


Usage of title styles should primarily be for lower level headings such as list headings, section subheadings, article headings, and other areas where a display style would be too large. Smaller sizes of titles will have unchanging font sizes across desktop/mobile layouts.


Title/Extra Large Desktop

Title/Extra Large Mobile

Name: hatch-type-title-x-largeWeight: Medium (500)Desktop

font-size: 46px
line-height: 52px

Mobile

font-size: 40px
line-height: 44px

Title/Large Desktop

Title/Large Mobile

Name: hatch-type-title-largeWeight: Medium (500)Desktop

font-size: 40px
line-height: 44px

Mobile

font-size: 36px
line-height: 40px

Title/Medium Desktop

Title/Medium Mobile

Name: hatch-type-title-mediumWeight: Medium (500)Desktop

font-size: 32px
line-height: 36px

Mobile

font-size: 32px
line-height: 36px

Title/Small Desktop

Title/Small Mobile

Name: hatch-type-title-smallWeight: Medium (500)Desktop

font-size: 26px
line-height: 32px

Mobile

font-size: 26px
line-height: 32px

Title/Extra Small Desktop

Title/Extra Small Mobile

Name: hatch-type-title-x-smallWeight: Medium (500)Desktop

font-size: 22px
line-height: 24px

Mobile

font-size: 22px
line-height: 24px

CSS

Code Block


.hatch-type-title-x-large {
font-family: var(--font-family);
margin-top: 0;
margin-bottom: 0;
color: var(--hdc-navy-900);
font-weight: var(--font-weight-medium);


font-size: 40px;
line-height: 44px;


@media (--viewport-large) {
font-size: 46px;
line-height: 52px;
}
}


.hatch-type-title-large {
font-family: var(--font-family);
margin-top: 0;
margin-bottom: 0;
color: var(--hdc-navy-900);
font-weight: var(--font-weight-medium);


font-size: 36px;
line-height: 40px;


@media (--viewport-large) {
font-size: 40px;
line-height: 44px;
}
}


h3,
.hatch-type-title-medium {
font-family: var(--font-family);
margin-top: 0;
margin-bottom: 0;
color: var(--hdc-navy-900);
font-weight: var(--font-weight-medium);


font-size: 32px;
line-height: 36px;
}


h4,
.hatch-type-title-small {
font-family: var(--font-family);
margin-top: 0;
margin-bottom: 0;
color: var(--hdc-navy-900);
font-weight: var(--font-weight-medium);


font-size: 26px;
line-height: 32px;
}


h5,
.hatch-type-title-x-small {
font-family: var(--font-family);
margin-top: 0;
margin-bottom: 0;
color: var(--hdc-navy-900);
font-weight: var(--font-weight-medium);


font-size: 22px;
line-height: 24px;
}



Paragraph (Body) Styles


Usage of paragraph styles should primarily be for section descriptions, lower level captions and list items. These styles have the largest line height to font size difference and have the lightest font weight to promote readability.

Paragraph/Extra Large Desktop

Paragraph/Extra Large Mobile

Name: hatch-type-paragraph-x-largeWeight: Regular (350)Desktop

font-size: 28px
line-height: 40px

Mobile

font-size: 28px
line-height: 40px

Paragraph/Large Desktop

Paragraph/Large Mobile

Name: hatch-type-paragraph-largeWeight: Regular (350)Desktop

font-size: 22px
line-height: 32px

Mobile

font-size: 20px
line-height: 28px

Paragraph/Medium Desktop

Paragraph/Medium Mobile

Name: hatch-type-paragraph-mediumWeight: Regular (350)Desktop

font-size: 18px
line-height: 28px

Mobile

font-size: 16px
line-height: 24px

Paragraph/Small Desktop

Paragraph/Small Mobile

Name: hatch-type-paragraph-smallWeight: Regular (350)Desktop

font-size: 16px
line-height: 24px

Mobile

font-size: 14px
line-height: 20px

Paragraph/Extra Small Desktop

Paragraph/Extra Small Mobile

Name: hatch-type-paragraph-x-smallWeight: Regular (350)Desktop

font-size: 14px
line-height: 20px

Mobile

font-size: 12px
line-height: 16px

CSS

Code Block


.hatch-type-paragraph-x-large {
font-family: var(--font-family);
margin-top: 0;
margin-bottom: 0;
color: var(--hdc-navy-900);
font-weight: var(--font-weight-regular);


font-size: 28px;
line-height: 40px;
}


.hatch-type-paragraph-large {
font-family: var(--font-family);
margin-top: 0;
margin-bottom: 0;
color: var(--hdc-navy-900);
font-weight: var(--font-weight-regular);


font-size: 20px;
line-height: 28px;


@media (--viewport-large) {
font-size: 22px;
line-height: 32px;
}
}


p,
.hatch-type-paragraph-medium {
font-family: var(--font-family);
margin-top: 0;
margin-bottom: 0;
color: var(--hdc-navy-900);
font-weight: var(--font-weight-regular);


font-size: 16px;
line-height: 24px;


@media (--viewport-large) {
font-size: 18px;
line-height: 28px;
}
}


.hatch-type-paragraph-small {
font-family: var(--font-family);
margin-top: 0;
margin-bottom: 0;
color: var(--hdc-navy-900);
font-weight: var(--font-weight-regular);


font-size: 14px;
line-height: 20px;


@media (--viewport-large) {
font-size: 16px;
line-height: 24px;
}
}


.hatch-type-paragraph-x-small {
font-family: var(--font-family);
margin-top: 0;
margin-bottom: 0;
color: var(--hdc-navy-900);
font-weight: var(--font-weight-regular);


font-size: 12px;
line-height: 16px;


@media (--viewport-large) {
font-size: 14px;
line-height: 20px;
}
}



Caption / Other Styles


Label styles are used for small text elements such as captions, eyebrows, badges, and other decorative text elements. These styles typically call out promotional content or bring users' attention to specific areas of the page/component.


Label/Extra Large Desktop

Label/Extra Large Mobile

Name: hatch-type-label-x-largeWeight: Medium (500)Desktop

font-size: 22px
line-height: 28px

Mobile

font-size: 22px
line-height: 28px

Label/Large Desktop

Label/Large Mobile

Name: hatch-type-label-largeWeight: Medium (500)Desktop

font-size: 18px
line-height: 24px

Mobile

font-size: 18px
line-height: 24px

Label/Medium Desktop

Label/Medium Mobile

Name: hatch-type-label-mediumWeight: Medium (500)Desktop

font-size: 16px
line-height: 20px

Mobile

font-size: 16px
line-height: 20px

Label/Small Desktop

Label/Small Mobile

Name: hatch-type-label-smallWeight: Medium (500)Desktop

font-size: 14px
line-height: 16px

Mobile

font-size: 14px
line-height: 16px

Label/Extra Small Desktop

Label/Extra Small Mobile

Name: hatch-type-label-x-smallWeight: Medium (500)Desktop

font-size: 12px
line-height: 12px

Mobile

font-size: 12px
line-height: 12px

CSS

Code Block


.hatch-type-label-x-large {
font-family: var(--font-family);
margin-top: 0;
margin-bottom: 0;
color: var(--hdc-navy-900);
font-weight: var(--font-weight-medium);


font-size: 22px;
line-height: 28px;
}


.hatch-type-label-large {
font-family: var(--font-family);
margin-top: 0;
margin-bottom: 0;
color: var(--hdc-navy-900);
font-weight: var(--font-weight-medium);


font-size: 18px;
line-height: 24px;
}


.hatch-type-label-medium {
font-family: var(--font-family);
margin-top: 0;
margin-bottom: 0;
color: var(--hdc-navy-900);
font-weight: var(--font-weight-medium);


font-size: 16px;
line-height: 20px;
}


.hatch-type-label-small {
font-family: var(--font-family);
margin-top: 0;
margin-bottom: 0;
color: var(--hdc-navy-900);
font-weight: var(--font-weight-medium);


font-size: 14px;
line-height: 16px;
}


.hatch-type-label-x-small {
font-family: var(--font-family);
margin-top: 0;
margin-bottom: 0;
color: var(--hdc-navy-900);
font-weight: var(--font-weight-medium);


font-size: 12px;
line-height: 12px;
}