/ marks a short pause; // marks a longer beat. Builds run automatically; one click advances a slide. Production cues are omitted here. No quotations are read aloud.
Separate Families, Explicit Choices
I’m Quinn Keaveney, speaking from Vancouver.We build websites for type foundries, so we often meet optical sizes at the point where a drawing becomes a delivery decision. This talk asks who writes the rule when those drawings arrive as separate families.Publish the selection policy alongside the fonts.
Start with the axis
First, check what the font already provides.If it has an optical size axis, browser optical sizing is the starting point when its automatic policy suits the design. That keeps selection with the font and platform. A separate family switch isn’t an upgrade to that mechanism, and this demo doesn’t compare browser engines.
A role can be enough
Next, ask whether size needs to make the choice at all. A caption can simply name the Caption family in CSS, while body text names Text.Media or container queries can pair family changes with layout rules. That’s often simpler. JavaScript becomes relevant when the intended policy follows computed size across otherwise independent styles.
Names don’t write the rule
Caption and Text communicate intent to a designer. They don’t, by themselves, tell a browser how separate CSS families relate.A fallback list is a priority order, not a size map. Foundries can explain intended uses; authors still need to load the fonts and translate that guidance into a policy for their particular page.
Make the policy inspectable
Our example uses PT Serif Caption and PT Serif. ParaType’s description identifies caption styles for small sizes.The demo author chooses a boundary at sixteen CSS pixels; the publisher’s description doesn’t validate that number. The policy also includes a dead zone. These are implementation choices we can inspect, change, and document, rather than recommendations hidden behind automatic behavior.
Read the selection trace
Here’s the saved live selection trace, with Compare enabled. From thirty two through sixteen and fifteen pixels, Text remains selected.At fourteen, the managed paragraph selects Caption; the comparison stays Text. These fixed specimens show the two drawings enlarged to thirty two pixels, not a running switch or measured reflow at fourteen. The default pair is Caption and Text.
The route matters
The live selector remembers its previous choice. At sixteen on the downward route, Text remains; at sixteen on the return from fourteen, Caption remains.You have to reach seventeen to select Text again. That one pixel dead zone is hysteresis: hold the current drawing until the size moves far enough. The same size can select different drawings on different routes. One shot application skips this hold and uses the initial ranges.
A switch has consequences
Changing the family can change line breaks. The author still licenses and loads both fonts.The live selector rechecks on observed resizes and class or style changes; test the triggers in your layout. Check real text and fallback behavior at transitions. This trace establishes selection, not better reading or an optimal boundary. Physical viewing distance isn’t measured.
An older design question
Optical size metadata predates this tool.Frank Grießhammer’s Source Serif account explains that subfamily names suggest use, rather than prescribing point sizes. Historical discussions disagree about naming and automation. The practical consequence is to publish usable guidance with separate CSS names.
Publish the choice, not just the name
A useful handoff states which families to load, which roles or sizes select them, and what fallback remains.If selection follows size, document the units, boundaries, and direction dependent holds. Then check the real text at transitions, including the return journey. An author should be able to inspect the choice and adapt it when the page changes.
Choose the simplest working policy
Use native optical sizing when the axis and its policy fit. Use ordinary CSS when roles or layout rules already express the choice.Reach for a computed size switch when that is the requirement. The useful result is an explicit, reviewable decision about which drawing reaches the page.Start with the requirement, and keep the implementation proportionate.
We’re Overpunch.
We’re Overpunch. We make opszStepper, and we’ve spent fifteen plus years building websites for type foundries.We’re also building Typetin, a storefront for independent foundries, still in development. The paper, sources, transcript, and interactive example are at opszstepper dot com. You can explore our other Type Tools from there.Thanks for listening.