04 · Typography and print tradition

Research for the ETS27 concept round. Lens: what type-led web design looks like at the top in October 2026, what the print tradition still has that the web has not mined, which faces are tired and which still sing, and a usable shortlist with the extremes that make each face work. Written 2026-10-14. Renders live in concepts/research/refs/<slug>/ (desktop 1440×900 top + two scroll frames, phone 390 top, meta.json with the fonts actually in use).

1. What I studied

Twelve sites rendered headless and looked at as pixels, plus the sources behind them.

| Slug | Site | Why | Fonts actually served (from meta.json) | |---|---|---|---| | pangram | https://pangrampangram.com/ | The foundry behind PP Neue Montreal; the Framer-era default look at its source | PP Neue Montreal, Neue Gstaad, Palma, Altera, Frama, Mori, Museum, Neue Corp | | dinamo | https://abcdinamo.com/ | Variable fonts as a top-level product; the wittiest foundry site | Monument Grotesk (+ Mono), ABC Gravity, Oracle, Gramercy, Repro Widths, Social, Ginto, Diatype, Favorit (all variable) | | klim | https://klim.co.nz/ | Söhne's home; restraint as drama | Söhne, Söhne Ikon | | grilli | https://www.grillitype.com/ | The Swiss label-column grid, live, in 2026; GT Mechanik launch | GT Corporate (UI), GT Mechanik, Canon, Era, Standard, Flaire, Pantheon, Pressura, Planar, Ultra, Maru, Flex | | colophon | https://www.colophon-foundry.org/ | Basis/Apercu/Grenette's home (moved to Monotype 2025-03-25; the site is now a one-page yellow notice) | CF Basis | | displaay | https://displaay.net/ | Clash Display / Reckless / Tobias foundry | Saans (UI), Serrif (prose), Mecherle family | | typewolf | https://www.typewolf.com/ | What's trending in type, curated | Domaine Text, Domaine Display Narrow, Dia | | fontsinuse | https://fontsinuse.com/ | The archive; 34,802 uses; event identities | Benton Sans RE, Relay Condensed | | neuemontreal | https://neuemontreal.com/ | Awwwards SOTD 2026-07-13 + Typography Honors; specimen-as-site at its best | PP Neue Montreal (Display + Text + Variable, 12 cuts) | | planetono | https://www.planetono.space/ | Awwwards SOTD 2026-03-14 + Typography Honors; gated behind a START screen (headless sees only the gate) | Poppins, Futura Passata | | monolog | https://bymonolog.com/ | Awwwards SOTD 2026-07-06 + Typography Honors; the current "typographic studio site" | Khteka, Suisse Mono, Animo | | eyemag | https://www.eyemagazine.com/ | Print criticism's own site, for the register not the layout (it is a 2008 fixed-960 relic) | Georgia, Helvetica |

Other evidence pulled without rendering: Monocle's live CSS serves Plantin + Helvetica Neue + Monocons (https://monocle.com/); It's Nice That serves Bradford LL (Lineto) + Labil Grotesk variable (https://www.itsnicethat.com/); Apartamento loads a Typekit kit (hcp1khy) whose faces are not resolvable from the HTML; Wallpaper* falls back to Palatino behind a brand-font variable. The ATypI 2026 Stanford identity ("Home Screen", by For Good Measure) pairs NN Nouvelle Grotesk with Selva Script (https://fontsinuse.com/uses/76081/atypi-2026-stanford-identity). Berlinale 2026 is set in Tausend (https://fontsinuse.com/). Typewolf's recent Sites of the Day: Grenette + Styrene, Cardinal + Sweet Sans + Baskerville, Swear + DM Mono, DaVinci + Suisse Int'l, Kabel + Neue Haas Grotesk, Editorial Old + Neue Montreal, Tobias + Diatype + Diatype Mono, Signifier + Switzer, Arizona Flare + Dia, Agipo + Topol + Maison Neue. Awwwards Typography Honors 2025–26 (https://www.awwwards.com/websites/winner_category_typography/): Mosby's Files (Tubik), PP Neue Montreal (Demande Spéciale), MONOLOG, sakazuki, Just Phil (Mike Kus), Planetoño (Tubik), Nippori Seminar (lamm_tokyo), IRONHILL (Uncommon), The Pendragon Cycle (Format-3), Elicyon (HNDRX), David Alaba (Holographik), I'm not a bot, TikTok Sans, Groteskly Yours, Exat typeface (Studio Size), Seasoned (Koto), Mat Voyce (Uncommon). Google Fonts' own metadata feed (https://fonts.google.com/metadata/fonts, 1,950 families, read 2026-10-14) supplied every family name, axis range and popularity rank quoted below; trend commentary from Typewolf, Fonts In Use, madegooddesigns.com/trending-fonts, gleamstudio.design/blog-post/font-trends-2026, maxibestof.one/typefaces/popular and Fontshare's view counts.

2. What actually works, and why

2.1 The three-size hierarchy

Every page that reads as "designed" rather than "templated" uses three sizes with an extreme ratio, not an eight-step scale.

2.2 Scale as the surprise, not effects

The first-second surprise on the best pages is a letterform bigger than the screen (neuemontreal's n), a flat colour block carrying two words (Grilli), or a page that is almost empty (klim.co.nz: one product photograph of a black crate, one scrubber slider, an orange "Die Grotesk" tag bottom-left, nothing else). None of them use a glow, a gradient, a particle or a blur. The brief's "surprise in the first second" is achievable with one glyph at 1000 px and a hairline.

2.3 Navigation that is typography

Dinamo's nav is a left-stacked list at about 26 px (Typefaces, Customize fonts, About, Client Work, Hardware, Events, Students, Blog) with small "NEW" tags, no bar, no pill. Displaay's nav is a row of bordered pills at about 28 px, which reads as big buttons on a grey band. Grilli's is a plain 16 px row under a hairline. In each case the nav is set in the same face as the content and is the first type specimen on the page. The pill "Register" button as the only idea does not appear on any of them.

2.4 A conceit that organises everything

neuemontreal.com is an "Official Travel Guide" (sections: Story, In use, Weights, Ligatures, Languages, Accents, Variants), with a hand-drawn rotary stamp and a 1967 photograph, in two colours (#D82F2F red and #1A1A1A black per Awwwards) on a faint paper grain. Grilli launches GT Mechanik with a television test card ("LUZERN BROOKLYN 2026", "LOOKING FOR SIGNAL", "PLEASE STAND BY") annotated in mono. Dinamo's cookie banner is a fortune cookie held by a hand; the header shows "29 online". Klim gives you one object and a slider. The conceit is what the judges score as creativity; the fonts are the medium. ETS27 needs one sentence of conceit before one pixel of layout.

2.5 Inverting the expected pairing

Displaay sets its intro paragraph in a serif (Serrif, about 21 px) and its headings in a heavy grotesk (Saans, about 48 px): prose in serif, display in sans, the opposite of the Instrument-Serif-headline habit. Typewolf's whole identity is a serif logotype (Domaine Display Narrow) on pale mauve (#E8DEDF-ish) with a Dia sans for UI. Monocle, live today, is Plantin for text and Helvetica Neue for furniture, set small and dense. The inversion reads as editorial because that is how magazines have always done it.

2.6 Two colours, committed

Awwwards lists exactly two colours for each of the three 2026 honorees I checked: #D82F2F/#1A1A1A (neuemontreal), #080807/#DDDDD5 (MONOLOG), #FFC737/#EB3322 (Planetoño). Colophon's page is one yellow (#FFE93B-ish) with black line illustration. Grilli's specimen is one orange with black and white type. Dinamo blocks black, yellow and lilac in full-width bands. Nobody at this level spreads a pastel palette evenly.

2.7 Variable fonts as product, not garnish

Dinamo's "Variable Fonts" is a top-level section: "Gravity" in a heavy italic at roughly 100 px on black, pill tabs for nine families, a yellow mono-text sticky note reading "All our fonts are variable, so you can fully control of how they appear in your design". Their served fonts are all width-variable builds (Repro Widths, Diatype, Favorit). The lesson for a site, not a foundry: pick one axis and make it the mechanic of the page, which is where the provocations below go.

2.8 Gate screens are accepted

Planetoño's award-winning entry is, to a first visitor, a red field (#EB3322), a logotype and a "START" button with a headphones warning. The world behind it (Blender, Rive, three.js) is why it won, not Poppins. ETS27's fork ("Open the map" / "Ask the mind") can legitimately be the first screen, as long as the screen itself is the typographic event rather than two buttons under a headline.

2.9 Reference is the licence

Fonts In Use's staff pick for LÔCÔ Art Market Summer 2026 is set in Roboto, Roboto Mono and VT323: the banned face, used as a deliberate Android-terminal reference, earns a staff pick. The ban in the brief is on default use. Any face is a choice once it carries an idea; most faces on most sites carry none.

3. What has become cliché (the 2026 anti-list for type-led sites)

  1. The heavy-grotesk-two-colours-grain layout. MONOLOG's page is excellent and it is also now the template for every "typographic studio site" on Awwwards: 120 px heavy grotesk at 0.85 leading, 24 px paragraph in the left column, 11 px mono caps labels with a "•" separator, "01 02 03" section numbers, "(→)" arrows in parentheses, a grain overlay on #DDDDD5. A type-led ETS27 that lands here will be judged generic by the owner for good reason.
  2. Instrument Serif Italic swapped into a sans headline for one word ("Free your mind"). gleamstudio calls it a trend; it is the signature of the 2024–25 AI-startup landing page and the "serif renaissance in AI branding".
  3. Split-text reveals: letters rising on scroll, words fading in by line, the marquee ticker of a repeated word, outlined text next to filled text. Every SOTD has them; nobody notices them any more.
  4. Weight wiggle on hover. The wght axis easing from 400 to 700 under the pointer is the new glow orb.
  5. Ray Gun cosplay: mix-blend-mode: difference overprints, rotated labels, deliberately clipped giant words, "brutalist" borders. Carson's idea (layout expresses the content's mood) is still good; the look was strip-mined by Framer templates in 2025.
  6. Rounded photo card + centred white heavy word + two pill buttons + a red "New" badge. This is Pangram Pangram's own homepage in 2026 (refs/pangram/desktop-top.png), which is why PP Neue Montreal reads as a default: the foundry's house style is the template's house style.
  7. Mono-for-everything "built by engineers" signalling (Geist + Geist Mono, JetBrains Mono as hero type).
  8. Ink-trap grotesques as "personality" (Bricolage Grotesque, rank 64 and named as overused by gleamstudio; Space Grotesk; Syne).
  9. Hairline Didone for anything that wants to feel expensive, with no reason in the content.
  10. Noise/grain with no material it is pretending to be.

4. Named faces: tired or still singing

Popularity ranks are Google Fonts' own (1 = most used of 1,950 families); Fontshare numbers are its view counts.

| Face | Verdict | Why | |---|---|---| | Inter, Roboto, Open Sans, Lato, Poppins, Montserrat | Banned, and rightly | Ranks 5, 2, 3, 9, 8, 7. They are the air. | | Google Sans | Tired on arrival | Released to Google Fonts 2025-12-09 and already rank 4; Material 3 Expressive's face. Reads as Android. | | Space Grotesk | Tired | Rank 57, 5 weights, no italics, 2020. The stubby a and squared bowls are the 2021–24 crypto/AI tell; 66th of the top 100 most-used web faces (maxibestof). | | Syne | Tired in default use | Rank 190 but concentrated on studio portfolios as the Extra Bold wide logo cut. Its real idea, a family whose width grows with weight (designed for the Synesthésie art centre), is still usable if the width jump is the event, never the Extra Bold as a badge. | | Satoshi | Tired | The most-viewed face on Fontshare (108,818 views): it is the new Inter for people avoiding Inter. Invisible as body text; pointless as display. | | Clash Display / Clash Grotesk | Tired | 69,460 Fontshare views; the free fashion-display face of 2022–24, in every Framer template. | | General Sans | Tired | 59,299 views; a free Circular, and Circular is on every "generic" list. | | Instrument Serif | Tired | Rank 84, two styles only (regular, italic), 2023. The italic-in-a-sans-headline is the single most recognisable 2025 cliché. Its honest replacements are Newsreader (opsz 6–72) and Literata. | | Geist / Geist Mono | Tired by context | Ranks 96 and 140, added October 2024. Vercel's house face; says "AI devtool" before it says anything else. | | Unbounded | Tired in its register | Rank 186; NaN's extended face for Polkadot, so it says web3 on dark with lime. Well made; usable only far from that colour world, and then Anybody or Science Gothic give you the width with an axis. | | Bricolage Grotesque | Tired | Rank 64; gleamstudio lists it with Inter and Poppins as "appears everywhere". The Space Grotesk of 2025. | | PP Neue Montreal | A default, not a decision | So ubiquitous that Pangram Pangram built an entire award-winning "travel guide" site for it in 2026. Like Helvetica (1,534 Fonts In Use entries), it is fine as a knowing choice and invisible as a differentiator. Not for a concept that is judged on appearance. | | Söhne (Klim) | Still sings, drifting to premium default | Stripe and Linear's face; the optical sizes and even texture are why. If used, use it the Klim way: small, quiet, and let one object carry the page. | | GT Standard, GT Mechanik, GT Flaire (Grilli) | Sing | GT Standard is a "typeface system" with four width families; Mechanik is 2026-new with a mechanical edge; the orange specimen (refs/grilli/desktop-s1.png) is the reference for colour-block plus weight extremes. | | ABC Gravity, ABC Repro Widths, ABC Oracle, ABC Diatype (Dinamo) | Sing (Diatype is close to the studio default now) | Width-variable builds; Gravity's heavy italic is the freshest display sans on any foundry homepage this year. | | Styrene, Canela, Graphik (Commercial Type); Grenette, Basis (Colophon, now via Monotype); Cardinal (Production Type); Tobias, Reckless (Displaay); Signifier, Tiempos, Epicene (Klim); Khteka (W Type); Tausend; Swear (OH no); Ogg (Sharp); Druk (Commercial) | Inspiration | These are what Typewolf's 2025–26 Sites of the Day actually pair; the pattern is high-contrast serif + neo-grotesque or mono. | | NN Nouvelle Grotesk + Selva Script | Inspiration, directly relevant | The ATypI 2026 conference identity: a plain grotesk colliding with a script. A summit identity that is not a trade-show sans. |

5. The print tradition: what is still un-mined on the web

6. Shortlist: 14 usable faces (Google Fonts, open licence), with the extremes that make them work

Family names are exact Google Fonts names; axes and ranges are from the metadata feed on 2026-10-14. Request custom axes through the CSS2 API with lowercase standard axes first, then uppercase custom axes, each group alphabetical, e.g. family=Fraunces:opsz,wght,SOFT,WONK@9..144,100..900,0..100,0..1.

| # | Family | Axes | Rank | Role and the extremes that sing | Pair with | |---|---|---|---|---|---| | 1 | Science Gothic (Font Bureau / Thomas Phinney et al., Bank Gothic revival, added 2025-11-19) | wght 100–900, wdth 50–200, slnt −10–0, CTRS 0–85 (contrast) | 1138 | The one nobody has used on a site yet, with a contrast axis no other free face has. Extremes: wdth 200 / wght 100 / CTRS 85 for a hairline extra-wide headline; wdth 50 / wght 900 / CTRS 0 for a compressed poster block; slnt −10 as the "in motion" state. Display only, keep above 32 px. | Newsreader (text), Martian Mono (labels) | | 2 | Big Shoulders (Patric King, Chicago; merged single family 2025-02-05; siblings Big Shoulders Stencil, Big Shoulders Inline) | opsz 10–72, wght 100–900 | 555 | Compressed industrial gothic for an energy summit without a turbine photo. Extremes: wght 900 at 320 px for a column-wide word; wght 100 at 160 px is a true hairline; opsz 10 / wght 500 for 12 px labels. | Literata (text), Handjet (numerals) | | 3 | Anybody (Tyler Finck, Etcetera Type Co.) | wdth 50–150, wght 100–900 | 741 | The kinetic width face: one word from compressed to extra-extended on a single axis. Extremes: wdth 150 / wght 800 filling the viewport; wdth 50 / wght 300 as a column of labels. | Fraunces at opsz 9 for small prose | | 4 | Mozilla Headline + Mozilla Text (Studio DRAMA, added 2025-07-28) | Headline wdth 75–125, wght 200–700; Text wght 200–700 | 1110 / 1207 | A grotesk with an opinionated M and heavy terminals, with a built-in text sibling. Extremes: Headline wdth 125 / wght 700 at 160 px; Text wght 300 at 17 px. Brand-flavoured (Mozilla) but far less loud than Google Sans. | each other | | 5 | Mona Sans (+ Hubot Sans) (GitHub / Degarism, added 2024-11-04) | wdth 75–125, wght 200–900 | 435 / 1291 | The workhorse that is not Inter, with a width axis. Extremes: wght 900 / wdth 75 heavy-compressed; wght 200 / wdth 125 hairline-wide. Hubot is the more technical sibling. | Newsreader or Literata | | 6 | Fraunces (Phaedra Charles and Flavia Zimbardi, Undercase Type) | opsz 9–144, wght 100–900, SOFT 0–100, WONK 0–1 | 85 | Popular only in its timid default; almost nobody touches SOFT and WONK. Extremes: opsz 144 / wght 900 / WONK 1 / SOFT 100 at 200 px for a Cooper-Black-era word (the retro revival madegooddesigns tracks, delivered as axes); opsz 9 / wght 300 / SOFT 0 for captions. | Martian Mono | | 7 | Playfair (Claus Eggers Sørensen, the 2023 variable, not Playfair Display) | opsz 5–1200, wdth 87–112, wght 300–900 | 243 | Playfair Display (rank 24) is the overused one; this is a different, far better family. Extremes: opsz 1200 / wght 300 at 600 px yields 1 px hairlines; opsz 5 at 12 px is sturdy. The Wallpaper* register done with care. | Mona Sans, Libre Caslon Condensed | | 8 | Newsreader (Production Type) | opsz 6–72, wght 200–800 | 121 | The honest replacement for Instrument Serif: a screen news serif with real optical sizes and italics. Extremes: opsz 72 / wght 200 at 96 px for a sharp light display; opsz 6 for footnotes. | Science Gothic, Big Shoulders | | 9 | Literata (TypeTogether) | opsz 7–72, wght 200–900 | 227 | The reading face for the map route (agenda descriptions, FAQ, bios). opsz 7 at 15 px with 1.5 leading reads for an hour. | any grotesk above | | 10 | Libre Caslon Condensed (Impallari, added 2026-09-28) | wght 400–700 | 1071 | Sixteen days old: a condensed Caslon for mastheads and datelines, the printers' default face turned into a poster. Check kerning and Windows hinting before shipping. | Mozilla Text | | 11 | Recursive (Stephen Nixon, Arrow Type) | MONO 0–1, CASL 0–1, CRSV 0–1, slnt −15–0, wght 300–1000 | 836 | The mind's voice. Composer at MONO 1 / CASL 0 (typed, machine), answer at MONO 0 / CASL 0.6 (spoken, human), on one axis. Extremes: wght 1000 / CASL 1 is brush-like; wght 300 / MONO 1 is code. | Newsreader for page prose | | 12 | Martian Mono (Evil Martians) | wdth 75–112, wght 100–800 | 688 | Wide "lab readout" mono for timetable, prices and labels at 11–13 px with +0.06 em tracking; wdth 112 / wght 800 for a chunky number. Alternatives: Sometype Mono (humanist, 840), Datatype (wdth 50–150, added 2026-03-10, rank 1870). | everything | | 13 | Handjet (David Březina, Rosetta) or Doto or Bitcount | Handjet ELGR 1–2, ELSH 0–16, wght 100–900; Doto ROND 0–100, wght 100–900; Bitcount CRSV, ELSH, ELXP, slnt, wght | 1352 / 1082 / 1856 | The Emigre bitmap lineage as a metering texture: numerals only (dates, countdown, prices, times) with the element shape animating from square to round. Pick one; never body text. | a quiet serif | | 14 | Climate Crisis (Daniel Coull for Helsingin Sanomat) | YEAR 1979–2050 | 1305 | One axis, named YEAR: the letterforms erode as the Arctic ice does. For an energy summit it is almost too on the nose, which is why one statement, once, bound to scroll, is the right dose. A gesture, not a system. | nothing |

Engines to handle with care: Google Sans Flex (wght 1–1000, wdth 25–151, opsz 6–144, slnt, GRAD, ROND 0–100; OFL since 2025-11-12; rank 125 and climbing) is the most capable free variable font ever shipped and it is Google's face; use it only as an axis engine for a one-off kinetic piece, never as the brand voice. Roboto Flex has 13 axes and is Roboto. Sofia Sans and Sofia Sans Extra Condensed run wght 1–1000, so wght 1 is a genuine hairline if a concept needs one. Strichpunkt Sans (wdth 100–200, added 2026-05-12), Saira Stencil (wdth 50–125, 2026-04-02) and Asap Sharp (wdth 75–125, 2026-08-25) are new enough to be unproven; worth a test, not a bet.

Three systems from the list, ready to commit to:

Setting rules that the best pages share: three sizes only, display:text ratio at or above 8:1; display leading 0.85–0.95; reading text 15–18 px at 1.4–1.6; labels 11–13 px, tracked +0.05–0.1 em, in mono or small caps, never both; 1 px hairline rules at full bleed; two colours. Technical note for the mechanics team: font-variation-settings changes trigger layout, so animate at most one or two elements at a time, bind them to CSS scroll-driven animations (animation-timeline: scroll()) rather than scroll listeners, subset hero words with the API's text= parameter, and serve the full variable file only where an axis is actually driven.

7. Provocations for ETS27

  1. The program drives the axes. Set the whole site in Science Gothic and let the agenda control it: the hour of day sets width (08:00 compressed at wdth 50, 17:00 extended at 200), the session format sets weight (keynote 900, workshop 300, conversation 500), and the mind's answers arrive at CTRS 85. A visitor reads the day's shape before a single title.
  2. Three words, three doors. "FREE YOUR MIND" in Anybody at wdth 150 fills the first screen; FREE is tickets, YOUR is the lineup, MIND is the composer. Scrolling collapses the width axis to 50 so the sentence becomes a column, and the column is the agenda.
  3. No headline, only a dateline. The hero is "Austin, Texas — 3–6 May 2027" in Libre Caslon Condensed at 240 px between two newspaper flag rules, with the theme as an 11 px small-cap running head. Everything else on the page is Monocle-small. The luxury is restraint, and the facts the brief demands are the first thing on screen.
  4. The agenda as a concrete poem. Each day is a constellation: a session title is placed by its time (vertical) and room (horizontal) in Big Shoulders at a weight set by expected audience, so Tuesday reads as a shape (Gomringer's "silencio"); hovering resolves one word into a card. The map route is literally a map.
  5. One axis is the chat. The composer uses Recursive at MONO 1; as the mind's say streams, the same glyphs slide to MONO 0 / CASL 0.6. No bubble, no orb, no avatar: the font performing "typed becomes spoken" is the entire interface feedback, and it costs one CSS transition per answer.
  6. A statement that erodes. One sentence in Climate Crisis, YEAR bound to scroll position: it degrades toward 2050 as you move down the page and recovers as you scroll back. The site's only animation is the summit's subject.
  7. An issue, not a site. Masthead, folios 001–056, footnotes, a colophon ("Set in Newsreader and Martian Mono. Answers composed by Claude."). Speakers are contributors, sessions are articles, tickets are the subscription card. Eye's apparatus for an ideas summit; the mind's answers appear as marginalia in the gutter.
  8. The fork is a change of grid, not two buttons. The first screen is a strict Swiss page (label column, content column, hairlines, Grilli-style). Choosing "Ask the mind" un-grids it: labels drift, rules bend, the column breaks into a field of words; choosing "Open the map" snaps it back. Ray Gun's principle performed, without Ray Gun's look.
  9. Energy only in the numerals. Every figure on the site (3–6, 2027, $907.78, 09:30, the countdown) is set in Handjet with ELSH animating from square to round like a substation readout; every word is in a quiet serif. The industry shows up in the texture of its numbers and nowhere else.
  10. A single "27" you can barely see. Playfair at opsz 1200 / wght 300, 600 px tall, 1 px hairlines on warm white, thickening to wght 900 only as the pointer approaches. The one hover effect on the site, and a Wallpaper*-grade luxury move with no photograph.
  11. "312 minds free right now." Dinamo's "29 online" as a live counter in the corner, set in the label face, true to the second. Life in the page with zero decoration.

8. What I would not do

Not the MONOLOG layout (it is the Awwwards default now). Not Instrument Serif in any role. Not a heavy grotesk at 0.85 leading as the main event unless it carries one of the conceits above. Not grain. Not the weight axis as the animated one; width, optical size, contrast, element shape and MONO are where nobody is looking. Not more than one axis-driven element per screen; the mechanics brief's streaming model deserves the budget.