Tipografie custom

Ce înseamnă tipografie custom

Un design are de obicei 5–8 stiluri de text fixe: titlu mare de pagină, titluri de secțiune, text de corp, text mic, etichete. Fiecare stil = o combinație de font + mărime + înălțime de rând + grosime + spațiere între litere.

Greșeala clasică: combinația e rescrisă de mână peste tot.

<h1 class="font-display text-[2.75rem] leading-[1.1] font-bold tracking-[-0.02em]">
<!-- ... și aceleași 5 clase în alte 30 de locuri -->

Scopul: un singur nume — text-display, text-h2, text-body — definit o dată și folosit peste tot, ca o clasă. Schimbi designul într-un singur loc.

Pasul 1 — fonturile

Încarci fontul cu next/font (self-hosted, fără „salt” de layout) și îl expui ca variabilă CSS:

// app/layout.tsx
import { IBM_Plex_Sans, JetBrains_Mono } from 'next/font/google'

const sans = IBM_Plex_Sans({ variable: '--font-plex-sans', subsets: ['latin', 'latin-ext'], weight: ['400', '500', '600', '700'] })
const mono = JetBrains_Mono({ variable: '--font-jetbrains-mono', subsets: ['latin', 'latin-ext'] })

<html className={`${sans.variable} ${mono.variable}`}>

latin-ext e obligatoriu pentru diacritice (ă, î, ș, ț).

Apoi le mapezi în tema Tailwind:

@theme inline {
  --font-sans: var(--font-plex-sans);       /* font-sans — implicit pe tot site-ul */
  --font-mono: var(--font-jetbrains-mono);  /* font-mono */
  --font-display: var(--font-plex-sans);    /* font-display — clasă nouă */
}

Pasul 2 — scala de mărimi ca tokens

Fiecare --text-* din @theme devine o clasă text-*. Poți atașa și înălțimea de rând, spațierea și grosimea — toate se aplică dintr-o singură clasă:

@theme {
  --text-display: 3rem;
  --text-display--line-height: 1.1;
  --text-display--letter-spacing: -0.02em;
  --text-display--font-weight: 700;

  --text-h2: 1.75rem;
  --text-h2--line-height: 1.25;
  --text-h2--font-weight: 600;

  --text-body: 1rem;
  --text-body--line-height: 1.65;

  --text-caption: 0.8125rem;
  --text-caption--line-height: 1.4;
}

<h1 class="text-display">Titlu</h1>
<h2 class="text-h2">Secțiune</h2>
<p class="text-body text-muted">Paragraf</p>
<span class="text-caption">Etichetă</span>

Merg cu orice variantă: text-h2 md:text-display.

Dacă vrei să înlocuiești complet scala implicită (text-sm, text-xl...) cu a ta: --text-*: initial; la începutul @theme. Așa echipa poate folosi doar mărimile din design.

Pasul 3 — stiluri compuse cu @utility

Când un stil are mai mult decât font-size (ex. font diferit, text-transform, culoare), creezi o clasă utilitară proprie:

@utility text-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

<p class="text-eyebrow md:text-sm">Lecția 3</p>

@utility e mai bun decât o clasă CSS normală: intră în stratul utilities, funcționează cu variante (hover:, md:, dark:) și e detectat la fel ca orice clasă Tailwind.

Variante pentru tipografie — comparație

Unde le ții

Totul în un singur fișier de stiluri globale (app/globals.css sau src/app/styles/) — tokens de culoare, fonturi, scala de text, utilitarele custom. Componentele doar le folosesc.

Pe scurt

• next/font → variabilă CSS → @theme inline { --font-* }.
• --text-nume + --text-nume--line-height / --font-weight / --letter-spacing = un stil complet într-o clasă.
• @utility pentru stiluri compuse; merge cu toate variantele.

Surse oficiale

• Tailwind CSS — font-size (custom theme)
• Tailwind CSS — font-family
• Tailwind CSS — Adding custom styles (@utility)
• Next.js — Font Optimization