Comet Typography

Families

Proxima Nova

Comet's primary font family is Proxima Nova, whose rounded sans-serif conveys a friendly first impression. Use varying weights to establish visual hierarchy and create contrast.

Name	Weight	Specimen
400	`normal`	Typography as Proxima Nova is the foundation for tone, voice, and content.
400 Italic	`normal`	Typography as Proxima Nova is the foundation for tone, voice, and content.
700	`bold`	Typography as Proxima Nova is the foundation for tone, voice, and content.

Droid Serif

Droid Serif is used in Discovery Education’s suite of Techbook products. Droid Serif was chosen as a modern web serif that promotes maximum legibility of long form content. While serifs allude to physical books, Droid Serif’s modern appearance softens the aesthetic to offer a fresh typeface for young, web-savvy audiences.

Name	Weight	Specimen
400	`normal`	Droid Serif is a modern serif used in Techbook.
400 italic	`normal`	Droid Serif is a modern serif used in Techbook.
700	`bold`	Droid Serif is a modern serif used in Techbook.
700 italic	`bold`	Droid Serif is a modern serif used in Techbook.

Tokens

The system provides tokens for font families for your reference and variable use.

Variable Name	Value
`$comet-font-family-display`	'Proxima Nova', Arial, sans-serif
`$comet-font-family-body`	'Proxima Nova', Arial, sans-serif
`$comet-font-family-serif`	'Droid Serif', Georgia, serif
`$comet-font-family-code`	Monaco

Hierarchy

Comet provides for a baseline of headings for creating effective hiearchy within your layouts and component designs.

These mixins omit vertical spacing that can disrupt display within tight component designs. To add vertical spacing between headings, text, and other elements, apply Space concepts such as Stacking as exhibited by the Long Form Text component.

Comet separates body typographic styles -- paragraphs and lists -- from headings. Rely on mixins text-body() and text-display() respectively.

Type Samples

The quick brown fox jumps over the lazy dog

Use for paragraphs: text-body()
Use for headings: text-display()

font-size: 1rem (16px)
line-height: 1.65 (26.4px)
font-weight: normal
color: #363c49
font-family: 'Proxima Nova', Arial, sans-serif

The quick brown fox

level-1-heading()
Extends: text-display()

font-size: 3.5rem (56px)
line-height: 1.65 (92.4px)

The quick brown fox jumps

level-2-heading()
Extends: text-display()

font-size: 2.5rem (40px)
line-height: 1.65 (66px)

The quick brown fox jumps over the lazy dog

level-3-heading()
Extends: text-display()

font-size: 1.5rem (24px)
line-height: 1.65 (39.6px)

The quick brown fox jumps over the lazy dog

level-4-heading()
Extends: text-display()

font-size: 1.125rem (18px)
line-height: 1.65 (29.7px)
font-weight: bold
text-transform: uppercase

The quick brown fox jumps over the lazy dog

level-5-heading()
Extends: text-display()

font-weight: bold

The quick brown fox jumps over the lazy dog

link()

color: $comet-color-interactive-default
text-decoration: none

Color

All text-body() and text-display() is $comet-text-color-primary-default.

Links are interactive blue on light backgrounds and white on dark backgrounds. By default, links are only underlined on hover. This is a simplified default to act as a base for components. For links appearing in prose (such as this paragraph), see Long Form Text, which modifies the default styling.

For a comprehensive list of text amd link colors for various scenarios, see Color.

Sizes

Use size tokens in your style to align with Comet's sizing of most commonly used textual elements.

In the absence of a token, consider the use of $comet-font-size-default or $comet-font-size-s for most elements in your interface.

Comet's basic typography standard avoids resizing typography responsively for different viewport sizes. For specialized components, products should consider moderating the size of very large headings on small screens.

Variable Name	Value
`$comet-font-size-rem-base`	16px
`$comet-font-size-default`	1.125rem
`$comet-font-size-s`	1rem
`$comet-font-size-paragraph`	1.125rem
`$comet-font-size-lead-paragraph`	1.5rem
`$comet-font-size-list-item`	1.125rem
`$comet-font-size-page-title`	3.5rem
`$comet-font-size-page-subtitle`	1.5rem
`$comet-font-size-header-level-1`	3.5rem
`$comet-font-size-header-level-2`	2.5rem
`$comet-font-size-header-level-3`	1.5rem
`$comet-font-size-header-level-3-subhead`	1rem
`$comet-font-size-header-level-4`	1.125rem
`$comet-font-size-header-level-5`	1rem
`$comet-font-size-button`	1.125rem
`$comet-font-size-byline`	1rem
`$comet-font-size-caption`	1rem
`$comet-font-size-code`	.875rem
`$comet-font-size-form-input`	1.125rem
`$comet-font-size-form-label`	1.125rem
`$comet-font-size-messaging`	1rem
`$comet-font-size-metadata`	.75rem
`$comet-font-size-microcopy`	1rem
`$comet-font-size-pill`	.875rem
`$comet-font-size-tab`	1.25rem
`$comet-font-size-table`	1rem
`$comet-font-size-vs`	.875rem

Web Fonts

To use Comet's font families in your web site or app:

Host comet_fonts.css within your environment.
Include <link rel="stylesheet" href="/comet/comet_assets/fonts/comet_fonts.css"> in your document's <head>.
Host the referenced web fonts that comet_fonts.css refers to.