Typography System

Overview

The Medulla Labs website uses a Tailwind CSS-inspired typography scale with the Inter font family. This system provides consistent, professional, and highly readable text across all devices.

Font Families

Primary: Inter

Usage: All text (headings, body, buttons, forms) Source: Google Fonts Weights: 400 (regular), 500 (medium), 600 (semibold), 700 (bold)

Characteristics:

Monospace: Fira Code

Usage: Code blocks only Source: Google Fonts Weights: 400, 500

Font Size Scale

Based on Tailwind CSS default scale (rem units):

Variable Size Pixels Usage
--text-xs 0.75rem 12px Footer copyright, fine print
--text-sm 0.875rem 14px Labels, captions, footer links
--text-base 1rem 16px Body text, paragraphs
--text-lg 1.125rem 18px Lead paragraphs, excerpts
--text-xl 1.25rem 20px H4 headings
--text-2xl 1.5rem 24px H3 headings
--text-3xl 1.875rem 30px H2 headings
--text-4xl 2.25rem 36px H1 headings, page titles
--text-5xl 3rem 48px Hero text (if needed)
--text-6xl 3.75rem 60px Large display text (if needed)
--text-7xl 4.5rem 72px Extra large display (if needed)

Line Heights

Variable Value Usage
--leading-tight 1.25 Headings (H1, H2)
--leading-snug 1.375 Subheadings (H3, H4)
--leading-normal 1.5 Buttons, forms, H5, H6
--leading-relaxed 1.625 Body text, paragraphs
--leading-loose 2 Special cases

Typography in Use

Headings

h1 {
  font-size: var(--text-4xl);      // 36px
  line-height: var(--leading-tight); // 1.25
  font-weight: 700;
}

h2 {
  font-size: var(--text-3xl);      // 30px
  line-height: var(--leading-tight); // 1.25
  font-weight: 600;
}

h3 {
  font-size: var(--text-2xl);      // 24px
  line-height: var(--leading-snug); // 1.375
  font-weight: 600;
}

h4 {
  font-size: var(--text-xl);       // 20px
  line-height: var(--leading-snug); // 1.375
  font-weight: 600;
}

h5 {
  font-size: var(--text-lg);       // 18px
  line-height: var(--leading-normal); // 1.5
  font-weight: 600;
}

h6 {
  font-size: var(--text-base);     // 16px
  line-height: var(--leading-normal); // 1.5
  font-weight: 600;
}

Body Text

body {
  font-size: var(--text-base);     // 16px
  line-height: var(--leading-relaxed); // 1.625
}

p {
  font-size: var(--text-base);     // 16px
  line-height: var(--leading-relaxed); // 1.625
}

Lead Text / Excerpts

.lead,
.page__lead,
.archive__item-excerpt {
  font-size: var(--text-lg);       // 18px
  line-height: var(--leading-relaxed); // 1.625
}

Forms & Buttons

label {
  font-size: var(--text-sm);       // 14px
}

input,
textarea,
select,
button {
  font-size: var(--text-base);     // 16px
  line-height: var(--leading-normal); // 1.5
}

.greedy-nav a {
  font-size: var(--text-base);     // 16px
}

.site-title {
  font-size: var(--text-lg);       // 18px
}

.page__footer {
  font-size: var(--text-sm);       // 14px
}

.page__footer-copyright {
  font-size: var(--text-xs);       // 12px
}

Responsive Typography

Font sizes scale down on mobile for better readability:

@media (max-width: 768px) {
  :root {
    --text-4xl: 2rem;      // 32px (down from 36px)
    --text-3xl: 1.625rem;  // 26px (down from 30px)
    --text-2xl: 1.375rem;  // 22px (down from 24px)
  }
}

Best Practices

Do’s

✅ Use the scale consistently

.custom-element {
  font-size: var(--text-lg);  // Good
}

✅ Match line-height to font size

h1 {
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);  // Tight for large headings
}

p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);  // Relaxed for body text
}

✅ Use relative units (rem)

Don’ts

❌ Avoid arbitrary font sizes

.bad-example {
  font-size: 17px;  // Bad - use scale instead
}

❌ Don’t use px for font sizes

.bad-example {
  font-size: 16px;  // Bad - use var(--text-base) instead
}

❌ Don’t override line-height without reason

.bad-example {
  line-height: 1.2;  // Bad - use scale variables
}

Using in Markdown

When writing content in Markdown, the typography scale applies automatically:

# This is H1 (text-4xl, 36px)

## This is H2 (text-3xl, 30px)

### This is H3 (text-2xl, 24px)

This is body text (text-base, 16px)

**Bold text** uses the same size with font-weight: 600

Custom Utility Classes

You can use custom classes for specific needs:

.text-large {
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
}

.text-small {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

Accessibility Considerations

Minimum Font Sizes

Line Height

Contrast

All text maintains WCAG AA contrast ratios:

Comparison with Neural Bridge

The Medulla Labs site now uses the same typography scale as Neural Bridge:

Element Neural Bridge Medulla Labs
Body 1rem (Inter) 1rem (Inter)
H1 2.25rem 2.25rem
H2 1.875rem 1.875rem
H3 1.5rem 1.5rem
Scale Tailwind default Tailwind default

Both sites use:

Testing Typography

Visual Testing

  1. Check heading hierarchy flows naturally
  2. Verify comfortable reading on all devices
  3. Test with different browser zoom levels (100%, 125%, 150%)

Accessibility Testing

  1. Test with screen readers (VoiceOver, NVDA)
  2. Verify keyboard navigation
  3. Check contrast ratios
  4. Test with browser font size overrides

Tools

Future Enhancements

Consider adding:

References