This essay is about making type work. Specifically, about borrowing from print — from centuries of editorial refinement — and applying those lessons to CSS. We’ll cover the exact techniques used in Manuscript Theme.

The Drop Cap

Nothing announces “this is an essay” quite like a drop cap. The first letter of a paragraph, enlarged, dropped down to sit alongside two or three lines of body text.

In CSS, this is a single rule:

p:first-of-type::first-letter {
  font-family: 'Cormorant Garamond', serif;
  font-size: 4.5rem;
  font-weight: 700;
  float: left;
  line-height: 0.75;
  margin: 0.05em 0.1em 0 0;
}

The trick is line-height: 0.75 — lower than 1 — combined with careful margin adjustment. Too high and the letter floats above the line. Too low and it sinks below it.

The Oxford Double Rule

Print magazines use rules — horizontal lines — as structural elements. The Oxford style uses a double rule: a thin line stacked above a thick one, or vice versa, creating visual weight without a full header.

In CSS:

border-top: 3px double #1a1410;

The double value in border-style renders as two parallel lines with a gap between them. It’s a small thing. It signals craft.

Pull Quotes

A pull quote is a line lifted from the body text and displayed larger, in the margin or across a column. It signals to the skimming reader: here is the important part.

In Manuscript Theme, pull quotes use standard Markdown blockquote syntax — > — and are styled as oversized callouts:

blockquote {
  border-left: 4px solid #8b1a1a;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-style: italic;
  padding: 0.5rem 0 0.5rem 1.5rem;
  position: relative;
}

blockquote::before {
  content: '\201C';
  font-size: 5rem;
  position: absolute;
  left: -0.5rem;
  top: -1rem;
  opacity: 0.15;
}

The \201C is the Unicode left double quotation mark — ". At 5rem, scaled down in opacity, it sits as a decorative watermark behind the blockquote.

Paragraph Indentation

Books and magazines use indentation to separate paragraphs, not blank lines. It’s more space-efficient and feels more typographically controlled.

p + p {
  text-indent: 1.5em;
  margin-top: 0;
}

The p + p selector only applies indentation to paragraphs that follow another paragraph — so the first paragraph in a section doesn’t get indented.

Warm White vs. Pure White

The cream background (#faf7f2) in Manuscript Theme isn’t an accident. Pure white (#ffffff) creates high contrast against dark text — technically readable, but tiring over long reading sessions.

Warm off-white reduces that contrast slightly, making longer pieces more comfortable to read. It also gives the page a paper-like quality that reinforces the editorial aesthetic.

These are small decisions. Typography is full of small decisions. But accumulated, they determine whether your blog feels like it was put together carefully, or assembled from a template.

Manuscript Theme is the careful version.

The best typography is invisible. The reader should think only about the ideas, never about the letters carrying them.

Most blog themes are designed around the dashboard, the admin panel, the statistics. Manuscript is designed around the page. The paragraph. The sentence.

What Sets Manuscript Apart

Open any issue of The New Yorker, The Atlantic, or Granta and you’ll notice something immediately: the type is doing the heavy lifting. There’s no hero image. No gradient button. No animated scroll reveal. Just text, beautifully set.

That’s the ambition here.

• Cormorant Garamond for headlines — a free display serif that rivals expensive foundry fonts
• Lora for body text — purpose-built for screens, warm and readable at length
• Drop caps mark the beginning of essays like magazine features
• Pull quotes let you lift the most important lines into margin-width callouts
• Warm cream background because pure white is a mistake for long-form reading

Getting Started

Edit _config.yml to set your publication name, description, and the manuscript: config block:

manuscript:
  drop_cap: true
  pullquote: true
  reading_time: true
  issue_number: "Vol. 1, No. 1"

Then create posts in _posts/ using the standard Jekyll naming convention: YYYY-MM-DD-title.md.

This is a pull quote. Use > blockquote syntax in your Markdown to render the editorial pull-quote style.

Sample Post Structure

Every post supports these front matter fields:

---
layout: post
title: "Your Essay Title"
date: 2024-01-15
author: Your Name
category: Essays          # shown as kicker above the title
tags: [writing, culture]
---

The first paragraph of every post automatically receives the drop cap treatment. Write your opening line as if it’s the beginning of a magazine feature — because it is.

Manuscript Theme is part of the csswitch premium Jekyll template pack. Browse all themes at csswitch.github.io.