About.

Masthead

The band at the top of the publication carrying its name, dateline, volume, and number. Here: The Heritage Village Record · Southbury, Connecticut · Vol. I · № 01 · Spring mmxxvi.

Dateline

A journalism convention — a small location + date marker (e.g. Southbury, Connecticut · 17 April 2026). Often anchored with a § or pilcrow.

Chaptermarks

The small section-navigation links placed across the masthead (here: Scale · Specimen · Pairings · Editorial · Colophon · About).

Table of Contents TOC

The front-of-publication index, set with dotted leaders connecting title to page number.

Hero

The large opening composition of a page. Usually display-sized title + short italic lede + byline rule.

Display

Type sized for titling and banner use, not for reading. The system has three steps: h1, display, display-xl.

Eyebrow

The small kicker label above a headline that contextualizes it. Set in uppercase Merriweather Sans, wide tracking. Newsrooms sometimes call this a kicker.

Overline

A variant of eyebrow used as an accented callout (here: “Now at the Center”, set in rosy-taupe).

Title

The article's main headline, typically set at h1 or display size.

Dek

The italic subtitle that sits directly under a title. Also called deck, standfirst, or subtitle. Its job is to expand the promise of the title in one sentence.

Lede

The opening paragraph of an article, set apart from the body (here: italic, slightly larger, tighter leading). The lede sets the weather.

Byline

The author attribution row — writer, photographer, date, read time — usually set in sans at caption size, with hairline rules above and below.

Body

The running prose of an article.

Graf

Journalism shorthand for a single paragraph of body.

Drop cap

The oversized first letter of the first body paragraph, dropped several lines deep and wrapped by the text.

Subhead

A mid-article heading that divides the body into sections. Smaller than a title, always set in the same face as the body (here: Merriweather 900).

Pull quote

A short excerpt pulled from the body and set at display size as a visual break. Always italic, always centered or offset, always bordered by rules — never by quotation marks alone.

Figure

A captioned visual element: a photograph, plate, or diagram.

Caption

The short descriptive text accompanying a figure. Set in sans at caption size, distinct from the body so the eye doesn't confuse them.

Plate

A formal figure reference used in archival and editorial contexts (Plate III, Fig. III). Older than “figure,” slightly more ceremonial.

Footnote

A small note at the foot of the article, tied to the body by a superscript numeral.

End mark

The typographic mark (■) at the end of an article, signaling the reading is complete.

Folio

The page identifier that runs along the foot of every page: page number + running head (28 · The Heritage Village Record · Spring mmxxvi).

Rule

A thin horizontal line that divides content.

Double rule

A two-line horizontal rule, used at major divisions (here: the masthead/hero break and the head of the colophon).

Hairline

The thinnest rule, 1 pixel.

Inline link

A hyperlink embedded directly in body prose. Set with an understated underline that grows on hover.

Marginalia

The small text around a page's central content: captions, datelines, bylines, folios, labels. The whole universe of writing that isn't the body.

Specimen

A display of a typeface's characters and variants. The dark “Letterforms” section is a traditional specimen page.

Small caps smallcaps

Capital letters drawn at roughly x-height size. Used for proper nouns on second mention, and as a quiet way to mark names without shouting.

Colophon

The concluding note of a publication describing the typefaces, palette, and production. The present colophon is literally the Colophon section of this specimen.

Swatch

The small colored chip used to illustrate a palette (here: the round dots in the colophon).

Family

A set of fonts that share a design (Merriweather, Merriweather Sans).

Weight

Stroke thickness. Higher numbers are heavier: 300 Light, 400 Regular, 500 Medium, 600 Semibold, 700 Bold, 900 Black.

Italic

The true cursive companion of a roman face — a distinct set of drawings, not just a slanted version. Used here for emphasis, ledes, and pull quotes. (An “oblique” is a mechanical slant; most serifs have true italics instead.)

Measure

The width of a line of text, counted in characters. 65–75ch reads most comfortably; beyond that the eye loses its place. This system caps body at 68ch.

Leading

The vertical space between lines (CSS line-height). Tighter for big type, looser for small. Body here runs at 1.7, display at 1.0–1.05.

Tracking

The uniform space added between every character (CSS letter-spacing). Negative tracking tightens big type; positive tracking opens up small uppercase labels. Display here uses −0.035 to −0.045em; small-caps eyebrows use +0.18em.

Kerning

The adjustment between specific pairs of letters (Te, Av, Wa) — handled automatically by the font, not tuned manually.

Modular scale

A type scale where each step is a consistent ratio larger than the last. This system uses roughly a 1.25 (major third) ratio between steps, producing 11 distinct sizes.

Fluid type

Sizes that scale smoothly between a floor and a ceiling as the viewport grows, implemented with CSS clamp(). Used for display sizes; fixed rem values are used for body and UI, per design-system convention.

rem

A unit equal to the root font size (16 px by default). Scales with user preference; used for everything that shouldn't track the viewport.

ch

A unit equal to the width of the “0” character in the current font. Used to set max-width on paragraphs by character count.

clamp(min, preferred, max)

The CSS function that yields a value between a floor, a preferred value (often a viewport unit), and a ceiling. The backbone of fluid type.

Hanging punctuation

Letting punctuation at the start or end of a line sit slightly outside the measure so optically-aligned text looks truly flush. Enabled on body paragraphs via hanging-punctuation: first last.

Orphans and widows

A widow is a single line of a paragraph stranded at the top of a column; an orphan is a single word left on the last line. The article body asks for at least 3 of each to avoid strandings.

Lining numerals

Figures that all sit on the baseline at cap-height, like “1234.” Best inside headings and UI. Used by the numerals specimen.

Oldstyle numerals

Figures with ascenders and descenders, like “1234,” that sit in running text like letters. Not used here, but Merriweather supports them (font-variant-numeric: oldstyle-nums).

Tabular numerals

Figures of uniform width for aligned columns (enabled here on folios and palette hex codes via tabular-nums).

Ligatures

Combined glyphs (fi, fl, ff) that fix the awkward collision of f's hook with a following i-dot or l-stem. Shown in the specimen wall.

Two-storey g

The lowercase g drawn with two enclosed loops (the “typographically expressive” form used by Merriweather). The single-loop shape is called one-storey.

Titling caps

Capital letters drawn specifically for display sizes, where the weight and proportions of the body-size caps would look too dense.

Optical size

The idea that a typeface should be redrawn, not just scaled, for different reading sizes. Merriweather's design is optimized for screens at body text — hence its slightly larger x-height and open counters.

x-height

The height of a lowercase x. The proportion of x-height to cap-height is one of the fastest ways to tell two typefaces apart.

Families

Token	Stack
--font-serif	“Merriweather”, Iowan Old Style, Georgia, serif
--font-sans	“Merriweather Sans”, Inter, Arial, sans-serif

Merriweather carries every word that carries meaning — headings, body, pull quotes, lede. Merriweather Sans is reserved for the architecture around the words: eyebrows, bylines, captions, datelines, tags, folios, small UI.

Scale (11 steps)

Token	Size	Leading	Use
--step-overline	11 px	1.4	Small-caps eyebrows, section markers
--step-caption	12.5 px	1.5	Image captions, byline meta
--step-small	14 px	1.55	Footnotes, marginalia
--step-body	17 px	1.7	Article body (max-width 68ch)
--step-lede	20 → 24 px	1.55	Italic opening paragraphs
--step-h4	22 px	1.25	Subheads
--step-h3	26 → 32 px	1.2	Section headings
--step-h2	32 → 44 px	1.15	Major headings
--step-h1	44 → 68 px	1.05	Article titles
--step-display	68 → 128 px	1.0	Landing displays
--step-display-xl	56 → 220 px	0.92	Mastheads, issue covers

Display sizes are fluid (clamp), body and UI sizes are fixed rem values — consistent with the guidance that app and UI chrome use fixed scales while editorial displays breathe with the viewport.

Weights

• Merriweather · 300 · 400 · 400 italic · 700 · 900
• Merriweather Sans · 300 · 400 · 500 · 600 · 700

Preferred defaults: body 400, emphasis italic 400, headings 700–900, sans labels 500–600.

Measure & Leading

• Max line length: 68ch (--measure)
• Body leading: 1.7
• Headings: 1.05–1.25 (tighter as size grows)
• Tracking: negative for display (−0.02 to −0.045em); +0.18em + uppercase for eyebrows and small-caps sans

Palette

Token	Hex	Use
--ink	#2a2522	Body text, headings
--ink-muted	#5a5752	Secondary copy, metadata
--ink-quiet	#8a857f	Tertiary copy, folios
--paper	#f7f3f0	Background
--paper-deep	#efe9e4	Editorial spread, figure plates
--accent-warm	#b08783	Eyebrows, rules, dropcap flourish, editorial accents
--accent-cool	#0f9488	Call-to-action links (used sparingly)
--rule / --rule-strong	#d8d1c9 / #a9a29a	Hairlines
--invert-paper	#1e1b19	Dark specimen spread

Neutrals are warm-tinted toward parchment; rosy-taupe does most of the expressive work. Teal appears only for occasional interactive cues — it's rare on purpose.

• .display, .display--xl — titling
• .lede — italic opening paragraph
• .eyebrow, .eyebrow--accent, .eyebrow--small — small-caps sans label
• .smallcaps — inline small-caps sans
• .byline, .dateline, .caption, .footnote, .folio — magazine furniture
• .article, .article__title, .article__lede, .article__graf, .article__pullquote, .article__subhead, .dropcap — long-form article shell (with two-column body)
• .inline-link — body link with soft underline growth on hover
• .rule, .rule--double — horizontal rules

• No decorative side-stripe borders, no gradient text, no glassmorphism — three of the most common current-trend design tells, all explicitly avoided.
• Asymmetric layouts — headings use a Roman-numeral gutter column; the editorial proof uses real two-column body; the TOC uses dotted leaders and separate number, title, and page tracks.
• Dark specimen spread — a single inverted section for the letterform wall, so the type reads as an artifact instead of an interface.
• Sans used sparingly — only where it genuinely helps the serif breathe (labels, datelines, folios). Not reached for as decoration.
• Palette weights — rosy-taupe carries the warm accent work; teal is reserved for a small number of interactive moments. Pure black and pure white do not appear anywhere.

1. Include the Google Fonts link from index.html in your document <head>.
2. Drop in typography.css — or copy the :root token block plus the base rules.
3. Use the component classes above, or derive your own styles from the tokens.