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 elememts, apply Space concepts such as Stacking as exhibited by the Long Form Text component.

Mixin Includes Outcome
text-body() Color, Family, and Line-Height Comet body text.
text-display() text-body() and Family Comet display text.
level-1-heading() text-display(), Size, and Weight Level 1 Heading
level-2-heading() text-display(), Size, and Weight Level 2 Heading
level-3-heading() text-display(), Size, and Weight Level 3 Heading
level-4-heading() text-display(), Size, Weight, and Text-Transform Level 4 Heading
level-5-heading() text-display(), Size, and Weight Level 5 Heading
link() text-body(), Text-Decoration, and 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, discuss the use of font.size.default versus font.size.small for most elements in your interface.

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.