Brand System · Foundation chapter
Two families split by what the text is doing rather than by heading and body. Every metric on this page was measured from the licensed fonts, and every specimen is set at the values the canonical source specifies.
Every specimen below is set in the licensed Strawford and Geomanist webfonts at the exact size,
line height, tracking and weight foundations/typography.md specifies, and the values are read out of that file rather than copied into this one.
docs/typography/build-specimens.py parses the scale tables and generates the
specimens; --check fails if the two ever disagree. Nothing here is a screenshot and
nothing here is a transcription.
foundations/typography.md is canonical. Where this page adds a specimen string, a
demonstration size or an illustrative layout, that content is presentation-layer
only and is labelled as an example. No rule, value or open item on this page
originates here. Typography remains Ready for review, not approved;
the weight approvals in chapter 04 are the source's working position, not Fernando's sign-off.
Chapter 01
The families are not split into headings and body. They are split by what the text is doing.
That distinction is the whole system, and it is the one most often lost in implementation, because "display font and body font" is the shape almost every other type system has. Here the question is not how big the text is. It is whether the reader is meant to remember it, work through it, or be stopped by it.
Clarity emerging
For ideas that should be held in mind after the reader looks away. Strawford's low x-height and long ascenders give it air and poise at large sizes.
Comprehension over character. Long-form copy, navigation, cards, interface, forms, lists, explanations, metadata and captions.
For comprehension over character. Its larger x-height and tighter line box make it dense, calm, and highly legible at text sizes.
Evidence first
Geomanist Bold has a larger x-height than Geomanist Book (525 against 500) so it reads bigger and more insistent at identical size. Use it when a statement must land immediately rather than gracefully.
Strawford display and Geomanist Bold display in the same frame produce two competing headlines. Pick the voice the layout needs, then commit to it.
Clarity emerging from uncertainty
One display voice. The supporting line is text, and it reads as support.
Correctone voice leads, the other explains
Clarity emerging
From uncertainty
Wrongtwo display voices, so neither is the headline
Presentation-layer example. The sizes in these two panels demonstrate the rule and are not canonical tokens.
A split by size breaks the moment a small piece of text needs to be memorable, or a large piece needs to be read. A split by purpose never does.
Chapter 02
Both families measured from the installed OTFs, normalised to a 1000-unit em. Three findings drive the whole system.
| Metric | Strawford | Geomanist | Consequence |
|---|---|---|---|
| Cap height | 700 | 700 | Caps match exactly, so uppercase labels need no size compensation when swapping families |
| x-height | 450 | 500 | Strawford lowercase is 11% smaller at the same size |
| x-height : cap | 0.643 | 0.714 | Strawford reads smaller and more elegant; Geomanist larger and more direct |
| Ascender (hhea) | 900 | 750 | |
| Descender (hhea) | −300 | −250 | |
| Total line box | 1.20 em | 1.00 em | Strawford needs more vertical headroom |
| Lowercase alphabet width | 12916 | 12992 | Effectively identical, so one measure specification serves both |
Width of n | 543 (all weights) | 537–583 | Strawford does not reflow across weights; Geomanist does |
n at 543
units, so weight can change without reflowing a headline.Strawford · x-height 450
Hamburg
x-height : cap = 0.643
Geomanist · x-height 500
Hamburg
x-height : cap = 0.714
Both lines are set at the same nominal size and the caps match exactly, because cap height is 700 in both families. Only the lowercase differs; Strawford's is 11% smaller. That is why sentence-case display type needs an 8–10% increase when moving from a higher-x-height face, and why uppercase labels need none.
Strawford: every weight sets n at 543 units
Clarity emerging
Clarity emerging
Clarity emerging
Light, Regular, Medium: measured 286.33 / 285.69 / 286.81 px. Spread 1.12 px.
Geomanist: n ranges 537–583 across weights
Clarity emerging
Clarity emerging
Clarity emerging
Book, Medium, Bold: measured 279.50 / 284.55 / 286.92 px. Spread 7.42 px.
Three weights, one size, one string, stacked with hugging boxes so the right edges can be
compared. Because every Strawford weight sets n at 543 units, the three lines land
within 1.12 px of each other, so a headline's breaks can be set once and the weight
tested afterwards. Geomanist's n varies by weight, and the same string spreads
7.42 px, which is why a Geomanist Bold statement has to be re-broken if its
weight changes.
One precision worth stating. The source's duplexing claim is about
n, and that is exact: measured in the browser, n is
543 units per 1000 in all three Strawford weights, against
554 / 560 / 567 in Geomanist Book, Medium and Bold. Across a whole
string other letters vary slightly even in Strawford, which is why the spread above is 1.12 px
rather than zero. Non-reflowing does not mean pixel-identical; it means the difference
cannot move a line break. The specimen string and its measured widths are
presentation-layer content.
Chapter 03
Four scales, each with a job. Sizes are optical, not derived from a single ratio. The step narrows as the scale descends, because perceived difference compresses at smaller sizes.
A 128 px specimen on this page genuinely renders at 128 px and scrolls inside its own rail rather than being scaled down. Scaling it would falsify the rule the ladder exists to demonstrate: tracking is a property of rendered size (chapter 05), so a shrunken specimen would show the wrong setting while claiming the right number.
display-xxl
Clarity emerging
display-xl
Clarity emerging
display-l
Clarity emerging
display-m
Clarity emerging
display-s
Clarity emerging
heading-l
Clarity emerging
heading-m
Clarity emerging
heading-s
Clarity emerging
Strawford Light is specified above 96 px only. Below that it loses stem weight against the paper and reads uncertain rather than refined. Strawford Bold and Black are not in the system: at display size the bold weights thicken the round bowls and lose the elegance that justifies the family. A headline needing that weight is a Geomanist Bold headline.
card-title
Digital impact consultant
card-title--lg
Digital impact consultant
The reason is legibility of the system, not of the type. At 28 px, Strawford and Geomanist are hard to tell apart to anyone who is not a type designer, differing mainly in x-height. Spending Strawford there buys no distinctiveness and costs the clarity of the two-voice split. Strawford earns its place where its silhouette is visible: display size.
For layouts where Geomanist Bold is the display voice.
statement-xl
Evidence first
statement-l
Evidence first
statement-m
Evidence first
stat-xl
Evidence first
stat-l
Evidence first
lead
Typography carries the identity. Colour supports it. A page that needs a logo to look like Fernando Kylas has a typography problem.
body-l
Typography carries the identity. Colour supports it. A page that needs a logo to look like Fernando Kylas has a typography problem.
body
Typography carries the identity. Colour supports it. A page that needs a logo to look like Fernando Kylas has a typography problem.
body-s
Typography carries the identity. Colour supports it. A page that needs a logo to look like Fernando Kylas has a typography problem.
caption
Measured 2026-07-25 from the licensed OTFs
label
Foundation chapter
button
Digital impact consultant
nav
Digital impact consultant
Body text never drops below 16 px in main content. Geomanist Book is the body weight, not Regular.
Chapter 04
Measured from the installed files. Strawford ships fourteen OTFs and Geomanist nine; the system uses seven faces between them.
| Weight | Status | Use |
|---|---|---|
| Strawford Light | Approved | Display at 96 px and above |
| Strawford Regular | Approved | Display 36–84 px |
| Strawford Medium | Approved | Headings 22–32 px |
| Strawford Bold, Black | Not used | Loses the family's refinement at display size |
| Strawford Thin, ExtraLight | Not used | Insufficient stem weight at web rendering sizes |
| Geomanist Book | Approved | Body copy |
| Geomanist Regular | Approved | Captions and metadata |
| Geomanist Medium | Approved | Labels, navigation, buttons, card headings |
| Geomanist Bold | Approved | Statements, statistics, confident display |
| Geomanist Black, Ultra | Not used | Reads promotional rather than considered |
foundations/typography.md §14 records that weight approvals are provisional: the table reflects the v3.1 working position, not Fernando's explicit
sign-off. Read this column as in use and intended, not as
AGENTS.md §2 Approved. The distinction is chapter 14, item 5.
Strawford Bold, Black, Thin and ExtraLight, and Geomanist Black and Ultra, are absent from the
engine's fonts.css, so they cannot be specimen'd here even to show why they are
refused. That is the correct behaviour: a system that loads a face it forbids
invites its use. The refusal is documented rather than demonstrated.
Desktop OTFs
Romans only. Nothing designed in Figma, Illustrator, InDesign or any desktop application may depend on a Geomanist italic.
Webfont package
Includes an italic for all nine weights, so the website may use them.
Where a design must work in both places, treat Geomanist as roman only.
Chapter 05
Tracking is a function of size, not a fixed value per family.
| Size range | Strawford | Geomanist |
|---|---|---|
| 96 px and above | −0.035 to −0.030 em | −0.024 to −0.020 em |
| 64–95 px | −0.030 to −0.026 em | −0.020 to −0.018 em |
| 40–63 px | −0.026 to −0.016 em | −0.016 to −0.012 em |
| 24–39 px | −0.016 to −0.006 em | −0.012 to −0.004 em |
| 17–23 px | −0.006 to 0 em | 0 em |
| 13–16 px | not used | 0 to +0.010 em |
| Uppercase labels | not used | +0.08 to +0.14 em |
Strawford is a geometric with wide, round bowls. Tracking tighter than −0.035 em closes the counters between adjacent round letters and the headline looks clotted.
Good counters
Correct−0.035 em at 96 px
Good counters
Clotted−0.075 em: the round bowls collide
The over-tracked panel uses a presentation-layer value chosen to make the failure visible. It is not a token and appears nowhere in the canonical source.
Never track uppercase labels below +0.08 em. Never track lowercase positively except at caption size.
Foundation chapter
+0.140 em: the label token
Foundation chapter
0 em: below the +0.08 em floor, and illegible at label size
Chapter 06
Because both families set to the same width, one specification serves both. Average character width measured from the rendered specimen: Geomanist text 0.45 em, Strawford display 0.39 em.
text: width ÷ (size × 0.45)
display: width ÷ (size × 0.39)
| Role | Width | Characters |
|---|---|---|
| Lead paragraph | 620–700 | 56–64 |
| Long-form body | 580–660 | 62–70 |
| Editorial section intro | 700–760 | 60–68 |
| Card body | 280–340 | 33–40 |
| Social body on 1080 | 760–820 | 45–55 |
| Caption and metadata | 400–520 | 55–70 |
Inside the measure. A long-form body line at 620 px holds roughly 66 characters, which is what the range specifies, and the eye returns to the left margin without hunting for the next line.
Past the measure. This line ignores the specification and runs to 820 px, so the return sweep gets longer with every line and the reader begins to lose the start of the next one. The dashed rule marks 620 px, and this paragraph crosses it.
Dashed rule at 620 px, the lower bound of the long-form body range. Held at true size, so it scrolls on a narrow screen rather than shrinking; a rail drawn at less than 620 px would mark the wrong measure. The 820 px overshoot is a presentation-layer value chosen to make the failure visible.
| Display role | Characters per line | Max lines |
|---|---|---|
| Hero statement | 18–28 | 3 |
| Section introduction | 24–34 | 3 |
| Social headline on 1080 | 14–20 | 4 |
| Story headline | 12–18 | 4 |
| Pull quote | 26–36 | 4 |
A display line past 34 characters stops reading as a statement and starts reading as a sentence.
Set display line breaks by hand. Aim for a descending or near-equal rag: longest line first or second, shortest never in the middle. Where a headline breaks to three lines, the last line should carry the emphasis, because it is where the eye rests.
Recommendations are
cheap. The reasoning
behind them is not
Correctnear-equal rag, emphasis on the last line
Recommendations are cheap.
The
reasoning behind them is not
Wrongline two is markedly short, so the break reads as a mistake
Presentation-layer example. Both panels use the same size; only the hand-set breaks differ.
Chapter 07
Mathematical alignment is not optical alignment.
At 64 px and above, shift display text left by about 0.022 em, roughly 3 px at 128 px, so the stem aligns optically with the column beneath. Left side bearings scale with size, so large type appears indented when set to the same coordinate as small type. Never the reverse: small text indented further right than large display type reads as a broken column.
Optical
The stem lines up with this paragraph.
Correctmargin-left: −0.022em
Optical
The headline sits visibly indented from this paragraph.
Wrongset to the same coordinate, so it reads as indented
Hung
“The reasoning behind a recommendation is the part worth paying for.”
Not hung
“The reasoning behind a recommendation is the part worth paying for.”
Hang opening quotes outside the measure in pull quotes, so the first letter, not the mark, starts the line.
A statistic beside lowercase text
18.03 contrast on paper
Both families use cap-height lining figures, so the numerals sit high against lowercase. Align statistics to their own baseline.
Round letters overshoot by design
Oo Cc Gg ee
O, C, G, Q, o, c, e overshoot baseline and cap line by about 1.5% by design. Do not correct them.
An underlined link has padding and a rule below but nothing above, so its box is vertically asymmetric. Centring that box against a button leaves the link's text sitting high, measured at 7 px in this system. Give the link a top padding equal to its bottom padding plus its border, so the box becomes symmetric. Verify by measuring rendered text, not element boxes.
Wrongthe link's text sits high against the button label
Correcttop padding restores a symmetric box
| Property | Value |
|---|---|
| Direction | Row; wraps to a stack only when space genuinely runs out |
| Vertical alignment | Centre, corrected for the link's asymmetric box |
| Gap, button to link | 32 |
| Gap, button to explanatory note | 40 |
| Button label | Never wraps: white-space: nowrap, and prevent shrinking |
The button must never shrink or wrap to make room for adjacent text. A wrapped button label reads as a broken component in a way a stacked note does not.
Tracked uppercase adds a trailing space after the final letter. Ignore it when aligning left; when centring, offset right by half the tracking value.
Chapter 08
The rule governing everything off the website. The website canvas displays at 1:1. No other canvas does.
A social image authored at 1080–1200 is viewed at roughly 360–390 px, dividing every value by about three. An A4 page authored at 1240 px prints at 210 mm, so 1 px becomes 0.169 mm. Type tiers carried unchanged onto these surfaces are not small; they are invisible.
a 12 px label on a 1200 canvas reaches the reader at 3.6 px
a 19 px body-l on a 1200 canvas reaches the reader at 6.9 px
Below roughly 8–9 px effective, strokes fall under the resolving limit at normal phone viewing distance.
| Surface | Divisor | Nothing meaning-bearing below | Anything to be read, at least |
|---|---|---|---|
| 1080 social | ÷ 2.8 | 30 px | 34 px |
| 1200 social | ÷ 3.3 | 30 px | 34 px |
| 1240 A4 | 0.169 mm/px | 21 px (10 pt) | 24 px (11.5 pt) |
Nothing below 2.8% of canvas width may carry meaning, and anything the reader must actually read sits at or above 3.1%.
Website · 1:1
Digital impact consultant
12 px, viewed at 12 px: legible
Social · the same tier, ÷ 3.3
Digital impact consultant
effectively 3.6 px: this is what the reader receives
Presentation-layer demonstration. The 3.6 px rendering is the arithmetic of the ÷ 3.3 divisor
applied to the 12 px label tier, shown at the size the reader would actually
receive. It is not a token.
Display tiers already clear both thresholds. It is only label,
caption, body and button that must be restated per
canvas. Print floors follow accessible-print guidance rather than WCAG, which does not govern
images or paper: 8 pt is the accessibility floor; 10 pt upward suits documents a client
reads while making a purchase decision.
Chapter 09
In a swipeable set the frame is fixed and only the content should move. Any element that changes position between slides reads as a different card rather than the next page of the same card.
Pinned: the statement top sits at a constant coordinate
Correctthe numeral occupies a fixed band, so the statement lands on the same line on every slide
Distributed with space-between: every position is a residue of the others
Wronga one-line body instead of a two-line body moves the headline
A carousel is one post, so a Strawford numeral paired with a Geomanist Bold statement puts two display voices in a single asset. Demote the numeral to metadata.
Chapter 10
The signature binds unrelated assets to one sender. If it moves, changes weight, and changes hue per channel, it stops doing that job and becomes decoration.
On paper
Fernando Kylas
On ink
Fernando Kylas
| Property | Value |
|---|---|
| Type | Geomanist Medium, label scale for the canvas, +0.14 em, uppercase |
| Colour | Primary ink on light, primary reversed on dark. Never a tertiary grey |
| Baseline | Set from the frame padding edge, never from a sibling's alignment |
| Social form | Green rule above, 24 gap, signature below |
| Never | Applied to any string other than the name |
Reserve the tertiary tone for counters and eyebrows. And a right-flush signature needs
margin-right: −0.14em to cancel the trailing letterspace, otherwise it sits inside the margin it appears to align to.
One component, one contract.
Chapter 11
Every layout must reward two people.
Reads the label, the display line, and the call to action.
Reads the supporting paragraph and the detail.
Cover every element set below 16 px. What remains must still communicate the proposition and the next action. If not, the hierarchy has failed the scanner. Then read only the covered text. If it merely restates the headline, it has failed the reader.
As authored
Know what is wrong before you pay to fix it
A diagnostic that separates what is measured from what is inferred, so the recommendations can be argued with.
Sub-16 px hidden: the scanner's view
Know what is wrong before you pay to fix it
A diagnostic that separates what is measured from what is inferred, so the recommendations can be argued with.
The right panel hides everything below 16 px. The proposition and the next action survive, so the hierarchy passes the scanner. Presentation-layer demonstration.
Because button is a 16 px token.
A 19 px threshold hides the call to action, so every layout fails a test it should pass. And a 16 px Medium label inside a filled pill carries its affordance from the shape, not the size, which is why the button survives the cover test even though it sits at the threshold.
Chapter 12
Which display voice each surface takes, and why. The pattern to notice: the faster the surface is scanned, the more often Geomanist Bold wins.
| Channel | Display voice | Notes |
|---|---|---|
| Website hero | Strawford display-xxl / display-xl | Three lines maximum, hand-set breaks |
| Website section intro | Strawford display-s / heading-l | Paired with a label eyebrow |
| Service cards | Geomanist Medium card-title | Card titles are interface, not editorial |
| Long-form article | Strawford display-m title, Geomanist body-l | Measure 620 |
| Case-study cover | Strawford display-l | Statistics in Geomanist Bold stat-xl |
| Testimonial | Strawford display-s, attribution caption | Hang the opening quote |
| LinkedIn single image | Geomanist Bold statement-l | Scanned at speed in feed |
| LinkedIn thought leadership | Strawford display-m | Slower, more reflective |
| LinkedIn carousel | Geomanist Bold statement-m | Consistency beats variety across slides |
| Instagram square / portrait | Either, chosen per post | Never both in one post |
| Instagram story | Geomanist Bold statement-l | Respect 250 top / 320 bottom clear zones |
| Proposal and presentation covers | Strawford display-l | Restraint is the point |
| PDF report and workbook covers | Strawford display-m with label eyebrow |
Chapter 13
The v3.1 source document also carried colour, spacing and layout rules. In this repository those belong to their own foundations, and two of them are still pending migration.
| Content | Destination | Status |
|---|---|---|
| Paper/ink tokens, text contrast ratios, green accent rules | colour.md | Migrated, authoritative for colour |
| Base unit 8, vertical rhythm scale, relationship spacing | spacing.md | Not yet migrated |
| Frame padding per canvas, content column widths | layout.md | Not yet migrated |
| Focus-indicator ring values, contrast thresholds | accessibility.md | Not yet migrated |
Colour Language is authoritative for both. They are restated here because they change how type may be set.
Green on light paper: 2.65:1
This is illegal as text.
Below both the 4.5 body and 3.0 large-text thresholds. Never set type in green on light paper.
Green on dark ink: 6.86:1
Here the same hue is text-capable.
One hue, two grounds, two verdicts. The asymmetry is a property of the ground, not the colour.
Setting a dark ground by inline background instead of the theme class detaches
every token hung off that class, silently leaking light-paper text colours onto a dark ground.
Treat an inline background on a themed container as a lint error.
The two panels above set background on a primitive deliberately; they are a specimen of two grounds side by side, not a themed container, and the text colours are pinned to
the matching primitives rather than inherited. A themed region would use the theme
attribute.
Chapter 14
Five items, carried forward from the v3.1 source. These must be settled before implementation, not after. They are reproduced here exactly as the canonical source records them.
Items 1 and 3 describe states that other canonical documents record as resolved. This chapter does not resolve them: the canonical source still carries them as open, and reconciling that is a decision, not a rendering. The apparent conflicts are flagged in place and reported alongside this chapter.
Medium
No :focus-visible rule exists in the system. The brand-led
answer is illegal: green measures 2.65:1 against paper, below the 3.0 minimum for a focus
indicator, and the old --shadow-focus token composites to roughly
1.1:1. Do not carry it into v3.1. Working values: a 2 px primary-ink ring at
2 px offset on light, primary-reversed on dark: 18:1 and 19:1.
Apparent conflict.
colour.md §14.7 records "No legal focus indicator exists" as
Resolved 2026-07-25, with focus-ring defined and measured
against every surface; ROADMAP.md agrees. The working values above match that
resolution. Not resolved here.
Medium
Tracking is a property of rendered size, so a fluid
clamp() holds its em tracking all the way down and produces the clotted setting
chapter 05 warns against. Sizes must step at breakpoints with tracking re-declared at
each step, and optical alignment must be scoped to 64 px and above rather than
applied fluidly.
This is why the scale ladders in chapter 03 scroll rather than scale: a shrunken specimen would demonstrate the failure this item exists to prevent.
Low
The remote Figma MCP executes on Figma's infrastructure and sees only
Figma's hosted font set. Locally installed fonts are invisible to it; custom fonts require
Figma shared fonts, which need an Organisation or Enterprise plan. The
FK Projects team is on Pro. Until that changes, Figma type must be set by hand
in the desktop application.
Apparent conflict. DECISIONS.md
(2026-07-23) records all 41 Typography Lab boards rebuilt natively in Figma: 34 shared text styles, 257 text nodes, all Strawford or Geomanist, via a local MCP server.
Not resolved here.
Low
The previous project's tokens.css still declares Host
Grotesk and Inter.
Medium
The Approved / Not used table in chapter 04 reflects the v3.1 working
position, not Fernando's explicit sign-off. Nothing in this chapter is
Approved in the AGENTS.md §2 sense.
Typography is the oldest mature foundation, and it shows.
Its metrics are measured, its reasoning is specific and its prohibitions carry consequences, it satisfies most of the editorial conventions the later chapters formalised. What it does not yet do is number its open items so they can be cited from outside the chapter, label which of its figures are judgements rather than measurements, or collect its reasoning into a decisions section. Those are gaps in form, not in substance, and closing them is an edit to the canonical source rather than to this rendering.
Two families. Not display and body, but memorable, clear, and confident.
Canonical source. foundations/typography.md, authoritative for every rule, value and open item on this page. Where this page and that file disagree, the file wins and this page is corrected.
Derivation. The metrics table, the four scale ladders and the tracking curve are generated from the canonical source by docs/typography/build-specimens.py, which parses its markdown tables. --check fails if the chapter and the source diverge. No size, line height, tracking value or weight on this page was transcribed by hand.
Source of the source. typography-v3.1.md, read read-only and reconciled per HANDOVER.md. Preserved in this repository at docs/typography/; the original also remains in the previous website project.
Metrics. Measured from the installed OTFs, normalised to a 1000-unit em. Type is rendered here from the licensed WOFF2 webfonts declared in the engine's fonts.css: the seven faces the system uses. The five faces marked Not used are deliberately not loaded and therefore cannot appear on this page.
Rendered specimen. typography-lab.html, 41 boards across website, LinkedIn, Facebook, Instagram and business documents. Preserved at docs/typography/typography-lab.html as historical reference; it is not superseded by this chapter and remains the fuller specimen set.
Presentation-layer values. Specimen strings; the −0.075 em over-tracking in chapter 05; the 3.6 px effective rendering in chapter 08; the illustrative sizes in the correct/wrong panels of chapters 01, 06 and 07; and the schematic slides in chapter 09. None is a token and none appears in the canonical source.
Not carried forward. The source's July 2026 node-count audit figures. The source marks them build-specific and warns against quoting them forward; they must be re-measured after any change.
One unresolved conflict recorded in the source. The dark-ground secondary text token was given as both #A6A6A6 and #ADADAD. colour.md resolved it to #ADADAD (8.87:1) on 2026-07-23; #A6A6A6 is Superseded.
Status. Ready for review, not approved. The weight approvals in chapter 04 are the source's working position, not Fernando's sign-off (chapter 14, item 5). Passing validation is evidence of readiness, not approval; only Fernando approves.
Related. Colour Language · Identity System · foundations/accessibility.md