⌨️ Monospace Fonts Guide

Monospace fonts (фіксованої ширини) critical для displaying code, data tables, terminal output, та technical content. На відміну від proportional fonts (де "i" вужче ніж "m"), monospace fonts have equal character width, забезпечуючи perfect alignment та readability для structured data. Цей guide охоплює selecting, implementing, та optimizing monospace typography для mushroom education website.

📚 Why Monospace Fonts Matter

✅ Perfect Alignment

Code indentation, ASCII art, tables align perfectly коли characters однакової width

// Perfect alignment let psilocybin = 0.63; // % let psilocin = 0.60; // % let baeocystin = 0.025;// %

✅ Improved Readability

Легше distinguish symbols: l, I, 1, O, 0 з features як slashed zeros

// Easy to distinguish: let I = 1; // Capital I vs number 1 let O = 0; // Capital O vs zero 0

✅ Professional Appearance

Signals technical content, increases trust у scientific/educational contexts

✅ Consistent Spacing

Character counting, column alignment reliable для data presentation

🏆 Top Monospace Font Recommendations

1. Fira Code (⭐⭐⭐⭐⭐ Recommended)

// Fira Code - Modern Programming Font const cultivate = () => { console.log("Psilocybe cubensis"); return spores !== undefined && temperature >= 24; }; // Features: Ligatures (== => != <=) for better readability

Fira Code Features:

  • ✅ Programming ligatures: ==, =>, != display as single glyphs
  • ✅ Free та open-source (SIL Open Font License)
  • ✅ Excellent readability at small sizes (12-14px)
  • ✅ Weights: Light, Regular, Medium, Bold
  • ✅ Широка language support (Latin, Cyrillic)
  • ✅ Active development та updates

Best for: Code blocks, JSON/API responses, configuration files

Download: github.com/tonsky/FiraCode

2. JetBrains Mono

// JetBrains Mono - Developer-Focused function calculateDosage(weight_kg, intensity) { const base = intensity === 'light' ? 1.0 : 2.5; return base * (weight_kg / 70); // Normalized to 70kg } // Increased letter height (taller x-height) for reduced eye strain

JetBrains Mono Features:

  • ✅ Large x-height: Improved readability
  • ✅ Letter forms designed для prolonged coding sessions
  • ✅ Ligatures available (optional)
  • ✅ 8 weights (Thin до ExtraBold)
  • ✅ Free under Apache 2.0 license

Best for: Long code files, IDE integration, documentation

3. Source Code Pro

// Source Code Pro - Adobe's Professional Monospace class MushroomSpecies { constructor(name, potency) { this.name = name; this.psilocybin = potency; // mg per gram dry } } // Clean, neutral design. Works everywhere.

Source Code Pro Features:

  • ✅ Adobe quality: Professional design
  • ✅ Neutral appearance: Doesn't distract
  • ✅ 7 weights (ExtraLight до Black)
  • ✅ No ligatures: Traditional monospace
  • ✅ Excellent hinting для screen rendering

Best for: Terminals, logs, data tables, universal compatibility

Comparison Table:

Font Ligatures Weights x-Height License Best Use Case
Fira Code ✅ Yes 4 Medium SIL OFL (Free) Modern code з symbols
JetBrains Mono ✅ Optional 8 Large Apache 2.0 (Free) Long coding sessions
Source Code Pro ❌ No 7 Medium SIL OFL (Free) Traditional, universal
Consolas (Windows) ❌ No 2 Medium Proprietary (Pre-installed) Default fallback
Monaco (macOS) ❌ No 1 Medium Proprietary (Pre-installed) macOS fallback
Courier New ❌ No 2 Small Universal Final fallback

💻 Implementation Guide

1. Loading Web Fonts:

<!-- Google Fonts (Fira Code via CDN) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;700&display=swap" rel="stylesheet">

<!-- OR Self-Hosted (Better Performance) -->
@font-face {
  font-family: 'Fira Code';
  src: url('/fonts/FiraCode-Regular.woff2') format('woff2'),
       url('/fonts/FiraCode-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Avoid FOIT */
}

2. CSS Font Stack (з Fallbacks):

/* Comprehensive monospace stack */
:root {
  --font-mono: 'Fira Code', 'JetBrains Mono', 'Source Code Pro', 
               Menlo, Monaco, Consolas, 'Courier New', monospace;
}

/* Apply до code elements */
code, pre, kbd, samp, .code-block {
  font-family: var(--font-mono);
  font-variant-ligatures: common-ligatures; /* Enable ligatures */
}

/* Inline code */
code {
  font-size: 0.9em;
  background: #2d3748;
  color: #68d391;
  padding: 0.2em 0.4em;
  border-radius: 4px;
}

/* Code blocks */
pre {
  font-size: 14px;
  line-height: 1.6;
  padding: 20px;
  background: #2d3748;
  border-radius: 8px;
  overflow-x: auto;
}

pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

3. Syntax Highlighting з Monospace:

<!-- Prism.js Syntax Highlighting -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>

<!-- Usage -->
<pre><code class="language-javascript">
// Psilocybin pharmacokinetics calculator
function calculatePeakTime(dose_mg, metabolismRate) {
  const absorptionRate = 0.5; // hours
  return absorptionRate + (dose_mg / metabolismRate);
}
</code></pre>

<!-- Custom theme з Fira Code -->
<style>
code[class*="language-"],
pre[class*="language-"] {
  font-family: 'Fira Code', monospace;
  font-size: 14px;
  line-height: 1.6;
}
</style>

📊 Використання для Data Tables

Mushroom Species Potency Data:

Species Psilocybin Psilocin Baeocystin Total ----------------------------------------------------------------- P. cubensis 0.63% 0.60% 0.025% 1.26% P. azurescens 1.78% 0.38% 0.35% 2.51% P. cyanescens 0.85% 0.36% 0.30% 1.51% P. semilanceata 0.98% 0.02% 0.36% 1.36% P. tampanensis* 0.68% 0.32% N/A 1.00% * = Sclerotia (truffles) measurements

CSS для Tabular Data:

.data-table {
  font-family: 'Fira Code', monospace;
  font-size: 14px;
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  overflow-x: auto;
  white-space: pre; /* Preserve spacing */
  line-height: 1.8;
}

🎨 Styling Best Practices

Font Size

  • Inline code: 0.9em (slightly smaller ніж body)
  • Code blocks: 14-16px absolute
  • Terminal output: 13-14px
  • Data tables: 12-14px

Line Height

  • Code blocks: 1.5-1.7 (readability)
  • Dense data: 1.3-1.4 (compact)
  • Avoid: < 1.2 (cramped)

Color Contrast

  • Dark theme: Light text (#e2e8f0) на dark bg (#2d3748)
  • Light theme: Dark text (#2d3748) на light bg (#f7fafc)
  • WCAG AA: 4.5:1 contrast minimum

Ligatures

  • Enable: Для code (font-variant-ligatures: common-ligatures)
  • Disable: Для data/logs
  • User preference: Consider toggle

⚡ Performance Optimization

1. Subset Web Fonts:

/* Load only Latin characters (reduce file size) */
@font-face {
  font-family: 'Fira Code';
  src: url('/fonts/FiraCode-subset.woff2') format('woff2');
  unicode-range: U+0020-007F; /* Basic Latin only */
}

2. Font Display Strategy:

@font-face {
  font-family: 'Fira Code';
  src: url('/fonts/FiraCode.woff2') format('woff2');
  font-display: swap; /* Show fallback immediately, swap when loaded */
}

/* Alternative: Optional (3s timeout) */
font-display: optional; /* Don't swap if takes > 100ms */

3. Preload Critical Fonts:

<!-- Preload monospace font for above-fold code -->
<link rel="preload" 
      href="/fonts/FiraCode-Regular.woff2" 
      as="font" 
      type="font/woff2" 
      crossorigin>

✅ Monospace Font Checklist

Implementation Checklist:

  • ☐ Selected primary monospace font (Fira Code recommended)
  • ☐ Defined complete fallback stack
  • ☐ Self-hosted fonts (або CDN з reliable provider)
  • ☐ Set font-display: swap для web fonts
  • ☐ Applied до: <code>, <pre>, <kbd>, <samp>
  • ☐ Appropriate font-size (14-16px для blocks)
  • ☐ Line-height 1.5-1.7 для readability
  • ☐ High contrast color scheme
  • ☐ Syntax highlighting integrated (Prism.js або Highlight.js)
  • ☐ Tested на різних browsers/devices
  • ☐ Ligatures enabled (якщо Fira Code або JetBrains Mono)
  • ☐ Performance optimized (subsetting, preloading)