Brand Guidelines
Typography
Semji pairs two Google fonts: Rubik for the interface and body copy, and Montserrat for display headings. They’re wired through the theme as font-sans and font-display, so you rarely set a family by hand — just pick a size and weight.
Rubik
Primary typeface — UI, body copy, everything by default.
The quick brown fox jumps over the lazy dog. 0123456789
Montserrat
Display typeface — large headings & hero moments only.
The quick brown fox jumps over the lazy dog. 0123456789
Type scale
A small, deliberate set of steps. Rendered live below — match the utility classes to keep the rhythm.
Content that performs
text-4xl font-display font-boldCreate, optimise, rank
text-2xl font-display font-boldBuilt on a live SERP analysis
text-xl font-semiboldConfigure your Brand Voice
text-base font-semiboldGenerate a complete, SEO-ready draft in minutes — then review and refine.
text-baseSemji ties every piece of content to a score you can act on.
text-smLast analysed 3 days ago
text-xsSizes shown as font-size / line-height in px.
Weights
Rubik ships 300–700; Montserrat is loaded at 400 and 700. Use weight — not size — for most emphasis.
Rubik · font-sans
Ag
Light
font-light · 300Ag
Regular
font-normal · 400Ag
Medium
font-medium · 500Ag
Semibold
font-semibold · 600Ag
Bold
font-bold · 700Montserrat · font-display
Ag
Regular
font-normal · 400Ag
Bold
font-bold · 700Pairing & usage
Keep the two fonts in their lanes and the hierarchy clear.
Do
Reserve Montserrat (font-display) for large display headings and hero text.
Use Rubik for every heading below H1, all body copy, labels and UI.
Create hierarchy with size + weight + colour — not with more fonts.
Keep body copy at text-sm/text-base with relaxed line-height for readability.
Don’t
Set body or long paragraphs in Montserrat — it’s a display face.
Introduce a third typeface or swap in system fonts for “personality”.
Stack many sizes per screen; lean on the scale above.
Use light weight (300) for small text — it fails on low-contrast surfaces.
On the web
How the fonts are wired in this app — reach for the tokens, not raw families.
Loaded with next/font
Rubik & Montserrat are self-hosted via next/font/google and exposed as CSS variables (--font-rubik / --font-montserrat) — no layout shift, no external request.
Use the tokens
The theme maps them to --font-sans (Rubik, the default) and --font-display (Montserrat). Apply font-sans / font-display rather than naming a family.