Skip to main content Skip to navigation

Typography

Typography is the foundation for tone, voice, and content. Comet’s typography maximizes legibility and communicates concepts clearly to enable users to enjoy discovering content.

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
The quick brown fox
The quick brown fox jumps
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog

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.
Navigation Menu