Font size variables
14 size variables used as font sizes, largest ceiling first. Each sample renders at the live variable, so resize the window to see the clamp move. Change a value in Variables and every row here updates. 13 Story body sits last because it uses a relative unit with no fixed ceiling to sort by, like 12 CTA — by rendered size it actually sits near the top.
01 Display · --font-size--01-display · clamp(2.4rem, 3.85vw, 14rem) — was "Lrg Font Size"
Untold & Unsung
02 Display alt · --font-size--02-display-alt · clamp(2.4rem, 3.25vw, 14rem) — was "Lrg Font Size copy". Same floor and ceiling as 01; only the vw differs.
Untold & Unsung
03 Hero · --font-size--03-hero · clamp(6.5rem, 8vw, 12rem) — was "SupLrg Font size"
Volume #1
04 Hero alt · --font-size--04-hero-alt · clamp(7rem, 7vw, 12rem) — was "xxLrg Font size". Used by h1. Same 12rem ceiling as 03, smaller vw.
Volume #1
05 XL · --font-size--05-xl · clamp(3rem, 4.25vw, 10rem) — was "xLrg Font size"
Guardians of the Fairway
06 Large · --font-size--06-large · clamp(3rem, 3.25vw, 4.25rem) — was "Mid Font size". Same 3rem floor as 05.
Guardians of the Fairway
Navigation size · --navigation-size · clamp(1.65rem, 1.78vw, 2.3rem) — NOT renamed: no "font" in the name, so it sits outside the folder. It is a font size though, and by value it belongs between 06 and 07.
Stories · Print · Podcast · Cart
07 Body large · --font-size--07-body-large · clamp(1.4rem, 1.5vw, 2rem) — was "Std Lrg Font size"
Sport as culture, told properly. The untold and the unsung.
08 Body · --font-size--08-body · clamp(1rem, 0.45rem + 0.6vw, 1.75rem) — was "Std Font size". NOTE: the stored value still ends in a stray semicolon.
Body copy. The Stockholm Archipelago is home to a 44-mile swimrun challenge considered one of the toughest endurance events in the world.
09 Nav · --font-size--09-nav · clamp(1.3rem, 1.2vw, 1.6rem) — was "Nav Font size". Used across the cart.
Subtotal · £30.00 GBP · Continue to checkout
10 Small · --font-size--10-small · clamp(0.75rem, 0.85vw, 0.9rem) — was "xSm Font size"
Photography: Thiago Ribeiro · Words: Elle Hunt
11 X-small · --font-size--11-x-small · clamp(0.75rem, 0.6vw, 0.8rem) — was "Sm Font size". Same 0.75rem floor as 10.
Photography: Thiago Ribeiro · Words: Elle Hunt
13 Story body · --font-size--13-story-body · 2.5ch — the article body size. A character-width unit, so it has no fixed px value: it resolves against the PARENT's font, which is .off-story-body (Tiempostext). The sample below is nested inside .off-story-body so it renders at the true size; anywhere else on this page 2.5ch would compute differently.
Body copy at 2.5ch. The Stockholm Archipelago is the home of Ötillö, a 44-mile swimrun challenge considered one of the world's toughest endurance events.
12 CTA · --font-size--12-cta · 0.7vw — was "CTA-font-size". The only one with no clamp: no floor, no ceiling.
Add to cart · Buy now · Subscribe
REVIEW — the names do not match the actual order. Lrg maxes at 14rem, which is LARGER than xxLrg and SupLrg at 12rem. xSm maxes at 0.9rem, LARGER than Sm at 0.8rem. Reading the list by name gives the wrong idea of the scale.
REVIEW — duplicates and collisions. Lrg and Lrg copy share the same 2.4rem floor and 14rem ceiling and differ only in the vw term, so one is redundant. xxLrg and SupLrg share a 12rem ceiling but SupLrg has the larger vw, so it wins in the middle range. Mid and xLrg share a 3rem floor, so they render identically on small screens. Sm and xSm share a 0.75rem floor.
REVIEW — CTA-font-size is 0.7vw with no clamp. That is roughly 10px on a 1440px screen but under 3px on a 390px phone, and it keeps growing without limit on large displays. It is the one token in the set that has no floor or ceiling.
Typography
.title__hero — 11 uses / 11 pages
Hero title
.lrg__heading — 33 uses / 17 pages
Large heading
.sub__title — 81 uses / 42 pages
Sub title
.standfirst — 22 uses / 11 pages
Standfirst: the introductory paragraph that sits under a story title and sets the piece up.
.off-story-label — 32 uses / 5 pages
Story label
.off-story-body — 56 uses / 11 pages
Story body copy. The quick brown fox jumps over the lazy dog, files 800 words on the experience, and waits for the sub to cut it in half.
.off-nav-btn — 439 uses / 40 pages
Nav button
.footer_txt — 216 uses / 40 pages
.accordion-title — 34 uses / 17 pages
Accordion title
.story__cap — 18 uses / 9 pages
Image caption
.quote__byline — 7 uses / 5 pages
Quote byline
.off-pod-intro — 16 uses / 16 pages
Podcast intro copy
.description__product — 4 uses / 1 page
Product description, set in Tiempos Text. Product page only.
.sm__tag — 4 uses / 1 page
Small tag
.story__tag — 7 uses / 7 pages
Story tag
Type styles — off- system
The current naming system. Everything below sets type and was not already shown above.
.off-hero-title
Guardians of the Fairway
.off-subtitle
A subtitle sitting under a page heading
.off-feature-title
Amphibians of the Archipelago
.off-feature-standfirst
The standfirst that runs beneath a feature title, setting up the story in a sentence or two.
.off-story-copy
Story copy, used where the text is not inside a rich text editor.
.off-story-bold
A bold run inside story copy
.off-micro
Micro text — the smallest size in the system
.off-cta-sm
Small call to action
.off-pod-time-label
−28:14
.off-subscribe-label
Subscribe to the newsletter
.off-cart-item-name
Off-Field Volume #1
.off-cart-item-price
£24.00
.off-cart-subtotal-label
Subtotal
.off-cart-subtotal-value
£48.00
.off-cart-empty
Your cart is empty.
Type styles — legacy
The older naming from before the off- system. Some are still in use, some are almost certainly dead — this section is the audit list.
.lrg_statement
Sport as culture, told properly.
.hero__heading
Untold and unsung
.hero_title
Miracle on Ice
.title__hero
Enter the Gladiators
.section—title
Section title
.sm__dets
Small details line
.byline
Words by Elle Hunt
.credit
Photography: Thiago Ribeiro
.p__dropcap
The opening paragraph of a story, set with a drop cap so the first letter runs down two or three lines of copy.
.product__details
208 pages · 240 × 320mm · Limited to 1,000
.product__description
A screen-free celebration of the untold and unsung, from the cliffs of Bhutan to Sweden's Baltic shores.
.product__quote
"The best new sports title in years."
.product_details_sm
Ships worldwide
.podcast__season__title
Series 02
.pod__description
Meet sport's unheralded heroes, from athletics starters to volunteer lifeguards.
.description
A general description style, used in several places.
.description__long
The longer variant, for descriptions that run to a paragraph rather than a line or two.
.smll__decp
Small description
.small-details
Small details
.sm_intro_details
Intro details
.stockist_address
Magalleria, 22 Broad Street, Bath BA1 5LN
.quote_style
"A quote set in the older quote style."
.mono
Monospaced text 0123456789
Not shown, two orphaned families. The of- set (of-page, of-nav, of-logo, of-menu, of-eyebrow, of-dek, of-card-title, of-home-title, of-section-title, of-feature-title, of-feature-text, of-press-names, of-button, of-text-link, of-label, of-index, of-legal, of-footer-title, of-footer-logo) is a parallel system to off- ; note of-page against off-page. The m- set (m-logo, m-title, m-title-grey, m-read, m-legal, m-card-copy, m-feature-copy, m-feature-read, m-seen-label, m-seen-row, m-discover, m-foot-logo, plus -1 duplicates) looks like an abandoned mobile build. Neither appears on a current page.
Also not shown, three classes whose stored names end in a space, so neither the Designer API nor this page can apply them: lrg__heading, section_title, lrg__nav__btn. Rename them in the Designer to fix. Webflow default names (Text Block 19 to 61, Heading 5 to 71, Paragraph 4, Block Quote, Field Label) and the Finsweet consent set are left out on purpose.
Rich text
.off-story-body — 56 instances · the article body editor. Every style below is nested inside the Rich Text element, not a standalone class.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
Text link
Bold text
Emphasis
Superscript
Subscript
Heading 2 — a section break inside a story
Body copy. The Stockholm Archipelago is the home of Ötillö, a 44-mile swimrun challenge considered one of the world's toughest endurance events. Competitors cross 26 islands in pairs, swimming in their shoes and running in their wetsuits.
Heading 3 — a subsection
A second paragraph, to show the spacing between two consecutive blocks of body copy and how the measure holds at this width.
Heading 4
A block quote, pulled from the interview. It runs longer than a line so the wrap and the indent are both visible.
A paragraph containing an inline link to another story, plus bold and italic runs for reference.
.off-accordion-body — the accordion / FAQ editor. Set to white on the podcast page only.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
Text link
Bold text
Emphasis
Superscript
Subscript
Accordion body copy. Shorter than an article body and used inside the FAQ and podcast description panels, where it sits on a dark ground.
A second paragraph, to show the spacing between blocks in this context.
Rich Text Block — the unstyled Webflow default, for comparison. Anything landing on this means a class was missed.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
Text link
Bold text
Emphasis
Superscript
Subscript
Default rich text, inheriting only the body tag styles.
