PromptEye pisze dwoma krojami: Geist w nagłówkach i liczbach, Inter w tekście i danych. Nie ma trzeciego kroju. Skala jest jedna, a rozmiary w innych formatach liczysz z niej tym samym mnożnikiem.
Dwa kroje
--pe-font-display Aa Geist Nagłówki, hasła, liczby i duże wartości w danych. Wagi 400 i 500. ĄĆĘŁŃÓŚŹŻ ąćęłńóśźż 0123456789 % --pe-font-text Aa Inter Tekst ciągły, lead, interfejs, tabele i podpisy. Wagi 400, 500 i 600. ĄĆĘŁŃÓŚŹŻ ąćęłńóśźż 0123456789 % Wyjątek: e-mail. Klienci poczty nie wczytują Geist i Inter, więc stopka i treść maili są w Arialu.
Skala www
Wzorzec to strona www (s = 1). Próbki poniżej są w rzeczywistym rozmiarze. Im mniejszy nagłówek, tym cięższy: H1 i H2 mają wagę 400, H3 już 500.
Display .d1Geist 400 · 120 / 0,95 · −0,048 em--pe-dzien-naglowek
Raport 2026
H1Geist 400 · 64 / 1,05 · −0,04 em--pe-dzien-naglowek
Dokąd AI wysyła Polaków?
LeadInter 400 · 21 / 1,5 · −0,012 em--pe-dzien-tekst-2
Zapytaliśmy siedem modeli AI, gdzie spędzić wakacje nad polskim morzem.
H2Geist 400 · 36 / 1,08 · −0,035 em--pe-dzien-naglowek
Metoda w trzech krokach
H3Geist 500 · 21--pe-dzien-naglowek
Sprawdzamy, które pytania przynoszą klientów
TekstInter 400 · 16 / 1,65 · −0,011 em--pe-dzien-tekst
Każdy raport to pomiar całej branży. Sprawdzamy, które marki AI poleca w pytaniach zakupowych, i zestawiamy wyniki z poprzednimi pomiarami.
Metadane, podpisyInter 500 · 13–14--pe-dzien-podpis
Zespół badawczy PromptEye · 23 października 2026 · 9 min czytania
- Kolumna tekstu 660 px (
--pe-kolumna), ok. 80 znaków. Tabele i wykresy do 972 px. - Odstęp między akapitami 24 px, nad H2 64 px.
- Interlinia nagłówków 1,02–1,1. Przy 1,0 polskie znaki się stykają.
- Linki w tekście: Kobalt 600 z podkreśleniem 1 px, na czerni Kobalt 300.
- W danych cyfry tabelaryczne i przecinek dziesiętny.
Ciemne, telefon, PDF
Złożenie treści: artykuł z raportu
Tak składamy długą treść. Artykuł z raportu branżowego prowadzi od hero z motywem przez najważniejsze wnioski, rycinę, tabelę i wykresy po komentarze ekspertów, CTA i stopkę. Rozdział raportu na stronie składa się tak samo. To przykład z systemu, nie sztywny szablon: pełny raport będziemy stylować osobno i może wyglądać inaczej (Anatomia raportu).
Hero D, spis treści z ramką pełnego raportu, wnioski, tekst w kolumnie 660 px, figury, pytania i odpowiedzi, komentarze, CTA, czytaj dalej, stopka.
Przewijaj w ramce, żeby zobaczyć całość. W systemie: templates/artykul/Artykul.dc.html
Telefon: H1 36, lead 18, H2 28, tekst 16 / 1,6, marginesy 20 px.
Przewijaj w ramce, żeby zobaczyć całość. W systemie: guidelines/typografia.html
Kolejność treści
- Hero: ścieżka, tytuł, lead, autor, data i czas czytania.
- Najważniejsze wnioski (
.t2kt) na początku: trzy zdania, każde z liczbą. - Tekst w kolumnie 660 px (
.t2art), śródtytuły H2 ponumerowane jak wnioski. - Figury (
.t2fig): tytuł (wykres: wniosek, tabela: wniosek albo opis), miara i okres, źródło i adres w stopce. - Spis treści po lewej (
.t2toc) z ramką pełnego raportu (.t2rb). - Na końcu: pytania i odpowiedzi, komentarze ekspertów, CTA, czytaj dalej, stopka.
Pismo w innych formatach
Rozmiar z wzorca mnożysz przez skalę formatu s i zaokrąglasz do 4 px. Social ma większe minimum: drobny tekst co najmniej 20 px przy szerokości 1080. Pełna tabela z marginesami i logo jest w rozdziale Formaty.
| Format | s | H1 | Lead | Drobny tekst |
|---|---|---|---|---|
| Hero www 1440 × 860 | 1 | 64 | 21 | 14 |
| Slajd 1920 × 1080 | 1,29 | 80 | 28 | 20 |
| Post 1080 × 1350 | 1,09 | 72 | 28 | 22 |
| Post 1080 × 1080 | 0,97 | 64 | 26 | 20 |
| OG 1200 × 630 | 0,78 | 56 | 24 | 20 |
| Okładka LinkedIn 1584 × 396 | 0,71 | 52 | – | – |
Kropka po tytule
Pomarańczowa kropka zamyka tylko nagłówek-hasło. Hasło to zdanie-teza, które coś obiecuje albo stwierdza. Etykieta, nazwa strony, rozdziału czy sekcji kropki nie dostaje, a pytanie kończy się pytajnikiem.
Zobacz, jak AI poleca Twoją markę
Raporty branżowe
.dotwstawia znak „.” z fontu w kolorze #FD723A. Nie pisz własnej kropki przed znacznikiem.- Nigdy w kadrze z punktem motywu ani obok przycisku
b1a.
<h1>Zobacz, jak AI poleca Twoją markę<span class="dot"></span></h1>Polskie zasady
Atrybut data-pe-typo na kontenerze uruchamia korektę, gdy wczytany jest js/pe-motyw.js:
- półpauza zamiast pauzy w zdaniu („ – ”);
- wąska twarda spacja przed % i p.p. („38 %”);
- jednoliterowe spójniki (a, i, o, u, w, z) nie zostają na końcu wiersza.
<article data-pe-typo>
<p>Wynik wzrósł o 38% w ciągu roku i w Polsce jest najwyższy.</p>
</article>
<!-- po korekcie: „38 %” z wąską twardą spacją, „w” i „i” nie zostają na końcu wiersza -->Piszesz bez skryptu? Pilnuj tego samego ręcznie: bez sierotek, liczba nie odrywa się od jednostki, spacja przed %.
W kodzie
Rozmiary i kroje bierzesz z tokenów w tokens/typography.css, nie wpisujesz liczb ręcznie.
h1 {
font: 400 var(--pe-h1)/var(--pe-h1-lh) var(--pe-font-display); /* Geist 64 / 1,05 */
letter-spacing: var(--pe-h1-ls);
}
p {
font: 400 var(--pe-text)/var(--pe-text-lh) var(--pe-font-text); /* Inter 16 / 1,65 */
letter-spacing: var(--pe-text-ls);
max-width: var(--pe-kolumna); /* 660 px */
}
.dk p { color: var(--pe-noc-tekst-dlugi); line-height: 1.7; letter-spacing: -.006em; }