Font Controls 

<label for="body-font">Body Font:</label>
<select id="body-font" onchange="updateFont('body')">
  <option value="var(--font-source)">Source Sans 3</option>
  <option value="var(--font-libre)">Libre Baskerville</option>
  <option value="var(--font-lora)">Lora</option>
  <option value="var(--font-merriweather)">Merriweather</option>
  <option value="var(--font-vollkorn)">Vollkorn</option>
  <option value="var(--font-berkeley)">Berkeley Mono</option>
</select>
<label for="heading-font">Heading Font:</label>
<select id="heading-font" onchange="updateFont('heading')">
  <option value="var(--font-libre)">Libre Baskerville</option>
  <option value="var(--font-source)">Source Sans 3</option>
  <option value="var(--font-lora)">Lora</option>
  <option value="var(--font-merriweather)">Merriweather</option>
  <option value="var(--font-vollkorn)">Vollkorn</option>
  <option value="var(--font-berkeley)">Berkeley Mono</option>
</select>
<label for="mono-font">Code Font:</label>
<select id="mono-font" onchange="updateFont('mono')">
  <option value="var(--font-berkeley)">Berkeley Mono</option>
  <option value="var(--font-berkeley-thin)">Berkeley Mono Thin</option>
</select>
<label for="font-size">Base Font Size:</label>
<input type="range" id="font-size" min="14" max="24" value="16" oninput="updateFontSize()">
<span id="size-display">16px</span>
<label for="line-height">Line Height:</label>
<input type="range" id="line-height" min="1.2" max="2.0" value="1.6" step="0.1" oninput="updateLineHeight()">
<span id="line-height-display">1.6</span>

Font Samples

Berkeley Mono

Berkeley Mono is a monospaced typeface that offers excellent readability for code and technical writing. It features clear letterforms with comfortable spacing and distinguishable characters for coding purposes.

The quick brown fox jumps over the lazy dog. 0123456789. !@#$%^&*()

Bold text looks like this, and italic text looks like this. 

<code>
function greet(name) {
  console.log(Hello, ${name}!);
  return Welcome, ${name}. Hope you're having a good day.;
} 
Berkeley Mono is a monospaced font that works well for code blocks and technical documentation.

Berkeley Mono Thin

Berkeley Mono Thin is a lighter weight variant of Berkeley Mono. It maintains the same clarity and legibility but with a more delicate appearance, making it suitable for interfaces that need a lighter touch.

The quick brown fox jumps over the lazy dog. 0123456789. !@#$%^&*()

Bold text looks like this, and italic text looks like this. 

<code>
function greet(name) {
  console.log(Hello, ${name}!);
  return Welcome, ${name}. Hope you're having a good day.;
} 
Berkeley Mono Thin is a lighter weight version of Berkeley Mono, good for when you want a more delicate monospaced look.

Libre Baskerville

Libre Baskerville is a web font optimized for body text. It’s a serif typeface designed to be readable on screens while maintaining the elegance of traditional Baskerville. The letterforms have been optimized for screens with higher contrast and a larger x-height.

The quick brown fox jumps over the lazy dog. 0123456789. !@#$%^&*()

Bold text looks like this, and italic text looks like this. 

<p class="size-16">This is 16px Libre Baskerville. It works well for longer passages of text.</p>
<p class="size-18">This is 18px Libre Baskerville. A good size for comfortable reading on modern screens.</p>
<p class="size-20">This is 20px Libre Baskerville. Larger text for improved readability.</p>
Libre Baskerville is a classic serif font optimized for screens, making it excellent for longform reading.

Lora

Lora is a well-balanced contemporary serif with moderate contrast designed for screen reading. The letterforms are slightly condensed to fit more text on small screens without sacrificing readability. Its Italian-inspired calligraphic tradition gives it a warm, approachable feeling.

The quick brown fox jumps over the lazy dog. 0123456789. !@#$%^&*()

Bold text looks like this, and italic text looks like this. 

<p class="size-16">This is 16px Lora. Note how it handles spacing efficiently while maintaining readability.</p>
<p class="size-18">This is 18px Lora. A comfortable size for reading articles and blog posts.</p>
<p class="size-20">This is 20px Lora. The larger size reveals more of the typeface's character.</p>
Lora is a balanced contemporary serif with a slightly condensed design, making it great for content-heavy sites.

Merriweather

Merriweather was designed to be a text face that is pleasant to read on screens. It features a very large x-height, slightly condensed letterforms, a mild diagonal stress, sturdy serifs, and open forms. These features combine to create a highly legible typeface with a distinctive personality.

The quick brown fox jumps over the lazy dog. 0123456789. !@#$%^&*()

Bold text looks like this, and italic text looks like this. 

<p class="size-16">This is 16px Merriweather. Note its large x-height and clear letterforms.</p>
<p class="size-18">This is 18px Merriweather. A comfortable size that shows off the typeface's personality.</p>
<p class="size-20">This is 20px Merriweather. The larger size enhances readability for important content.</p>
Merriweather is a distinctive serif with a large x-height and open forms, designed specifically for screen reading.

Source Sans 3

Source Sans is Adobe’s first open source typeface family, designed primarily for user interfaces. The Source Sans family was designed to work well in user interfaces, with a focus on clarity and neutrality. This versatile sans-serif typeface has been optimized for both print and digital environments.

The quick brown fox jumps over the lazy dog. 0123456789. !@#$%^&*()

Bold text looks like this, and italic text looks like this. 

<p class="size-16">This is 16px Source Sans 3. Clean and neutral for interfaces and general text.</p>
<p class="size-18">This is 18px Source Sans 3. A comfortable size for reading without fatigue.</p>
<p class="size-20">This is 20px Source Sans 3. Bold headings in this font work especially well.</p>
Source Sans 3 is a clean, versatile sans-serif designed by Adobe, ideal for UI and general text.

Vollkorn

Vollkorn is a serif typeface designed for the web. With its warm and balanced appearance, it works well for body text in both web and print. The name “Vollkorn” means “wholemeal” in German, indicating its robust and substantial character for everyday use.

The quick brown fox jumps over the lazy dog. 0123456789. !@#$%^&*()

Bold text looks like this, and italic text looks like this. 

<p class="size-16">This is 16px Vollkorn. Note its warm, approachable character.</p>
<p class="size-18">This is 18px Vollkorn. A good size for longer reading passages.</p>
<p class="size-20">This is 20px Vollkorn. The larger size shows off its distinctive details.</p>
Vollkorn is a warm, friendly serif typeface designed for everyday use both on screens and in print.

Typography Tips for Your Site

When selecting fonts for your website, consider these guidelines:

  1. Contrast is key: Pair serif and sans-serif fonts for good contrast between headings and body text. For example, Source Sans 3 headings with Libre Baskerville body text.

  2. Limit font families: Use no more than 2-3 font families on a single page to maintain visual coherence.

  3. Consider font weight: Make sure your chosen fonts have sufficient weight options for creating visual hierarchy.

  4. Test for readability: Font size should typically be at least 16px for body text, with adequate line height (1.5-1.6 is often ideal).

  5. Mind the spacing: Pay attention to letter spacing and line length (45-75 characters per line is generally optimal).

  6. Test in different contexts: Some fonts that look great in headlines may not work well for body text.

  7. Performance matters: Variable fonts like Merriweather and Source Sans 3 offer multiple weights in a single file, improving load times.

My Recommendations

Based on the fonts in your collection, here are some combinations that work particularly well:

  • Classic Academic: Libre Baskerville for body text, Source Sans 3 for headings, Berkeley Mono for code
  • Modern Clean: Source Sans 3 for body text, Merriweather for headings, Berkeley Mono for code
  • Warm and Readable: Vollkorn for body text, Source Sans 3 for headings, Berkeley Mono for code
  • Literary Feel: Lora for body text, Vollkorn for headings, Berkeley Mono for code

To implement any of these combinations site-wide, you would modify the CSS variables in your default.css file:

:root {
  /* Current font selections - change these to test different fonts */
  --font-sans: var(--font-source);
  --font-serif: var(--font-libre);
  --font-mono: var(--font-berkeley);
  
  /* Active font selection for body text */
  --font-body: var(--font-serif);   
  --font-headings: var(--font-sans);  
}