Type & text styles

A live inventory of the text styles currently used across rmresearch.uk — each element is shown as it renders, with its current spec, so we can see what to keep or change.

The difference good evaluation makes

H1 · Nunito 700 · clamp(2.2rem, 5vw, 3.4rem) ≈55px · line-height 1.1 · #313131 (ink) · changed: weight now 700 (was 800 on the old live site)

What we do and how we work

H2 · Nunito 700 · clamp(1.75rem, 3.6vw, 2.5rem) ≈40px · line-height 1.1 · #313131 (ink) · note: several section headings are set lighter (weight 400, --wt-display) where used as .intro-heading/.latest-heading

Culture, place and impact

H3 · Nunito 700 · clamp(1.4rem, 2.4vw, 1.875rem) ≈30px · line-height 1.1 · #313131 (ink)

A co-designed Story of Change

H4 · Nunito 700 · 1.125rem (18px) · line-height 1.1 · #313131 (ink)

Embedding evaluation skills in the team

H5 · 1rem (16px) · renders in Open Sans regular (weight 400), body line-height 1.65 — H5/H6 are not covered by the Nunito-700 heading rule (only H1–H4 are), so they look like body text, not headings. Likely a spot to change.

A small sub-label

H6 · .875rem (14px) · same as H5 — Open Sans regular, not Nunito bold (not covered by the heading rule)

We help organisations understand what they do, the difference they make, and what they could do better. Most of our work is evaluation — co-designed with the people a programme is for, fed back while the work is still live, and written up so it reaches the audiences who need it.

Body (P) · Open Sans 400 · 1rem (16px) · line-height 1.65 · #313131 (ink) · changed: old live body was ~14px; kept at 16px here for legibility

Inside a long-form content page (the .prose column used for reports and articles), body copy is set a touch larger and to a narrower measure for reading. This paragraph shows that variant.

Body in .prose · Open Sans 400 · 1.0625rem (17px) · line-height 1.65 · max-width 760px · #313131 (ink)

Here is a sentence with an inline link so you can see it at body size, in context. Links are the same size as the surrounding text and have no underline until you hover.

Link · inherits body size · #36a9e1 (blue) · no underline · on hover: underline appears (colour unchanged). Hover a link above to see it.

  • Scope and co-design the framework
  • Collect evidence alongside the team
  • Reflect, analyse and share the story

Unordered list · browser default styling (no custom list rule in global.css) · text inherits body spec

  1. Agree the questions that matter
  2. Gather and make sense of the evidence
  3. Report back and act on the learning

Ordered list · browser default styling (no custom list rule) · text inherits body spec

Expertise sits well beyond professional evaluators — we listen for the voices of the people a programme is for.

Blockquote · browser default styling (no custom blockquote rule in global.css) · a candidate to style if we want pulled quotes to stand out

Inline emphasis: this is bold text and this is italic text within a normal paragraph.

Bold (strong) · weight 700, colour inherits (ink) · Italic (em) · body spec, italic

Inside .prose, bold text is coloured purple — used to pull key phrases out of long-form copy.

.prose strong · weight 700 · #422981 (purple) · differs from a plain strong, which stays ink-coloured

Small print / caption text as it appears in footers, dates and card labels.

Small / caption · no single global rule — the site uses ad-hoc sizes per component, e.g. footer .9rem, card kind label .78rem uppercase, post date .95rem. [?VERIFY: no shared caption token exists; sizes are set per-component]