Typography

MetrePay uses Cabin as its primary typeface across all products. It is clean, humanist, and highly readable — ideal for fintech interfaces that need to feel both professional and approachable.

---

Primary Font: Cabin

The quick brown fox

Payment automation made simple

MetrePay helps businesses automate recurring payments, manage collections, and create seamless payment experiences.

Powered by MetrePay · Legal · Contact

<link href="https://fonts.googleapis.com/css2?family=Cabin:wght@400;600;700&display=swap" rel="stylesheet">

body {
  font-family: 'Cabin', sans-serif;
}

---

Font Weights

Weight	Value	Usage
Regular	400	Body text, labels, descriptions
SemiBold	600	Subheadings, button labels, form labels
Bold	700	Page titles, hero headings, stat values

Only 3 weights

MetrePay uses only 3 font weights. Avoid using 300 (light) or 800 (extra bold) — they are not part of the system.

---

Type Scale

--mp-font-size-4xl · 40px · Bold Page Title / Hero

--mp-font-size-3xl · 32px · Bold Dashboard Stat Value

--mp-font-size-2xl · 24px · SemiBold Section Heading / Modal Title

--mp-font-size-xl · 20px · SemiBold Card Title / Form Section

--mp-font-size-lg · 18px · SemiBold Subsection / Button Label (large)

--mp-font-size-md · 15px · Regular Input text, button labels, important body copy

--mp-font-size-base · 14px · Regular Body text, labels, descriptions, list items

--mp-font-size-sm · 13px · Regular Helper text, secondary info, timestamps

--mp-font-size-xs · 12px · SemiBold + Uppercase STEP 1 OF 3 · SECTION LABEL · TAG

---

Line Heights

Token	Value	Usage
--mp-line-height-heading	1.2	Titles, headings, large text
--mp-line-height-body	1.7	Body text, paragraphs, descriptions

---

Usage Rules

Headings

/* Page title */
h1 {
  font-family: 'Cabin', sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  color: #333333;
}

/* Section heading */
h2 {
  font-family: 'Cabin', sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  color: #333333;
}

/* Card title */
h3 {
  font-family: 'Cabin', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: #333333;
}

Body Text

p {
  font-family: 'Cabin', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: #666666;
}

Labels

label {
  font-family: 'Cabin', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #333333;
  display: block;
  margin-bottom: 6px;
}

Step Indicator Label (Stripe-inspired)

.step-label {
  font-family: 'Cabin', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6E96FF;
}

---

Bulma Implementation

<!-- Bulma uses Cabin via CSS override -->
<style>
  body, .title, .subtitle, .label, .button, .input {
    font-family: 'Cabin', sans-serif !important;
  }
</style>

---

Tailwind Implementation

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Cabin', 'sans-serif'],
        base: ['Cabin', 'sans-serif'],
      },
      fontSize: {
        'xs':   ['12px', { lineHeight: '1.5' }],
        'sm':   ['13px', { lineHeight: '1.5' }],
        'base': ['14px', { lineHeight: '1.7' }],
        'md':   ['15px', { lineHeight: '1.7' }],
        'lg':   ['18px', { lineHeight: '1.4' }],
        'xl':   ['20px', { lineHeight: '1.3' }],
        '2xl':  ['24px', { lineHeight: '1.2' }],
        '3xl':  ['32px', { lineHeight: '1.1' }],
        '4xl':  ['40px', { lineHeight: '1.1' }],
      },
    },
  },
}

---

Deprecated Fonts

The following fonts appear in legacy MetrePay code and should not be used in new implementations:

Font	Found in	Status
Fjalla One	Old catalog login	❌ Deprecated
Lato	Portal admin (NiceAdmin template)	❌ Deprecated
Roboto	Portal admin inline styles	❌ Deprecated
Inter	Landing page (metrepay.com)	⚠️ Marketing only

Inter is marketing-only

Inter is used on the metrepay.com landing page. It should not be used in product interfaces (catalog, portal, payment forms). Those must use Cabin.