Typografia

Interfejsy to przede wszystkim tekst. prfct traktuje typografię jako podstawowy materiał systemu: jedna, wyjątkowo czytelna rodzina krojów, niewielki zestaw nazwanych ról i dyskretne detale — rozmiar optyczny, dynamiczne odstępy międzyliterowe, cyfry tabelaryczne — które odróżniają zaprojektowany interfejs od domyślnego.

import { Badge } from "@/components/ui/badge"

export default function TypeHierarchy() {
  return (
    <article className="flex w-full max-w-lg flex-col gap-3">
      <h2 className="text-display-sm text-foreground">
        Szybsze kompilacje, spokojniejsze pulpity
      </h2>
      <div className="flex items-center gap-2 text-caption text-muted-foreground">
        <Badge variant="secondary" size="sm">
          v1.4
        </Badge>
        Opublikowano 18 września · 4 min czytania
      </div>
      <p className="text-body-md text-foreground/85">
        Kompilacje przyrostowe wykorzystują teraz skompilowane moduły między gałęziami, co skraca medianę czasu wdrożenia o 38%. Pulpit przebudowaliśmy na prfct — z gęstszymi tabelami i cyframi tabelarycznymi, które układają się w równe kolumny.
      </p>
      <h3 className="mt-2 text-heading-sm text-foreground">Co się zmieniło</h3>
      <p className="text-body-sm text-muted-foreground">
        Całą pracę wykonują role nagłówka, treści i podpisu: bez jednorazowych rozmiarów i przypadkowych grubości.
      </p>
    </article>
  )
}

Kroje pisma#

Inter#

prfct jest złożony krojem Inter 4.1 — zmienną rodziną zaprojektowaną z myślą o ekranach. Ma dwie osie: grubość i rozmiar optyczny, dzięki któremu kształty liter subtelnie zmieniają się wraz z rozmiarem. W rozmiarach tekstowych litery mają otwarte światła i swobodne odstępy; od 32 px pałeczkę przejmuje odmiana Display, z ciaśniejszymi odstępami i drobniejszymi detalami. Nie zmieniasz kroju dla nagłówków — to krój się dopasowuje.

prfct hostuje krój Inter samodzielnie, zamiast ładować go z CDN z fontami. Wersje z takich serwisów często wycinają funkcje OpenType, żeby oszczędzić bajty — w tym cyfry tabelaryczne, na których opierają się interfejsy pełne danych. Build prfct zachowuje wszystkie funkcje i obie osie, ogranicza zestaw znaków do pisma łacińskiego (z pełną obsługą polskiego, czeskiego, tureckiego i innych języków z zakresu Latin Extended-A), wstępnie ładuje tylko odmianę prostą i dostarcza font zastępczy o dopasowanych metrykach, żeby tekst nie przeskakiwał, kiedy font się doładuje.

Geist Mono#

Kod, klawisze i wartości techniczne zapisujemy krojem Geist Mono: zwartym, o znakach równej szerokości i zaprojektowanym do pracy w parze z neogroteskowymi krojami bezszeryfowymi.

Skala typograficzna#

prfct nazywa style tekstu według roli, a nie rozmiaru. Rola łączy rozmiar, interlinię, odstępy międzyliterowe i grubość w jedną decyzję, więc style tekstu nie mogą rozjechać się po jednej właściwości naraz.

<h1 className="text-heading-xl">Settings</h1>
<h2 className="text-heading-md">Notifications</h2>
<p className="text-body-sm text-muted-foreground">Choose what we email you about.</p>

Rozmiarowe klasy Tailwinda (text-sm, text-lg…) nadal są dostępne do precyzyjnej pracy nad interfejsem i też mają odstępy międzyliterowe prfct.

Detale, które mają znaczenie#

Dynamiczne odstępy międzyliterowe#

Odstępy między literami podążają za zależnymi od rozmiaru metrykami kroju Inter: przy 12 px są lekko rozluźnione, bo litery potrzebują powietrza, a im większy rozmiar, tym są ciaśniejsze, bo domyślne odstępy zaczynają wyglądać luźno. Każda rola i każdy rozmiar Tailwinda mają już właściwą wartość — nie dodawaj tracking-* do zwykłego tekstu.

Własny głos nagłówków#

Role Display włączają jednopiętrowe a (cv11) i zaokrąglone cudzysłowy (ss03) kroju Inter. Duże nagłówki zyskują dzięki temu łagodniejszy, bardziej charakterystyczny głos, a tekst podstawowy i interfejs zachowują domyślne dwupiętrowe a, które w małych rozmiarach jest czytelniejsze.

Cyfry w równych kolumnach#

Liczby w tabelach, statystykach i licznikach czasu muszą układać się w równe kolumny. Tabele prfct domyślnie włączają cyfry tabelaryczne; w każdym innym miejscu dodaj klasę numeric.

const rows = [
  { region: "Frankfurt", requests: "1 204 118", p95: "81,4 ms" },
  { region: "Warszawa", requests: "987 450", p95: "74,9 ms" },
  { region: "Wirginia", requests: "11 009 871", p95: "112,0 ms" },
]

function Column({ title, tabular }: { title: string; tabular: boolean }) {
  return (
    <div className="flex flex-col gap-2 rounded-xl border bg-card p-4">
      <span className="text-xs font-medium text-muted-foreground">{title}</span>
      <table
        className="text-sm"
        style={{
          fontVariantNumeric: tabular ? "tabular-nums" : "proportional-nums",
        }}
      >
        <tbody>
          {rows.map((row) => (
            <tr key={row.region} className="border-b last:border-0">
              <td className="py-1.5 pr-6 text-foreground">{row.region}</td>
              <td className="py-1.5 pr-6 text-right text-foreground">
                {row.requests}
              </td>
              <td className="py-1.5 text-right text-muted-foreground">
                {row.p95}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

export default function TabularNumbers() {
  return (
    <div className="grid w-full max-w-2xl gap-3 sm:grid-cols-2">
      <Column title="Cyfry proporcjonalne" tabular={false} />
      <Column title="Cyfry tabelaryczne (numeric)" tabular />
    </div>
  )
}

<span className="numeric">1,204,118</span>

Zrównoważone i estetyczne łamanie wierszy#

Nagłówki używają text-wrap: balance, więc ich wiersze mają zbliżoną długość; akapity — text-wrap: pretty, żeby ostatnie słowo nie zostawało samotnie w ostatnim wierszu. Oba ustawienia działają globalnie.

Wytyczne#

• Używaj ról, nie rozmiarów. Jeśli projekt wymaga rozmiaru, którego nie daje żadna rola, zwykle potrzebuje po prostu innej roli.
• Jeden styl na poziom nagłówka. Każdemu poziomowi daj jedną rolę i nie przeskakuj poziomów — ani w znacznikach HTML, ani w skali wizualnej.
• Wyróżniaj grubością, nie rozmiarem. Słowo w font-medium wewnątrz body-sm w zupełności wystarczy.
• Trzymaj długość wiersza w granicach 45–75 znaków. Do długich tekstów używaj max-w-prose albo max-w-2xl.
• Wielka litera tylko na początku — w nagłówkach, na przyciskach, w pozycjach menu. Pisanie Każdego Wyrazu Wielką Literą to w polszczyźnie anglicyzm; w interfejsie wygląda jak krzyk i zaciera różnicę między nazwami własnymi a zwykłymi słowami.

Dostępność#

• Wszystkie rozmiary są podane w rem, więc tekst skaluje się razem z rozmiarem czcionki ustawionym w przeglądarce. Układy dopasowują się aż do szerokości 320 px, czyli powiększenia 400% w oknie 1280 px.
• Role Body mają interlinię co najmniej 1,5× dla tekstu do czytania, a w małych rozmiarach nigdy nie schodzą poniżej grubości 400.
• Wyciszony tekst nadal spełnia 4,5:1; zobacz Kolor.
• Wersaliki są zarezerwowane dla krótkich nadtytułów, które mają zwiększone odstępy między literami i interpunkcję dopasowaną do wersalików, dzięki czemu pozostają czytelne.