MiHCM

Marketing typography

This guide applies only to public websites, campaign pages, landing pages, and brand storytelling surfaces. It does not change the core design-system typography used by the product application or the shipped component packages.

Marketing pages use Albert Sans for headings and Barlow for paragraph and body copy. Product screens continue to use the core MiHCM type tokens documented in Typography.

Boundary rule

Do not add Albert Sans or Barlow to @mihcm/tokens, @mihcm/theme, @mihcm/ui, or app-shell primitives. Load them inside the marketing website only and scope them to the marketing layout root.

Font roles

Headings
Albert Sans

Use for hero headlines, section headings, campaign titles, and large brand moments. Keep weights between 600 and 800.

Body
Barlow

Use for paragraph copy, supporting descriptions, resource pages, captions, and website-level explanatory content.

Marketing type scale

The current website scale follows a modified Major Third ratio of 1.25, rounded to whole pixels and aligned closely with Tailwind's default scale. Use this table as the implementation contract before adding custom values.

Hero display
text-5xl md:text-6xl48px / 60px
Human capital, designed for growth

Primary landing-page headline. Use once per page.

Page heading
text-4xl md:text-5xl36px / 48px
A clearer way to run HR

Campaign pages, feature pages, and high-level section openers.

Section heading
text-3xl md:text-4xl30px / 36px
Built for every team

Major content sections below the hero.

Card heading
text-xl md:text-2xl20px / 24px
Payroll that stays ready

Marketing cards, feature tiles, proof points, and resource blocks.

Lead body
text-lg18px
Connect people data, approvals, payroll, and compliance in one system.

Hero support copy and section introductions.

Body
text-base16px
Give employees and managers a simple way to complete everyday HR tasks.

Paragraph text for website and campaign content.

Small body
text-sm14px
Availability and features vary by region and package.

Captions, helper text, legal notes, and dense supporting copy.

Visual composition

Marketing typography can be more expressive than product UI, but it still uses the same semantic colours, spacing scale, responsive grid, and accessibility rules.

Make every HR moment easier to complete.

MiHCM brings people operations, payroll, approvals, and employee service together with a consistent digital experience.

Explore platformView resources
Employee self service

Use concise copy, clear hierarchy, and semantic tokens for contrast.

Payroll readiness

Use concise copy, clear hierarchy, and semantic tokens for contrast.

Compliance reporting

Use concise copy, clear hierarchy, and semantic tokens for contrast.

Implementation

Load the fonts in the marketing website app only. Scope the variables to a marketing layout wrapper so app routes and product primitives are unaffected.

// app/(marketing)/layout.tsx
import { Albert_Sans, Barlow } from 'next/font/google';

const albertSans = Albert_Sans({
  subsets: ['latin'],
  variable: '--font-marketing-heading',
});

const barlow = Barlow({
  subsets: ['latin'],
  weight: ['400', '500', '600', '700'],
  variable: '--font-marketing-body',
});

export default function MarketingLayout({ children }) {
  return (
    <section className={`${albertSans.variable} ${barlow.variable} marketing-site`}>
      {children}
    </section>
  );
}
/* Marketing-only usage */
.marketing-site h1,
.marketing-site h2,
.marketing-site h3 {
  font-family: var(--font-marketing-heading);
}

.marketing-site p,
.marketing-site li {
  font-family: var(--font-marketing-body);
}

/* Product app routes keep the core system typography. */

Rules

Use Albert Sans for marketing headings only.
Use Barlow for marketing paragraph and body copy only.
Keep product/app components on the core MiHCM typography tokens.
Scope marketing fonts to website layouts, never to package primitives or app shells.
Use Tailwind scale names plus a few documented display additions before inventing one-off sizes.
Keep line length between 55 and 75 characters for paragraph-heavy pages.

Accessibility checklist

  • Body copy remains at least 16px for paragraph-heavy website pages.
  • Line-height stays at 1.45 or higher for long paragraphs.
  • Marketing headlines must still pass contrast requirements against the background.
  • Do not communicate hierarchy with font family alone; use semantic heading elements.
  • Test at 375px, 768px, 1024px, dark mode, and 200% browser zoom.