Typography ​

Bootstrap

Three families on a fixed scale (largest → smallest below). Copy tone → Content. When to use which → Rules.

FamilyRole
Newsreader (600)Display and headings — names things
Manrope (400–700)Body, UI, labels, dates
IBM Plex Mono (tabular)Counts, money, IDs in tables and summaries — not dates

Type scale ​

Largest to smallest. Samples use Bootstrap markup (h1, display-1, …); theme.scss replaces CDN Bootstrap heading styles.

44px

Sqrl CRM

Display / hero · Newsreader · 600 · marketing and empty-state heroes only

36px

Sqrl CRM

H1 / page title · Newsreader · 600 · one per screen in the page header

30px

Sqrl CRM

H2 / card title · Newsreader · 600 · cards and primary section titles

25px

Sqrl CRM

H3 / panel title · Newsreader · 600 · modals, drawers, nested panels

21px

Sqrl CRM

H4 / subheading · Newsreader · 600 · groups inside a panel or long form

18px

Sqrl CRM

Large body / metric · Manrope · 500 · KPIs and emphasized single lines

16px

Sqrl CRM

Body / UI base · Manrope · 400 · dense toolbars and compact UI blocks

14px

Sqrl CRM

Body default · Manrope · 400 · paragraphs, buttons, fields, nav links

13px

Label · Manrope · 600 · field labels, compact inputs, dropdown rows

12px

Sqrl CRM

Caption · Manrope · 500 · helper text and pagination chrome

11px

Sqrl CRM

Micro-caps (min size) · Manrope · 700 · badges, table headers, uppercase metadata

Mono (IBM Plex Mono, 13px typical): font-monospace, sq-cell--num — not on this scale; see Tables and summaries.

Tables and summaries ​

  • Money and counts: sq-cell--num — Table.
  • Dates and times: Manrope — sq-cell--date (Content).
  • Pagination numerals: font-monospace fw-bold on the range/total only — Pagination.

Rules ​

Families ​

  1. Serif for display + h1–h4 — Layout page title uses h1. Count in metric cards.
  2. Sans for UI and dates; mono for numeric data only.

Weights and case ​

  1. Serif headings 600; body 400; labels / caption 500; micro-caps 700 + text-uppercase.
  2. Sentence case in UI; uppercase only for micro-caps and table column headers — Content.

Data ​

  1. sq-cell--num vs sq-cell--date — never swap.
  2. Dutch grouping (18.400); spaced euro (€ 482K) — Content.