Typography And Spacing System

Requirement

Typography and spacing must keep INTO Consulting outputs calm, readable, and senior. The system should prevent oversized display type, heavy heading weights, inconsistent text gaps, and slide compositions that look more impressive than useful.

Constraints

• INTO Consulting only.
• Use Newsreader, Lexend, and IBM Plex Mono only.
• Warm Light is the default readable surface.
• Blueprint Dark is reserved for cover, pause, command, and high-contrast moments.
• Petrol is for action, current path, selected state, and primary signal.
• Saffron is for caution, milestone, comparison, and chart signal only.
• Decks, reveal.js slides, and interactive workshops must be readable as static exports without presenter explanation.
• Browser, app, workshop, and hybrid-review type and spacing use rem. Convert to points, pixels, or inches only at the medium boundary.
• Baseline rhythm uses a 0.25rem micro baseline for type alignment and a 0.5rem structural baseline for layout spacing, gutters, padding, and control sizes.

Bet

The system should start smaller and cleaner than the maximum allowed scale. That costs some theatrical impact, but it makes slides, workshops, and review surfaces feel composed rather than fancy, messy, or agent-generated.

Failure Modes

• Display/H1 type dominates the canvas instead of leading it.
• Newsreader is used too heavy, making the brand feel thick and old.
• Every heading uses a different after-gap.
• Body copy spans too wide or is squeezed into dense multi-column blocks.
• Agents shrink text to make KPIs, tables, charts, annotations, or footnotes fit inside a box.
• Petrol fills too many items and competes with the primary button.
• Reveal.js or workshop slides use complex custom layouts when two columns would be clearer.

Font Roles

Family	Weight	Use
Newsreader	400 default, 450 maximum when optical weight needs correction	Display, H1, slide titles, covers, section titles, quotes, major numerals.
Lexend	300 body, 400 UI labels and subheads, 500 buttons only	Body, leads, captions that should read normally, app/workshop controls.
IBM Plex Mono	400 or 500	Section markers, figure labels, specs, metadata, IDs, source notes, compact status.

Do not use 600, 700, or synthetic bold in canonical work. If hierarchy is unclear, increase spacing or change placement before adding weight.

Baseline System

Use baselines before improvising margins.

Baseline	Value	Use
Micro baseline	0.25rem	Type line-height correction, icon alignment, hairline offsets, caption attachment.
Structural baseline	0.5rem	Spacing scale, grid gutters, padding, button heights, table rhythm, component rhythm.
Major pause	4rem to 6rem	Section resets, slide pauses, chapter breaks, cover-to-argument transitions.

Rules:

• Line-height, margin, padding, gutter, and component heights should land on a 0.25rem or 0.5rem multiple.
• Use the 0.25rem baseline to align type and icons; use the 0.5rem baseline for layout spacing.
• If a value falls between tokens, choose the nearest token and adjust copy, grouping, or layout before inventing a new gap.
• Baseline overlays are construction tools, not visible brand elements.

Type Scale

Use the low end first. The high end is a ceiling, not a target.

Role	Browser / Workshop / App	Google Slides Reader-First	Google Slides Presented
Cover title	3.25-4.5rem	54-66pt	60-72pt
Slide / page H1	2.5-3.5rem	34-44pt	42-56pt
Section title	2.75-4rem	40-52pt	48-64pt
Lead / argument	1.0625-1.25rem	18-21pt	22-26pt
Body	1-1.125rem	16-18pt	20-24pt
Caption / meta	0.6875-0.8125rem	10-12pt	12-14pt

Defects:

• Browser/workshop H1 above 4rem on a normal working slide is too large.
• Presented slide titles above 56pt need a documented reason.
• Body below 1rem or 16pt is too dense.
• Presented body below 20pt is a defect.
• A two-line title is acceptable. A three-line title usually means the claim should be rewritten or split.

Type Specs

Every type role must specify font, weight, size, line-height, letter spacing, flow margins, max measure, and use.

Role	Font / Weight	Size	Line Height	Letter Spacing	Margins	Use
Cover / hero	Newsreader 400	3.25-4.5rem	1.0-1.06	0	0 before, 1.5-2rem after	Covers, title cards, high-emphasis editorial moments.
Page H1	Newsreader 400	2.5-3.5rem	1.04-1.1	0	3-4rem before when not first, 1.25-1.75rem after	Page, slide, and review-surface titles.
Section title	Newsreader 400	2.75-4rem	1.04-1.1	0	4-6rem before, 1.5-2rem after	Chapter, section, room-reset headings.
Subheading / card title	Newsreader 400	1.35-1.65rem	1.12-1.2	0	2rem before, 1rem after; 0 before inside cards	Peer item titles, card titles, compact editorial headings.
Lead	Lexend 300	1.0625-1.25rem	1.5-1.6	0	0 before, 1-1.5rem after; max 50ch	Argument line, summary, reader handoff.
Body	Lexend 300	1rem	1.55-1.65	0	0 before, 1rem after; max 56ch	Normal prose and explanations.
Button	Lexend 500	0.875rem; 0.8125rem compact	1.2	0	Component padding only	Actions and commands.
Caption / meta	IBM Plex Mono 400 or 500	0.6875-0.8125rem	1.35-1.5	0	0.75rem before when attached to figures	Captions, source notes, IDs, metadata, spec labels.

Default letter spacing is 0. Do not use negative tracking. Mono markers get their rhythm from content structure, separators, and placement rather than extra tracking by default.

Display And Italics

Newsreader display classes are reserved for covers, H1s, section breaks, quotes, major numerals, and editorial title moments. They are not a general way to make normal headings feel designed.

Italics are allowed only for:

• One short heading phrase that needs editorial contrast.
• Quotation-like emphasis in a display or quote surface.
• A deliberate title-card contrast when the surrounding type remains roman.

Never use italics in buttons, UI labels, data labels, chart labels, table cells, source notes, or body emphasis. Use clearer wording or hierarchy instead.

Minimum Legibility Floors

The system has both ceilings and floors. Never solve a layout problem by making text tiny. Split the slide, widen the exhibit, remove copy, reflow into records, or move detail to the appendix before going below these floors.

Text Surface	Browser / Workshop / App	Google Slides Reader-First	Google Slides Presented	Rule
Body and explanations	1rem	16pt	20pt	Do not reduce below the body floor.
Table cells	0.875rem absolute, 1rem preferred	12pt absolute, 14pt preferred	16pt absolute, 18pt preferred	Split columns or use appendix before shrinking.
KPI labels and explanations	0.8125rem label, 0.9375rem explanation	11pt label, 14pt explanation	13pt label, 16pt explanation	Values can be large; explanations must stay readable.
Chart axis / direct labels	0.75rem absolute	10pt absolute	12pt absolute	Remove grid/detail before shrinking labels.
Chart annotations	0.8125rem	11pt	13pt	Annotations should be read, not decoded.
Source notes / footnotes	0.6875rem absolute, 0.75rem preferred	9pt absolute, 10pt preferred	11pt absolute, 12pt preferred	If the note matters legally or evidentially, keep it readable or move it to a notes slide.
Button labels	0.875rem default, 0.8125rem compact	12pt	14pt	Do not squeeze labels to fit decorative button width.
Mono metadata	0.6875rem absolute	9pt absolute	11pt absolute	Metadata is quiet, not microscopic.

Defects:

• Any production text below the absolute floor for its medium.
• A KPI card with a readable value and unreadable label, period, delta, or caveat.
• A chart whose axis labels, direct labels, annotation, or source note require zooming.
• A table compressed into a card when it should be a full-width exhibit or appendix table.
• A footnote that carries source, assumption, legal, or commercial meaning but is treated as decoration.

Agent fallback order:

1. Remove nonessential copy.
2. Use one or two columns with stronger margins.
3. Move dense evidence to a full-width exhibit.
4. Split into another slide/page.
5. Move detail to appendix, source note, drawer, or export.
6. Only then consider the lowest permitted floor.

Text Rhythm

Use stable gaps so agents do not improvise margins.

Relationship	Gap
Label to title	0.75-1rem
Title to lead/body	1.25-1.75rem
Lead to body	1-1.25rem
Body paragraph to paragraph	0.75-1rem
Body to action row	1.75-2.25rem
Body to exhibit	2-3rem
Exhibit to source note	0.75-1rem
Exhibit to next argument	2.5-4rem
Slide section pause	4-6rem

Convert these rem values to points, pixels, or inches only at the medium boundary. The browser-facing type system remains rem-first.

Avoid symmetric heading margins. A heading belongs to what follows it: small after-gap, larger before-gap when it starts a new section.

Slide Composition Rule

Default slide geometry is simple:

• One claim per slide.
• One or two columns by default.
• Left column: label, title, argument, action or source.
• Right column: proof, image, chart, table, activity, or decision surface.
• Full-width rows are for evidence that genuinely needs width.
• Three columns are an exception for peer lists, agenda items, compact comparisons, or KPI triplets.
• Do not use four-column slide bodies.
• Do not add decorative panels to create visual interest.

Reveal.js presentations follow the same rule. Reveal owns the shell and keyboard route; it does not grant permission for louder type, tighter margins, or novel layout systems.

Color And Emphasis

Color should not be asked to solve hierarchy that type and spacing failed to solve.

• Primary button: petrol fill.
• Secondary button: hairline or pale surface.
• Current item: petrol text, left rail, underline, outline, or soft surface. Avoid petrol fills unless the item is itself the primary action.
• List items, agenda rows, slide thumbnails, tabs, and pager controls should not compete visually with the primary button.
• Body text stays primary or secondary text color.
• Muted text is for labels, metadata, source notes, and disabled explanation.
• Saffron never styles ordinary buttons, tabs, cards, or selected states.

Review Gate

Before a slide, workshop, or reveal.js build is accepted:

• H1/title size is checked against the ceiling.
• Newsreader weight is 400 or lower unless the exception is documented.
• Browser-facing type, spacing, and component dimensions use rem tokens.
• Line-heights and vertical margins snap to the 0.25rem or 0.5rem baseline system.
• Every type role states font, weight, line-height, letter spacing, margins, and max measure.
• Letter spacing is 0 unless a medium-specific legacy reconciliation note explicitly accepts otherwise.
• Label/title/body/action gaps use the rhythm table.
• Body line length stays within 35-56 characters where possible.
• Slide content uses one or two columns unless an exception is named.
• Only one primary petrol action exists on a surface.
• Current/selected items do not look like extra primary buttons.
• Italics are absent from UI, data, table, chart, body, and button text.
• A static/PDF export is readable without presenter notes.

See the full spacing and radius reference →