# 02 — Learning Adventures typography demo: “Notes on Remix 3” - **Source:** https://deploy-preview-2--learningadventuresai.netlify.app/typography/blogset1/ - **Captured:** 2026-07-11 - **Surface studied:** The supplied three-note index at 1440×1000 and 390×844 - **Reading archetype:** Typographic essay index / editorial note catalogue - **Responsive classification:** Reflowed ## Visual references - [Desktop — full-page overview strip](../assets/references/02-learning-adventures-typography/desktop-full.png) - [Desktop — first viewport](../assets/references/02-learning-adventures-typography/desktop-hero.png) - [Desktop — readable mid-index viewport](../assets/references/02-learning-adventures-typography/desktop-body.png) - [Mobile — full-page overview strip](../assets/references/02-learning-adventures-typography/mobile-full.png) - [Mobile — first viewport](../assets/references/02-learning-adventures-typography/mobile-hero.png) - [Mobile — readable mid-index viewport](../assets/references/02-learning-adventures-typography/mobile-body.png) The full-page files are deliberately used as pacing/anatomy overviews; use the hero and body viewport captures for typographic detail. ## Evidence note - **Observation:** The supplied URL resolves to an index of three notes, not to one long-form article. This file analyzes the index honestly and does not project unobserved article behavior onto it. - **Observation:** Netlify’s deploy-preview drawer initially covered content. It was removed before the final screenshots because it is hosting chrome, not part of the reference design. - **Inference:** Long-form lessons here concern editorial preview structure, typography, and the transition into an article—not deep in-article navigation or media pacing. ## First impression - **Observation:** The page is almost entirely typography, whitespace, and hairline dividers. There are no images, icons, cards, color blocks, shadows, or ornamental backgrounds. - **Observation:** Three deliberately long headlines dominate. Each one reads like a thesis rather than a teaser. - **Inference:** The design earns attention by treating language as the visual asset. It feels authored, calm, and unusually confident for a technical blog index. - **Inference:** It is also a useful anti-reference to “content card” grids: every item shares a rhythm without becoming a rounded rectangle. ## Page anatomy, in order 1. **Sticky 55px masthead.** Italic publication name on the left, “Index” on the right. 2. **Editorial introduction.** Small publication label, large italic H1, and a one-paragraph description of the three-note set. 3. **Note preview 1.** Date/read-time metadata, long linked H2, concise sans-serif excerpt, underlined “Read the note →” action. 4. **Hairline divider.** A quiet pause rather than a container. 5. **Note previews 2 and 3.** The same semantic sequence with different title lengths and reading times. 6. **Wide quiet ending.** Generous blank space before a two-part footer. 7. **Footer provenance.** Build note on the left; typography credit to bolde.com on the right. ## Desktop behavior - **Observation:** The main column is 880px wide and centered. It uses 24px horizontal padding, leaving an 832px working width. - **Observation:** Intro copy and excerpts are capped at 740px while headings can use the full 832px. This makes the prose visibly quieter than the propositions. - **Observation:** The main content begins with 64px top padding beneath the sticky header. Dividers and large vertical gaps make each preview read as a distinct editorial beat. - **Observation:** The entire page measured about 1,919 CSS pixels at 1440×1000, short enough to understand as a curated set rather than an endless archive. - **Inference:** The page’s best move is unequal measure: broad titles for expressive wrapping, narrower copy for easy reading. ## Mobile adaptation - **Observation:** The main element becomes the full 390px viewport with 24px side padding, producing a 342px content column. - **Observation:** The H1 changes from 48/57.6px to 34/40.8px. Preview H2s change from 30/37.5px to 24/30px. - **Observation:** The 20/30px introductory serif paragraph and 18/27.9px sans-serif excerpts do not shrink. Their readable size is protected while headings absorb most of the compression. - **Observation:** The 55px sticky masthead remains structurally identical. Publication and index labels stay at opposite edges without introducing a menu. - **Observation:** Long headlines become multi-line blocks—often six or more lines—but metadata, excerpt, CTA, and divider remain in the same order. - **Inference:** This is a disciplined reflow rather than a re-composition. The mobile experience keeps the same editorial grammar and changes only width and headline scale. ## Typography system - **Observation:** Noto Serif supplies the masthead, H1, H2s, and intro. Source Sans Pro supplies metadata, excerpts, CTAs, and footer copy. - **Observation:** Desktop H1 is Noto Serif italic, weight 300, 48/57.6px with `-0.48px` tracking. H2s are weight 500 at 30/37.5px. - **Observation:** Excerpts are Source Sans Pro 18/27.9px in `#333`; the intro is Noto Serif 20/30px. - **Observation:** Metadata uses small uppercase/tracked sans text in `#666`, while the “Read the note” action adds weight and an underline instead of color. - **Inference:** Serif carries argument and identity; sans carries logistics. The difference is large enough to be semantic rather than a barely visible font pairing. ## Color and imagery - **Observation:** Background is white. Headings are `#1a1a1a`, paragraph copy `#333333`, and metadata/secondary text `#666666`. - **Observation:** The page contains zero images, videos, audio, and CSS background images. - **Inference:** Zero imagery works because this is a small index whose content is language. The same decision would be risky for a place-, product-, or evidence-led article. ## Navigation, progress, sharing, and related content - **Observation:** Orientation is deliberately minimal: publication home and “Index” are always present in the sticky header. - **Observation:** Every preview has two routes to the same note: the large linked H2 and the explicit “Read the note →” text link. - **Observation:** Dates and estimated reading times appear before every title. - **Observation:** There is no search, category system, progress indicator, share action, inline table of contents, or recommendation carousel on this index. - **Inference:** For a three-item collection, omission is a strength. Adding archive tooling would create more interface than content. ## Interaction and motion - **Observation:** The only notable computed motion is a 150ms color transition on the three linked H2s. - **Observation:** Content is visible by default; there are no entrance animations or scroll effects. - **Inference:** The hover response is enough because the page’s primary interaction is simply choosing one of three essays. ## Accessibility and performance concerns - **Observation:** The page has one H1 followed by three H2s, a clean and predictable heading outline. - **Observation:** All nine anchors had accessible names in the inspected DOM. - **Observation:** The “Index” link measured about 40×15px and the explicit CTA about 136×24px, smaller than a 44×44px touch-target recommendation. The linked H2s provide much larger alternative targets for the notes, but the header link does not. - **Observation:** `#666` on white has sufficient contrast for normal text, but the metadata is visually small and heavily tracked; zoom and low-vision testing would still be prudent. - **Observation:** With no media, nine links, a short page, and only two web-font families, the surface has a very light content payload. - **Inference:** The primary performance risk is font loading. Use `font-display: swap`, preload only the critical styles, and retain compatible fallbacks to avoid layout shift. ## Transferable patterns 1. **Write titles as positions.** A headline that contains the argument can be both the main visual and the strongest browsing cue. 2. **Use unequal measures.** Give headlines more width than supporting prose so each role has a distinct texture. 3. **Repeat semantics, not cards.** Metadata → title → excerpt → CTA → divider is enough to make a reliable list component. 4. **Protect body size on mobile.** Compress display type before reducing paragraph readability. 5. **Credit the system.** The footer explicitly names the typographic source; provenance strengthens a design-learning artifact. ## What not to copy - Do not describe this URL as a long-form article; it is an index. - Do not adopt tiny uppercase metadata without checking zoom, contrast, and mobile touch behavior. - Do not use zero imagery by reflex on content whose evidence is visual. - Do not copy the italic-serif look alone. The design succeeds because the titles are unusually specific and the spacing is decisive. - Do not ship a deployment-preview drawer over the reading surface; production captures should never include host tooling. ## Implementation notes - Use a sticky 55px masthead and one centered `max-width: 880px` main element with 24px gutters. - Define separate max-width tokens for display (`100%` of the 832px working area) and supporting prose (`740px`). - Keep semantic list markup: each note can be an `li` with `