diff --git a/services/frontend/src/assets/fonts/Silkscreen-Bold.ttf b/services/frontend/src/assets/fonts/Silkscreen-Bold.ttf
new file mode 100644
index 000000000..677125268
Binary files /dev/null and b/services/frontend/src/assets/fonts/Silkscreen-Bold.ttf differ
diff --git a/services/frontend/src/assets/fonts/Silkscreen-OFL.txt b/services/frontend/src/assets/fonts/Silkscreen-OFL.txt
new file mode 100644
index 000000000..3dd7cfb72
--- /dev/null
+++ b/services/frontend/src/assets/fonts/Silkscreen-OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2001 The Silkscreen Project Authors (https://github.com/googlefonts/silkscreen)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/services/frontend/src/assets/fonts/Silkscreen-Regular.ttf b/services/frontend/src/assets/fonts/Silkscreen-Regular.ttf
new file mode 100644
index 000000000..8caff819d
Binary files /dev/null and b/services/frontend/src/assets/fonts/Silkscreen-Regular.ttf differ
diff --git a/services/frontend/src/domains/association/historyAxis.ts b/services/frontend/src/domains/association/historyAxis.ts
index 9daf05a92..9d763f3f3 100644
--- a/services/frontend/src/domains/association/historyAxis.ts
+++ b/services/frontend/src/domains/association/historyAxis.ts
@@ -10,7 +10,7 @@
  */
 export interface Milestone {
   year: string
-  /** What it is called, short enough to sit under a year. */
+  /** What it is called, short enough to sit under a year, and named the way a quest is. */
   title: string
   /** One line, always visible: what happened, for somebody who reads nothing else. */
   summary: string
@@ -29,7 +29,7 @@ export interface Milestone {
 export const MILESTONES: readonly Milestone[] = [
   {
     year: "2017",
-    title: "Two students, a few beers",
+    title: "The party forms",
     summary: "Twente had an association for almost everything, and nothing for gamers.",
     telling:
       "Two Civil Engineering students decided that ought to be fixable. It began with a few "
@@ -38,7 +38,7 @@ export const MILESTONES: readonly Milestone[] = [
   },
   {
     year: "2017",
-    title: "The Kick-In",
+    title: "First contact",
     summary: "A stand with no association behind it yet drew over 120 students.",
     telling:
       "They took a stand to the Kick-In market before there was anything to join — more than "
@@ -47,7 +47,7 @@ export const MILESTONES: readonly Milestone[] = [
   },
   {
     year: "2017",
-    title: "The statutes are signed",
+    title: "The charter is signed",
     summary: "On 12 December the first board signed, and Blueshell became real.",
     telling:
       "What followed was the unglamorous part: a regular calendar, a place to meet people who "
@@ -55,7 +55,7 @@ export const MILESTONES: readonly Milestone[] = [
   },
   {
     year: "2022",
-    title: "A team of our own, in a league of our own",
+    title: "A new challenger enters",
     summary: "The first all-female team fielded in the Dutch College Esports Series.",
     telling:
       "A community that says it is for everyone has to keep proving it rather than announcing "
@@ -63,7 +63,7 @@ export const MILESTONES: readonly Milestone[] = [
   },
   {
     year: "2022",
-    title: "A room of our own",
+    title: "Home base unlocked",
     summary: "On 15 October the Predator Esports Lounge opened in the Bastille.",
     telling:
       "Ten gaming PCs across two booths, a sim-rig and a bar. Competitions are played in the "
@@ -72,7 +72,7 @@ export const MILESTONES: readonly Milestone[] = [
   },
   {
     year: "2024",
-    title: "Three in a row",
+    title: "Champions, three years running",
     summary: "A third consecutive Dutch Student League title.",
     telling:
       "Won while insisting, to anyone who asked, that this is mainly a casual gaming "
diff --git a/services/frontend/src/domains/association/island/HistoryBand.vue b/services/frontend/src/domains/association/island/HistoryBand.vue
index 3544a62f4..2efbbc71e 100644
--- a/services/frontend/src/domains/association/island/HistoryBand.vue
+++ b/services/frontend/src/domains/association/island/HistoryBand.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {onBeforeUnmount, onMounted, ref, watch} from "vue"
+import {computed, onBeforeUnmount, onMounted, ref, watch} from "vue"
 import type {Milestone} from "@/domains/association/historyAxis"
 import {useMotionAllowed} from "@/components/island/useMotionAllowed"
 
@@ -25,32 +25,65 @@ const motion = useMotionAllowed()
 /** Which milestone is nearest the middle of the screen, or none while the page is elsewhere. */
 const nearest = ref<number>(-1)
 const items = ref<HTMLElement[]>([])
+const list = ref<HTMLElement | null>(null)
 
 const holdItem = (element: unknown, index: number): void => {
   if (element instanceof HTMLElement) items.value[index] = element
 }
 
-let watching: IntersectionObserver | null = null
+/**
+ * Whichever milestone's own middle is closest to the middle of the screen is the one being read.
+ *
+ * Measured from where the stops actually are, not from crossings reported as they happen: a
+ * reader flicking the wheel can carry a stop past the middle of the screen between two frames,
+ * and a milestone nobody was told about is a milestone that never opens. Distance is always
+ * answerable, so scrolling past always arrives somewhere.
+ */
+const measure = (): void => {
+  const band = list.value?.getBoundingClientRect()
+  const middle = window.innerHeight / 2
+  // Nothing is being read while the whole history is above or below the reader.
+  if (!band || band.bottom < middle || band.top > middle) {
+    nearest.value = -1
+    return
+  }
+
+  let closest = -1
+  let away = Number.POSITIVE_INFINITY
+  items.value.forEach((item, index) => {
+    if (!item) return
+    const box = item.getBoundingClientRect()
+    const distance = Math.abs((box.top + box.bottom) / 2 - middle)
+    if (distance < away) {
+      away = distance
+      closest = index
+    }
+  })
+  nearest.value = closest
+}
+
+/** At most one measurement a frame, however many scroll events the browser sends. */
+let pending: number | null = null
+const remeasure = (): void => {
+  if (typeof requestAnimationFrame !== "function") {
+    measure()
+    return
+  }
+  if (pending !== null) return
+  pending = requestAnimationFrame(() => {
+    pending = null
+    measure()
+  })
+}
 
 onMounted(() => {
   // A reader who asked for less motion gets every milestone open and none of the growing.
   if (motion.reduced.value) return
-  if (typeof IntersectionObserver !== "function") return
-
-  watching = new IntersectionObserver(
-    entries => {
-      for (const entry of entries) {
-        const index = items.value.indexOf(entry.target as HTMLElement)
-        if (index === -1) continue
-        if (entry.isIntersecting) nearest.value = index
-        else if (nearest.value === index) nearest.value = -1
-      }
-    },
-    // The same band across the middle the slices open on: only what a reader has actually
-    // brought to the centre counts as the one they are reading.
-    {rootMargin: "-42% 0px -42% 0px", threshold: 0},
-  )
-  for (const item of items.value) if (item) watching.observe(item)
+  if (typeof window === "undefined") return
+
+  window.addEventListener("scroll", remeasure, {passive: true})
+  window.addEventListener("resize", remeasure, {passive: true})
+  measure()
 })
 
 /**
@@ -60,12 +93,16 @@ onMounted(() => {
  * it, so opening one is the sentence continuing rather than a second block arriving. Written
  * out a character at a time for the same reason: the eye follows the writing instead of
  * hunting for what just changed.
+ *
+ * A character a frame, in a bitmap face, with a block cursor waiting at the end of it: the way
+ * a console wrote a line of dialogue, and the one piece of the page that is playing rather than
+ * presenting.
  */
 const typed = ref<number>(0)
 let typing: number | null = null
 
-/** Roughly the pace of somebody writing, which is what stops it reading as a wipe. */
-const CHARACTERS_A_SECOND = 120
+/** Around a character and a half a frame on a 60Hz screen: the pace a handheld RPG writes at. */
+const CHARACTERS_A_SECOND = 40
 
 const stopTyping = (): void => {
   if (typing !== null) cancelAnimationFrame(typing)
@@ -79,9 +116,9 @@ watch(nearest, index => {
     return
   }
 
-  const telling = props.milestones[index]?.telling ?? ""
+  const line = lineOf(index)
   if (motion.reduced.value || typeof requestAnimationFrame !== "function") {
-    typed.value = telling.length
+    typed.value = line.length
     return
   }
 
@@ -90,23 +127,71 @@ watch(nearest, index => {
   // that clock, and one that is not sends the elapsed time negative.
   const write = (): void => {
     const written = Math.round(((performance.now() - started) / 1000) * CHARACTERS_A_SECOND)
-    typed.value = Math.min(written, telling.length)
-    typing = written < telling.length ? requestAnimationFrame(write) : null
+    typed.value = Math.min(written, line.length)
+    typing = written < line.length ? requestAnimationFrame(write) : null
   }
   typed.value = 0
   typing = requestAnimationFrame(write)
 })
 
-/** What is on the page for this milestone: all of it once read, nothing before. */
-const tellingSoFar = (index: number): string => {
-  const telling = props.milestones[index]?.telling ?? ""
-  if (motion.reduced.value) return telling
-  return index === nearest.value ? telling.slice(0, typed.value) : ""
+/** The cursor sits at the end of the writing, and goes when there is nothing left to write. */
+const writing = computed<boolean>(() => {
+  if (motion.reduced.value || nearest.value < 0) return false
+  return typed.value < lineOf(nearest.value).length
+})
+
+/**
+ * The milestone's line in three pieces: what is written, the character being written, the rest.
+ *
+ * The whole line is written out, summary and telling together, and a milestone that is not
+ * being read shows none of it. Arriving at one is a dialogue box opening: it starts empty and
+ * fills, and nothing had to be taken off the page first.
+ *
+ * The part not yet written is on the page the whole time, in no colour. It has to be: the
+ * milestones left of the line are set right-aligned, and text added to while it is right-aligned
+ * grows away from its own end — the line crawls leftwards and reads as though it were being
+ * written backwards. With the whole line holding its place from the start, the cursor travels
+ * across ground the words already occupy and leaves them behind it, which is the thing being
+ * imitated.
+ */
+interface Written {
+  written: string
+  landing: string
+  waiting: string
+}
+
+const lineOf = (index: number): string => {
+  const milestone = props.milestones[index]
+  return milestone ? `${milestone.summary} ${milestone.telling}` : ""
+}
+
+const lineSoFar = (index: number): Written => {
+  const line = lineOf(index)
+  if (motion.reduced.value) return {written: line, landing: "", waiting: ""}
+  // Every milestone holds the room its line will need, read or not, so arriving at one never
+  // pushes the ones below it down the page — and never moves the page out from under the reader.
+  // Nothing of it is on show until it is reached: a summary drawn beforehand would have to be
+  // taken off the page for the writing to start, and text that vanishes to come back is worse
+  // than text that was never there.
+  if (index !== nearest.value) return {written: "", landing: "", waiting: line}
+
+  const at = typed.value
+  // A space never gets a mark of its own: there is nothing to see landing.
+  const lands = at > 0 && line[at - 1] !== " "
+  return {
+    written: line.slice(0, lands ? at - 1 : at),
+    landing: lands ? (line[at - 1] ?? "") : "",
+    waiting: line.slice(at),
+  }
 }
 
 onBeforeUnmount(() => {
-  watching?.disconnect()
-  watching = null
+  if (typeof window !== "undefined") {
+    window.removeEventListener("scroll", remeasure)
+    window.removeEventListener("resize", remeasure)
+  }
+  if (pending !== null) cancelAnimationFrame(pending)
+  pending = null
   stopTyping()
 })
 
@@ -119,7 +204,10 @@ const isRead = (index: number): boolean => motion.reduced.value || nearest.value
     :class="{'history--still': motion.reduced.value}"
     :data-testid="testid"
   >
-    <ol class="history__line mx-auto w-full max-w-3xl px-5 py-12 sm:px-8 sm:py-16">
+    <ol
+      ref="list"
+      class="history__line mx-auto w-full max-w-3xl px-5 py-12 sm:px-8 sm:py-16"
+    >
       <li
         v-for="(milestone, index) in milestones"
         :key="`${milestone.year}-${milestone.title}`"
@@ -139,10 +227,18 @@ const isRead = (index: number): boolean => motion.reduced.value || nearest.value
           <h3 class="history__title font-display uppercase">
             {{ milestone.title }}
           </h3>
-          <!-- One paragraph, not two: the summary is always drawn, and the telling carries on
-               from it rather than arriving underneath it. -->
-          <p class="history__summary font-body">
-            {{ milestone.summary }}<span class="history__telling">{{ " " + tellingSoFar(index) }}</span>
+          <!-- One paragraph, not two: the telling carries on from the summary rather than
+               arriving underneath it. -->
+          <p class="history__summary">
+            <span class="history__written">{{ lineSoFar(index).written }}</span><span
+              v-if="lineSoFar(index).landing"
+              :key="typed"
+              class="history__landing"
+            >{{ lineSoFar(index).landing }}</span><span
+              v-if="writing && index === nearest"
+              aria-hidden="true"
+              class="history__cursor"
+            /><span class="history__waiting">{{ lineSoFar(index).waiting }}</span>
           </p>
         </div>
       </li>
@@ -183,15 +279,14 @@ const isRead = (index: number): boolean => motion.reduced.value || nearest.value
 /*
  * A little more height than the words need, and no more.
  *
- * The band that decides which milestone is being read is the middle 16% of the screen. A stop
- * no taller than its text is crossed in one flick of the wheel and its telling opens and shuts
- * before anybody could read it; a stop as tall as the screen turns the history into a chore.
- * This is the smallest height that makes scrolling arrive at them one at a time.
+ * The telling holds its own room whether or not it has been written yet, so the height comes
+ * mostly from the words. The floor under it is for the short ones: a stop crossed in one flick
+ * of the wheel opens and shuts before anybody could read it.
  */
 .history__stop {
   position: relative;
   width: calc(50% - 2.75rem);
-  min-height: 17vh;
+  min-height: 12vh;
   display: flex;
   align-items: center;
 }
@@ -266,19 +361,87 @@ const isRead = (index: number): boolean => motion.reduced.value || nearest.value
   color: var(--color-chalk);
 }
 
-/* Always legible, and never as loud as the telling it stands in for. */
+/*
+ * Always legible, and never as loud as the telling it stands in for.
+ *
+ * Set in the bitmap face at 16px, not in rem: Silkscreen is drawn on an 8px grid, and a size
+ * off that grid puts its stems between pixels. The line height is loose because a bitmap face
+ * set tight is a wall.
+ */
 .history__summary {
   margin-top: 0.5rem;
-  font-size: 0.9rem;
-  line-height: 1.5;
+  font-family: var(--font-bitmap);
+  font-size: 16px;
+  line-height: 1.65;
   color: var(--color-ash);
 }
 
-/* Part of the sentence it continues: same size, same colour, no space of its own. */
-.history__telling {
+/* What has been written, and the only part of the telling anybody can read. */
+.history__written {
   color: inherit;
 }
 
+/* Holding its place and saying nothing: the reason a right-aligned telling does not crawl. */
+.history__waiting {
+  color: transparent;
+}
+
+/*
+ * The character under the cursor comes up in two steps rather than appearing outright.
+ *
+ * Opacity and nothing else. A box of its own — anything that would let it be moved — is a break
+ * opportunity in the middle of a word: the line re-wraps around the character being written,
+ * and the paragraph jumps a line and back as the cursor travels along it.
+ */
+.history__landing {
+  animation: history-landing 140ms steps(2, end);
+}
+
+@keyframes history-landing {
+  from {
+    opacity: 0.25;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+/*
+ * Drawn rather than typed: no bitmap face is guaranteed to carry a block character.
+ *
+ * It is painted out of the flow, over the character it is standing on, from an inline box that
+ * is empty and stays inline. Anything with a box of its own — an inline-block, even a zero-width
+ * one — is a place the line may break: the words after it drop to the next line, and the
+ * paragraph jumps a line and back as the cursor travels along it.
+ */
+.history__cursor {
+  position: relative;
+}
+
+.history__cursor::before {
+  content: "";
+  position: absolute;
+  top: 0.05em;
+  left: 0.08em;
+  width: 0.5em;
+  height: 0.9em;
+  background: currentColor;
+  animation: history-cursor 640ms steps(1, end) infinite;
+}
+
+@keyframes history-cursor {
+  0%,
+  50% {
+    opacity: 1;
+  }
+
+  50.01%,
+  100% {
+    opacity: 0;
+  }
+}
+
 /*
  * Every milestone open, nothing growing, for a reader who asked for less motion — and for one
  * whose browser cannot watch the page at all. Nothing is held tall either: with everything
@@ -304,6 +467,14 @@ const isRead = (index: number): boolean => motion.reduced.value || nearest.value
   .history__year {
     transition: none;
   }
+
+  .history__cursor::before {
+    display: none;
+  }
+
+  .history__landing {
+    animation: none;
+  }
 }
 
 /*
@@ -326,7 +497,7 @@ const isRead = (index: number): boolean => motion.reduced.value || nearest.value
     margin: 0;
     padding-left: 2.25rem;
     text-align: left;
-    min-height: 20vh;
+    min-height: 14vh;
   }
 
   .history__stop:nth-child(odd) .history__dot,
diff --git a/services/frontend/src/styles/fonts.scss b/services/frontend/src/styles/fonts.scss
index c7fc74c0e..dc40661b7 100644
--- a/services/frontend/src/styles/fonts.scss
+++ b/services/frontend/src/styles/fonts.scss
@@ -34,4 +34,21 @@
   font-family: 'Blueshell';
   src: local("Blueshell"), url('@/assets/fonts/Blueshell.woff2') format('woff2'), url('@/assets/fonts/Blueshell.ttf') format('truetype');
   font-display: swap;
-}
\ No newline at end of file
+}
+
+// The bitmap face, for the history's tellings, which are written out a character at a time the
+// way an old console writes dialogue. Silkscreen is drawn on an 8px grid, so it is only ever set
+// at whole multiples of it. Licence beside it: Silkscreen-OFL.txt.
+@font-face {
+  font-family: 'Silkscreen';
+  src: url('@/assets/fonts/Silkscreen-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Silkscreen';
+  src: url('@/assets/fonts/Silkscreen-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-display: swap;
+}
diff --git a/services/frontend/src/styles/island.css b/services/frontend/src/styles/island.css
index b5d39eaf2..a002d1dda 100644
--- a/services/frontend/src/styles/island.css
+++ b/services/frontend/src/styles/island.css
@@ -103,6 +103,8 @@
 
   --font-display: "Shellhouse One", system-ui, sans-serif;
   --font-body: "Barlow Semi Condensed", system-ui, sans-serif;
+  /* Set at whole multiples of 8px, which is the grid the face is drawn on. */
+  --font-bitmap: "Silkscreen", ui-monospace, monospace;
 
   /* A person's or a board's name, and never the display face. It was a correctness
      constraint: the display face had no İ, ı, ş or Ş, so `İlayda Hotamiş` lost two letters to
diff --git a/services/frontend/tests/unit/domains/association/HistoryBand.test.ts b/services/frontend/tests/unit/domains/association/HistoryBand.test.ts
index fe2a921ac..dc3777422 100644
--- a/services/frontend/tests/unit/domains/association/HistoryBand.test.ts
+++ b/services/frontend/tests/unit/domains/association/HistoryBand.test.ts
@@ -1,5 +1,5 @@
 import {beforeEach, describe, expect, it, vi} from "vitest"
-import {mount} from "@vue/test-utils"
+import {mount, type VueWrapper} from "@vue/test-utils"
 import HistoryBand from "@/domains/association/island/HistoryBand.vue"
 import type {Milestone} from "@/domains/association/historyAxis"
 
@@ -9,39 +9,69 @@ const MILESTONES: Milestone[] = [
   {year: "Now", title: "Third", summary: "Where it stands, in a line.", telling: "Where it stands today."},
 ]
 
-const observed: Element[] = []
-let fire: ((entries: {target: Element; isIntersecting: boolean}[]) => void) | null = null
+const SCREEN = 900
+const STOP = 200
 
-const installObserver = () => {
-  observed.length = 0
-  fire = null
-  vi.stubGlobal("IntersectionObserver", class {
-    constructor(callback: (entries: unknown[]) => void) {
-      fire = callback as never
-    }
+const mountBand = (): VueWrapper => mount(HistoryBand, {props: {milestones: MILESTONES, testid: "history"}})
 
-    observe(element: Element) {
-      observed.push(element)
-    }
+const place = (element: Element, top: number, height: number): void => {
+  element.getBoundingClientRect = () => ({
+    top, bottom: top + height, height, left: 0, right: 0, width: 0, x: 0, y: top, toJSON: () => ({}),
+  }) as DOMRect
+}
 
-    disconnect() {
-      observed.length = 0
-    }
+/**
+ * Put the list on the screen with the given stop's middle at the middle of the screen.
+ *
+ * jsdom lays nothing out, so the stops are placed by hand: three of them in a column, moved as
+ * one so that scrolling is the whole column sliding up past a fixed middle.
+ */
+const scrollTo = async (wrapper: VueWrapper, top: number): Promise<void> => {
+  place(wrapper.get(".history__line").element, top, STOP * MILESTONES.length)
+  wrapper.findAll('[data-testid="history-stop"]').forEach((stop, index) => {
+    place(stop.element, top + index * STOP, STOP)
   })
+  window.dispatchEvent(new Event("scroll"))
+  await new Promise(resolve => requestAnimationFrame(() => resolve(null)))
+  await wrapper.vm.$nextTick()
 }
 
-const mountBand = () => mount(HistoryBand, {props: {milestones: MILESTONES, testid: "history"}})
+/** Where the column has to start for the given stop's middle to sit at the middle of the screen. */
+const middleOf = (index: number): number => SCREEN / 2 - index * STOP - STOP / 2
+
+/** Waits out the writing: the longest line here at the pace it is written at, and then some. */
+const written = async (wrapper: VueWrapper): Promise<void> => {
+  await new Promise(resolve => setTimeout(resolve, 2600))
+  await wrapper.vm.$nextTick()
+}
+
+/**
+ * What a reader can actually read of a milestone's telling.
+ *
+ * Not `text()`: the part not yet written is on the page the whole time, in no colour, holding
+ * the room the words will need. Reading the element's text would count that as written.
+ */
+type Part = {exists: () => boolean; text: () => string}
+
+const shown = (stop: {find: (selector: string) => Part}): string => {
+  const text = (selector: string): string => (stop.find(selector).exists() ? stop.find(selector).text() : "")
+  // The character just written has a box of its own, so that it can land in it.
+  return `${text(".history__written")}${text(".history__landing")}`
+}
+
+const readStop = (wrapper: VueWrapper): number =>
+  wrapper.findAll('[data-testid="history-stop"]').findIndex(stop => stop.classes().includes("history__stop--read"))
 
 describe("HistoryBand", () => {
   beforeEach(() => {
     vi.unstubAllGlobals()
+    window.innerHeight = SCREEN
     vi.stubGlobal("matchMedia", (query: string) => ({
       matches: false,
       media: query,
       addEventListener: vi.fn(),
       removeEventListener: vi.fn(),
     }))
-    installObserver()
   })
 
   it("draws every milestone, in the order they happened", () => {
@@ -53,60 +83,103 @@ describe("HistoryBand", () => {
     expect(stops[2].text()).toContain("Third")
   })
 
-  /** A reader passing through gets the whole history, a line each, without stopping. */
-  it("draws every summary whether or not its milestone is being read", () => {
+  /**
+   * A milestone shows none of its line until it is reached.
+   *
+   * Drawing the summary beforehand would mean taking it off the page again for the writing to
+   * start, and text that vanishes to come back is worse than text that was never there.
+   */
+  it("writes nothing for a milestone nobody has reached", () => {
     const wrapper = mountBand()
 
-    for (const milestone of MILESTONES) {
-      expect(wrapper.text()).toContain(milestone.summary)
+    for (const stop of wrapper.findAll('[data-testid="history-stop"]')) {
+      expect(shown(stop)).toBe("")
     }
     expect(wrapper.findAll(".history__stop--read")).toHaveLength(0)
   })
 
-  it("watches every milestone for the middle of the screen", () => {
-    mountBand()
+  /** The one at the middle of the screen is the one being read, and only that one. */
+  it("reads whichever milestone reaches the middle", async () => {
+    const wrapper = mountBand()
+
+    await scrollTo(wrapper, middleOf(1))
 
-    expect(observed).toHaveLength(3)
+    expect(readStop(wrapper)).toBe(1)
+    expect(wrapper.findAll(".history__stop--read")).toHaveLength(1)
   })
 
-  /** The one at the middle of the screen is the one being read, and only that one. */
-  it("reads whichever milestone reaches the middle", async () => {
+  /**
+   * The reason this is measured rather than watched.
+   *
+   * A wheel flick moves the page further in one frame than a milestone is tall, so the middle
+   * of the screen can be past a stop before anything is asked about it. The stop nearest the
+   * middle still answers, so every milestone opens as it goes by.
+   */
+  it("reads a milestone the page flew past in a single frame", async () => {
     const wrapper = mountBand()
-    const stops = wrapper.findAll('[data-testid="history-stop"]')
 
-    fire?.([{target: stops[1].element, isIntersecting: true}])
-    await wrapper.vm.$nextTick()
+    await scrollTo(wrapper, middleOf(0))
+    expect(readStop(wrapper)).toBe(0)
 
-    expect(stops[1].classes()).toContain("history__stop--read")
-    expect(stops[0].classes()).not.toContain("history__stop--read")
-    expect(stops[2].classes()).not.toContain("history__stop--read")
+    // A single frame carrying the reader most of the way through the second milestone.
+    await scrollTo(wrapper, middleOf(1) - STOP * 0.4)
+    expect(readStop(wrapper)).toBe(1)
+  })
+
+  /** No dead ground between two milestones: one of them is always the one being read. */
+  it("reads a milestone while the middle sits between two of them", async () => {
+    const wrapper = mountBand()
+
+    await scrollTo(wrapper, middleOf(1) - STOP / 2)
+
+    expect(wrapper.findAll(".history__stop--read")).toHaveLength(1)
   })
 
   /** The telling carries on from the summary, and only for the milestone being read. */
   it("writes the telling out once a milestone reaches the middle", async () => {
     const wrapper = mountBand()
+    expect(shown(wrapper.findAll('[data-testid="history-stop"]')[1])).not.toContain(MILESTONES[1].telling)
+
+    await scrollTo(wrapper, middleOf(1))
+    await written(wrapper)
+
     const stops = wrapper.findAll('[data-testid="history-stop"]')
-    expect(wrapper.text()).not.toContain(MILESTONES[1].telling)
+    expect(shown(stops[1])).toContain(MILESTONES[1].telling)
+    expect(shown(stops[0])).not.toContain(MILESTONES[0].telling)
+  })
 
-    fire?.([{target: stops[1].element, isIntersecting: true}])
-    await wrapper.vm.$nextTick()
-    await new Promise(resolve => setTimeout(resolve, 400))
-    await wrapper.vm.$nextTick()
+  /**
+   * Every milestone holds the room its telling needs from the start.
+   *
+   * Otherwise arriving at one grows it, everything below it moves down the page, and the page
+   * shifts out from under the reader who was scrolling towards it.
+   */
+  it("keeps the room for every telling whether or not it has been written", () => {
+    const wrapper = mountBand()
 
-    expect(stops[1].text()).toContain(MILESTONES[1].telling)
-    expect(stops[0].text()).not.toContain(MILESTONES[0].telling)
+    const waiting = wrapper.findAll(".history__waiting").map(part => part.text())
+    expect(waiting).toEqual(MILESTONES.map(milestone => `${milestone.summary} ${milestone.telling}`))
   })
 
-  it("stops reading a milestone that leaves the middle", async () => {
+  /** The console's blinking block, waiting at the end of the writing and gone once it stops. */
+  it("keeps a cursor at the end of the writing until the telling is finished", async () => {
     const wrapper = mountBand()
-    const stops = wrapper.findAll('[data-testid="history-stop"]')
 
-    fire?.([{target: stops[1].element, isIntersecting: true}])
-    await wrapper.vm.$nextTick()
-    fire?.([{target: stops[1].element, isIntersecting: false}])
-    await wrapper.vm.$nextTick()
+    await scrollTo(wrapper, middleOf(1))
+    expect(wrapper.findAll(".history__cursor")).toHaveLength(1)
 
-    expect(stops[1].classes()).not.toContain("history__stop--read")
+    await written(wrapper)
+
+    expect(wrapper.findAll(".history__cursor")).toHaveLength(0)
+  })
+
+  it("stops reading once the whole history is behind the reader", async () => {
+    const wrapper = mountBand()
+    await scrollTo(wrapper, middleOf(1))
+
+    await scrollTo(wrapper, -STOP * MILESTONES.length - 10)
+
+    expect(wrapper.findAll(".history__stop--read")).toHaveLength(0)
   })
 
   /**
@@ -114,14 +187,13 @@ describe("HistoryBand", () => {
    *
    * Nothing grows and nothing opens, so nothing is hidden behind an effect they turned off.
    */
-  it("opens every milestone for a reader who asked for less motion", () => {
+  it("opens every milestone for a reader who asked for less motion", async () => {
     vi.stubGlobal("matchMedia", (query: string) => ({
       matches: true,
       media: query,
       addEventListener: vi.fn(),
       removeEventListener: vi.fn(),
     }))
-    installObserver()
 
     const wrapper = mountBand()
 
@@ -129,15 +201,10 @@ describe("HistoryBand", () => {
     for (const stop of wrapper.findAll('[data-testid="history-stop"]')) {
       expect(stop.classes()).toContain("history__stop--read")
     }
-    // Nothing to watch for: there is no growing to trigger.
-    expect(observed).toHaveLength(0)
-  })
-
-  it("draws the whole history where the browser cannot watch the page", () => {
-    vi.stubGlobal("IntersectionObserver", undefined)
-
-    const wrapper = mountBand()
-
-    expect(wrapper.findAll('[data-testid="history-stop"]')).toHaveLength(3)
+    // Nothing to measure for: there is no growing to trigger.
+    await scrollTo(wrapper, -STOP * MILESTONES.length - 10)
+    for (const stop of wrapper.findAll('[data-testid="history-stop"]')) {
+      expect(stop.classes()).toContain("history__stop--read")
+    }
   })
 })
diff --git a/services/frontend/tests/unit/styles/bitmapGlyphCoverage.test.ts b/services/frontend/tests/unit/styles/bitmapGlyphCoverage.test.ts
new file mode 100644
index 000000000..2af1cd180
--- /dev/null
+++ b/services/frontend/tests/unit/styles/bitmapGlyphCoverage.test.ts
@@ -0,0 +1,29 @@
+/*
+ * That the bitmap face carries every letter the history is written in.
+ *
+ * Silkscreen is a small face: 226 codepoints, where Barlow has thousands. The history's copy is
+ * fixed text in the repository, so what it needs can be checked exactly rather than guessed at
+ * — and a milestone written with an em dash or an accent the face lacks would go to the page as
+ * tofu, mid-sentence, while it is being written out a character at a time.
+ */
+import {describe, expect, it} from "vitest"
+import {coverageOf} from "./glyphCoverage"
+import {MILESTONES} from "@/domains/association/historyAxis"
+
+const BITMAP_FACES = ["Silkscreen-Regular.ttf", "Silkscreen-Bold.ttf"]
+
+/** Every character the band actually sets in the bitmap face: the summaries and the tellings. */
+const written = (): string[] => {
+  const copy = MILESTONES.map(milestone => `${milestone.summary} ${milestone.telling}`).join("")
+  return [...new Set(copy)].filter(character => character !== " ")
+}
+
+describe("the face the history is written in", () => {
+  it("has every letter the milestones are written with", () => {
+    for (const face of BITMAP_FACES) {
+      const covered = coverageOf(face)
+      const missing = written().filter(character => !covered(character.codePointAt(0) ?? 0))
+      expect(missing, `${face} would draw tofu in the history`).toEqual([])
+    }
+  })
+})
diff --git a/services/frontend/tests/unit/styles/glyphCoverage.ts b/services/frontend/tests/unit/styles/glyphCoverage.ts
new file mode 100644
index 000000000..408fe27dd
--- /dev/null
+++ b/services/frontend/tests/unit/styles/glyphCoverage.ts
@@ -0,0 +1,97 @@
+/*
+ * Whether a font file actually carries a given letter, read from the file rather than assumed.
+ *
+ * No font library: the format is a table directory of 16-byte records, and a cmap subtable in
+ * format 4 (BMP) or 12 (full range) is enough to answer "is this codepoint in this file".
+ * Shared by the tests that hold a face to the letters the site sets in it.
+ */
+import {readFileSync} from "node:fs"
+import {fileURLToPath} from "node:url"
+
+// Held in a variable, not written inline: Vite rewrites a literal `new URL("…", import.meta.url)`
+// into an asset reference, and the font then resolves against the served root instead of the disk.
+const FONT_DIR = "../../../src/assets/fonts/"
+
+export function read(file: string): DataView {
+  const bytes = readFileSync(fileURLToPath(new URL(FONT_DIR + file, import.meta.url)))
+  return new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength)
+}
+
+function tableOffset(font: DataView, tag: string): number {
+  for (let i = 0; i < font.getUint16(4); i++) {
+    const record = 12 + i * 16
+    const name = Array.from({length: 4}, (_, byte) => String.fromCharCode(font.getUint8(record + byte))).join("")
+    if (name === tag) return font.getUint32(record + 8)
+  }
+  throw new Error(`no ${tag} table`)
+}
+
+/** Segmented mapping, 16-bit. Codepoints above the BMP are out of its reach by definition. */
+function glyphFromFormat4(font: DataView, sub: number, codepoint: number): number {
+  if (codepoint > 0xffff) return 0
+  const segments = font.getUint16(sub + 6) / 2
+  const ends = sub + 14
+  const starts = ends + segments * 2 + 2
+  const deltas = starts + segments * 2
+  const rangeOffsets = deltas + segments * 2
+
+  for (let i = 0; i < segments; i++) {
+    if (font.getUint16(ends + i * 2) < codepoint) continue
+    const start = font.getUint16(starts + i * 2)
+    if (start > codepoint) return 0
+
+    const delta = font.getInt16(deltas + i * 2)
+    const rangeOffset = font.getUint16(rangeOffsets + i * 2)
+    if (rangeOffset === 0) return (codepoint + delta) & 0xffff
+
+    // The offset is measured from its own slot in the array, not from the subtable.
+    const glyph = font.getUint16(rangeOffsets + i * 2 + rangeOffset + (codepoint - start) * 2)
+    return glyph === 0 ? 0 : (glyph + delta) & 0xffff
+  }
+  return 0
+}
+
+/** Segmented coverage, 32-bit, groups ascending. */
+function glyphFromFormat12(font: DataView, sub: number, codepoint: number): number {
+  const groups = font.getUint32(sub + 12)
+  for (let i = 0; i < groups; i++) {
+    const group = sub + 16 + i * 12
+    const start = font.getUint32(group)
+    if (codepoint < start) return 0
+    if (codepoint > font.getUint32(group + 4)) continue
+    return font.getUint32(group + 8) + (codepoint - start)
+  }
+  return 0
+}
+
+/** Every format 4 and 12 subtable in the file, so a missing letter is missing from all of them. */
+function subtables(font: DataView, cmap: number): number[] {
+  const found: number[] = []
+  for (let i = 0; i < font.getUint16(cmap + 2); i++) {
+    const sub = cmap + font.getUint32(cmap + 4 + i * 8 + 4)
+    const format = font.getUint16(sub)
+    if (format === 4 || format === 12) found.push(sub)
+  }
+  return found
+}
+
+export function coverageOf(file: string): (codepoint: number) => boolean {
+  const font = read(file)
+  const cmap = tableOffset(font, "cmap")
+  const found = subtables(font, cmap)
+  // Otherwise "no glyphs" would read as a missing letter rather than as a parser that
+  // understood none of the file, and the whole test would pass by saying nothing.
+  if (found.length === 0) throw new Error(`${file} has no format 4 or 12 cmap subtable`)
+
+  return (codepoint) => found.some((sub) => {
+    const glyph = font.getUint16(sub) === 4
+      ? glyphFromFormat4(font, sub, codepoint)
+      : glyphFromFormat12(font, sub, codepoint)
+    return glyph !== 0
+  })
+}
+
+export function missingFrom(file: string, letters: Record<string, number>): string[] {
+  const covered = coverageOf(file)
+  return Object.entries(letters).filter(([, codepoint]) => !covered(codepoint)).map(([letter]) => letter)
+}
diff --git a/services/frontend/tests/unit/styles/nameGlyphCoverage.test.ts b/services/frontend/tests/unit/styles/nameGlyphCoverage.test.ts
index af9983dda..93932d1b2 100644
--- a/services/frontend/tests/unit/styles/nameGlyphCoverage.test.ts
+++ b/services/frontend/tests/unit/styles/nameGlyphCoverage.test.ts
@@ -10,13 +10,9 @@
  *
  * Both halves matter. If either face is ever replaced by something narrower, this fails and
  * says which file and which letters, rather than a name breaking on the page.
- *
- * No font library: the format is a table directory of 16-byte records, and a cmap subtable in
- * format 4 (BMP) or 12 (full range) is enough to answer "is this codepoint in this file".
  */
-import {readFileSync} from "node:fs"
-import {fileURLToPath} from "node:url"
 import {describe, expect, it} from "vitest"
+import {missingFrom} from "./glyphCoverage"
 
 const DISPLAY_FACE = "ShellhouseOne-Regular.ttf"
 const BARLOW_FACES = [
@@ -36,94 +32,6 @@ const TURKISH = {
 }
 const EUROPEAN = {"ë": 0x00eb, "é": 0x00e9}
 
-// Held in a variable, not written inline: Vite rewrites a literal `new URL("…", import.meta.url)`
-// into an asset reference, and the font then resolves against the served root instead of the disk.
-const FONT_DIR = "../../../src/assets/fonts/"
-
-function read(file: string): DataView {
-  const bytes = readFileSync(fileURLToPath(new URL(FONT_DIR + file, import.meta.url)))
-  return new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength)
-}
-
-function tableOffset(font: DataView, tag: string): number {
-  for (let i = 0; i < font.getUint16(4); i++) {
-    const record = 12 + i * 16
-    const name = Array.from({length: 4}, (_, byte) => String.fromCharCode(font.getUint8(record + byte))).join("")
-    if (name === tag) return font.getUint32(record + 8)
-  }
-  throw new Error(`no ${tag} table`)
-}
-
-/** Segmented mapping, 16-bit. Codepoints above the BMP are out of its reach by definition. */
-function glyphFromFormat4(font: DataView, sub: number, codepoint: number): number {
-  if (codepoint > 0xffff) return 0
-  const segments = font.getUint16(sub + 6) / 2
-  const ends = sub + 14
-  const starts = ends + segments * 2 + 2
-  const deltas = starts + segments * 2
-  const rangeOffsets = deltas + segments * 2
-
-  for (let i = 0; i < segments; i++) {
-    if (font.getUint16(ends + i * 2) < codepoint) continue
-    const start = font.getUint16(starts + i * 2)
-    if (start > codepoint) return 0
-
-    const delta = font.getInt16(deltas + i * 2)
-    const rangeOffset = font.getUint16(rangeOffsets + i * 2)
-    if (rangeOffset === 0) return (codepoint + delta) & 0xffff
-
-    // The offset is measured from its own slot in the array, not from the subtable.
-    const glyph = font.getUint16(rangeOffsets + i * 2 + rangeOffset + (codepoint - start) * 2)
-    return glyph === 0 ? 0 : (glyph + delta) & 0xffff
-  }
-  return 0
-}
-
-/** Segmented coverage, 32-bit, groups ascending. */
-function glyphFromFormat12(font: DataView, sub: number, codepoint: number): number {
-  const groups = font.getUint32(sub + 12)
-  for (let i = 0; i < groups; i++) {
-    const group = sub + 16 + i * 12
-    const start = font.getUint32(group)
-    if (codepoint < start) return 0
-    if (codepoint > font.getUint32(group + 4)) continue
-    return font.getUint32(group + 8) + (codepoint - start)
-  }
-  return 0
-}
-
-/** Every format 4 and 12 subtable in the file, so a missing letter is missing from all of them. */
-function subtables(font: DataView, cmap: number): number[] {
-  const found: number[] = []
-  for (let i = 0; i < font.getUint16(cmap + 2); i++) {
-    const sub = cmap + font.getUint32(cmap + 4 + i * 8 + 4)
-    const format = font.getUint16(sub)
-    if (format === 4 || format === 12) found.push(sub)
-  }
-  return found
-}
-
-function coverageOf(file: string): (codepoint: number) => boolean {
-  const font = read(file)
-  const cmap = tableOffset(font, "cmap")
-  const found = subtables(font, cmap)
-  // Otherwise "no glyphs" would read as a missing letter rather than as a parser that
-  // understood none of the file, and the whole test would pass by saying nothing.
-  if (found.length === 0) throw new Error(`${file} has no format 4 or 12 cmap subtable`)
-
-  return (codepoint) => found.some((sub) => {
-    const glyph = font.getUint16(sub) === 4
-      ? glyphFromFormat4(font, sub, codepoint)
-      : glyphFromFormat12(font, sub, codepoint)
-    return glyph !== 0
-  })
-}
-
-function missingFrom(file: string, letters: Record<string, number>): string[] {
-  const covered = coverageOf(file)
-  return Object.entries(letters).filter(([, codepoint]) => !covered(codepoint)).map(([letter]) => letter)
-}
-
 describe("the fonts a name can be set in", () => {
   it("has every Turkish letter in the display face, which is why it is the Turkish cut", () => {
     expect(