# Notes on Remix 3 — LearningAdventures typography demo

## Overview

A reading-first typographic essay dressed as a minimal dev blog. The page is a single centered column on warm off-white paper with a slim sticky white header. There is no imagery, no sidebar, no cards. The entire design is carried by two typefaces, five colors, and a strict repeating entry structure. It reads as a personal blog: light italic serif display, a humanist sans for prose, and gray letter-spaced small-caps for every piece of metadata.

Source URL: https://deploy-preview-2--learningadventuresai.netlify.app/typography/blogset1/

## How it structures longform content

The page is a list of notes, each following the same fixed reading order so the rhythm is learned once and repeated:

1. Small-caps eyebrow (e.g. "A SMALL REMIX 3 BLOG")
2. Italic serif display headline (H1, Noto Serif 300 italic)
3. Plain-language deck in body sans
4. Meta line: `DATE · N MIN READ` in gray small-caps
5. Body prose with occasional upright serif subheads
6. Hairline rule, then a `READ THE NOTE →` small-caps CTA

Hierarchy comes from posture and size, not weight or color. The display headline is a *light italic* serif (300); entry headlines are the *same* serif set *upright* at 500. Nothing is bold in the loud sense. Contrast is quiet.

Imagery strategy: zero images by design. The demo's whole thesis is that a longform reading surface can hold attention on letterforms, spacing, and rhythm alone. Removing images also removes layout irregularity, so the measure and vertical rhythm stay even from top to bottom.

## Desktop treatment

- Body: Source Sans 3, 18px, line-height 27.9px (1.55), color #333333 on #F9F9F9 paper.
- H1 display: Noto Serif, 48px, weight 300, italic, letter-spacing about −0.48px (−0.01em).
- Entry headline (H2): Noto Serif, 30px, weight 500, upright.
- Measure: 740px column, roughly 82 characters per line — a comfortable long-read width.
- Header: sticky, slim, white (#FFFFFF), hairline bottom border; italic serif publication title left, "INDEX" small-caps right.
- Document is short (~1900px tall) — a tight, considered demo rather than an endless feed.

## Mobile treatment

- Viewport reference: 390px wide.
- Body text holds at 18px — it does not shrink. Only the measure changes.
- Measure narrows to 327px, about 36 characters per line.
- H1 display drops to 34px, still Noto Serif 300 italic.
- Header stays sticky, slim, and white.
- No images, same as desktop.

The signature responsive decision: hold the body size and let the line get short, rather than shrinking type to preserve line length. The reader never has to zoom; the trade is a tighter measure.

## Design system

Type
- Display / headings: Noto Serif. H1 = weight 300 italic (the signature), clamp(2rem, 5vw, 3rem), letter-spacing −0.01em. Entry heads = weight 500 upright, ~1.9rem.
- Body: Source Sans 3, weight 400, 18px / 1.55.
- Meta (eyebrow, date, read-time, CTA): Source Sans 3, weight 600, 0.75rem, uppercase, letter-spacing 0.14em, gray.
- Google Fonts: `family=Noto+Serif:ital,wght@0,400;0,500;0,600;1,300;1,400&family=Source+Sans+3:wght@400;600`

Colour
- Paper (page background): #F9F9F9 (warm off-white)
- Ink (headlines): #1A1A1A
- Body text: #333333
- Meta gray: #777777
- Hairline: #E3E3E0
- Header background: #FFFFFF (slim white bar over the warm paper)

Layout
- Centered single column, measure ~720px.
- Generous vertical rhythm; 1px hairline rules between entries.
- Sticky slim white header; zero chrome otherwise (no boxes, shadows, or cards).

## Signature techniques

- Light italic serif display at weight 300 — the one move that defines the page.
- One typeface pitched against itself: italic-light serif for display, upright-medium serif for entry heads.
- All metadata in a single gray, letter-spaced, uppercase small-caps voice — eyebrow, date, read-time, and read-more link share it.
- Hairline dividers instead of boxes or backgrounds.
- Warm off-white paper (#F9F9F9) instead of pure white to soften long reads.
- Body size held on mobile; only the measure narrows.

## What to steal

1. Pair one serif family against itself — light italic for display, upright and heavier for heads — to get real contrast from a single typeface.
2. Route all metadata through one gray letter-spaced small-caps style so it reads as a quiet system voice.
3. Hold body size on mobile and let the measure narrow; keep the reader zoom-free.
4. Use 1px near-paper hairlines instead of cards or shadows to separate content with no visual weight.
5. Choose warm off-white paper over pure white and float a slim white header above it for a clean, low-glare read.

## Visual references

- Desktop: ../assets/screenshots/02-learningadv-desktop.jpeg
- Mobile: ../assets/screenshots/02-learningadv-mobile.jpeg

## Source URL

https://deploy-preview-2--learningadventuresai.netlify.app/typography/blogset1/