Typography System

Font Families

Primary Font: Inter

/* Headings and Body Text */
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

/* Weights Available */
font-weight: 200; /* Light */
font-weight: 300; /* Light */
font-weight: 400; /* Regular */
font-weight: 500; /* Medium */
font-weight: 600; /* SemiBold */
font-weight: 700; /* Bold */

Monospace Fonts

/* Technical/Code Elements */
font-family: 'Space Mono', 'Source Code Pro', monospace;

/* Navigation Elements */
font-family: 'Martian Mono', monospace;

Typography Scale

Headings

/* H1 - Main Headlines */
.heading-1 {
  font-family: 'Inter';
  font-weight: 700; /* Bold */
  font-size: 40px;
  line-height: 1.1em;
  letter-spacing: -0.04em;
}

/* H2 - Section Headers */
.heading-2 {
  font-family: 'Inter';
  font-weight: 700; /* Bold */
  font-size: 30px;
  line-height: 1.4em;
  letter-spacing: -0.04em;
  margin-bottom: 40px;
}

Typography Guidelines

Letter Spacing

  • Large Text (24px+): -0.04em for better readability

  • Medium Text (16-24px): -0.02em for optimal spacing

  • Small Text (12-16px): -0.02em to -0.03em

  • Navigation: +0.02em for technical aesthetic

Line Height

  • Headlines: 1.1em for tight, impactful spacing

  • Body Text: 1.6em for comfortable reading

  • UI Elements: 1.2-1.4em for compact layouts

FOOTER
[ CYA ]
© DEMOS. All rights reserved 2025