BrandKit
GitHub
Github
Introduction
Logo
Color
Typography
Overview
Type Scale
Composition
Exchange Icons
Icons
Key Imagery

Typography

The Celo fonts were intentionally chosen to speak to Celo’s Approachable and Academic brand principles. To honor both energies and compliment a broader range of expression, a serif and a sans serif font were chosen.

Typefaces
Celo uses open-source fonts in order for community members to download, build, and design Celo branded material. Refer to the
philosophy
and guidelines below when building a project on Celo

This is Garamond, the Celo brand typeface.

EB Garamond represents our Academic brand principle described as timeless and professional. It is an appropriate formal visual tone for education and declaration. Use EB Garamond for the majority of titles and paragraphs
Download

This is Jost*, our supporting font.

Jost*’s geometric form functions as an approachable compliment to EB Garamond. It is used more sparingly and speaks to the typography found in the logo and the round shapes in the illustrations. Use Jost* for call to actions, diagrams, instructions, and infographics.
Download

Type Scale

For typographic hierarchy, we recommend the following type scale.
Heading One
EB Garamond • Regular
48px / 56px
Heading Two
EB Garamond • Regular
40px / 48px
Heading Three
Jost • Book
24px / 28px
Heading Four
EB Garamond • Regular
28px / 36px
Heading Five
Jost • Medium
20px / 24px
Heading Six
Jost • Medium
16px / 18px
Body
EB Garamond • Regular
20px / 28px
Small
EB Garamond • Regular
16px / 20px
Usage Examples

Main Title

Article Title

Section Title

Subtitle / larger text that is one size larger than the body, lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Sub-section Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec leo lorem. Donec in ligula vitae leo suscipit hendrerit. Vivamus commodo felis id nisi semper, ut pellentesque nunc sollicitudin. Nam at ligula lacus. Pellentesque lacinia justo feugiat, maximus nisi nec, venenatis neque. Aliquam tempor nec diam sed lobortis. Nam fringilla tempus posuere.
Sub-section Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec leo lorem. Donec in ligula vitae leo suscipit hendrerit. Vivamus commodo felis id nisi semper, ut pellentesque nunc sollicitudin. Nam at ligula lacus. Pellentesque lacinia justo feugiat, maximus nisi nec, venenatis neque. Aliquam tempor nec diam sed lobortis. Nam fringilla tempus posuere.