CoinGecko Brand Guidelines
  • Introduction
    • 📗Overview
    • 💚Purpose
  • Visual Identity
    • 🦎Logo
      • Logotype
      • Symbol
      • Combination Mark
    • 🏳️‍🌈Color
      • Core Brand Colors
      • Secondary Colors
      • Accent Colors
      • Semantic Colors
      • Neutrals
      • Tints & shades
    • 🔤Typography
      • Primary Typeface
      • Monospace Typeface
      • Hierarchy
      • Typesetting CoinGecko
      • Substitute Typefaces
      • Do-Nots
    • 🖌️Style
      • Layout Grids
      • Corner Radii
      • Effects
      • Spacing Units
    • 💃Motion
    • ➡️Iconography
      • System Icons
      • Product Icons
  • Verbal Identity
    • 📖Brand Narrative
      • Vision & Mission
      • Brand Pillars
      • Personality
      • Audiences
      • Sample Messaging
    • 🧑‍🎤Voice
    • 🎵Tone
    • 🔣Style
      • Numerals
      • Capitalization
      • Punctuation
      • Formatting
      • Emoji
      • Currency
      • Spelling
  • Touchpoints
    • 📱Digital & Social Media
      • App Icon
      • Avatars
  • Resources
    • ⚒️Brand Kit
    • ✍️Attribution Guide
Powered by GitBook
On this page
  • Overview
  • Usage
  • Character Variants
  • Tabular Numbers
  1. Visual Identity
  2. Typography

Primary Typeface

PreviousTypographyNextMonospace Typeface

Last updated 1 year ago

Overview

Inter (V4) is the typeface we use as our primary brand typeface. Here’s an excerpt from the official Inter website that explains why it’s the perfect font for CoinGecko:

“Inter is a workhorse of a typeface carefully crafted & designed for a wide range of applications, from detailed user interfaces to marketing & signage.

The Inter typeface family features over 2000 glyphs covering 147 languages.”

When using Inter V4, we should ideally utilize the variable font file version within applications whenever possible. This is important for performance reasons and avoids having to load & serve many different individual font files.

Download Inter (V4) from the

Usage

When using Inter V4, we should ideally utilize the variable font file version within applications whenever possible. This is important for performance reasons and avoids having to load & serve many different individual font files.

Recommended type settings

Line Height

Set leading (line spacing / line height) between 120–150%. The general rule of thumb is:

  • Display: 120%

  • Headlines: 130%

  • Subtitles: 140%

  • Body Copy: 150%

Letter Spacing

Set tracking (letter spacing) to:

  • Display: -1% (-0.01em)

  • Headlines: -2% (-0.02em)

  • Subtitles: -1% (-0.01em)

  • Body Copy: 0%

Set font-weights to:

  • Display: Bold (700)

  • Headlines: Bold (700)

  • Subtitles: SemiBold (600)

  • Body Copy: Regular (400)

For Display & Heading styles, avoid long sentences. If your text is longer than 15 words, it's probably best to use another type style.

Default to lowercase & sentence case. Use title case only if required and avoid all caps.

Never use fully justified. Avoid hyphenating text where possible.

Character Variants

We turn on a few of the special characters variants within the font to help our usage of Inter stand out and fit our brand aesthetic.

Reach out to someone from the CG design team if if you’re having trouble enabling any of the specified character variants.

Tabular Numbers

Due to the nature of our product which display lots of numerical data in tabular format, we highly recommend the use of tabular numbers (tnum) within the Inter V4 typeface for:

  • Easy scanning

  • Neater UI

  • Uniform column widths.

If table column widths become too wide, we recommend adding a -3% (-0.03em) letter spacing property to ensure good readability while maintaining the other benefits offered by tabular numbers.

🔤
official site