Projektujemy i programujemy typografię webową: responsywną, dostępną, wydajną. HTML, CSS, JavaScript. Od skali pisma po fonty zmienne i design tokeny.
Typografia w druku kończy się na pliku PDF. Typografia w webie zaczyna się w momencie, gdy trzeba ją zaprogramować: dobrać jednostki, ustalić skalę, zaimplementować ładowanie fontów, zapewnić czytelność na ekranach od 320 do 2560 pikseli i spełnić wymogi dostępności. Łączymy dwudziestoletnie doświadczenie typograficzne z biegłym programowaniem front-endu, by tekst na ekranie wyglądał i działał tak dobrze, jak na papierze.
Projektujemy i kodujemy skale typograficzne, które skalują się płynnie z szerokością okna przeglądarki. Stosujemy fluid typography (CSS clamp), modularną skalę wielkości i spójny rytm pionowy oparty na interlinii bazowej. Efekt: tekst czytelny na telefonie, tablecie i monitorze 4K bez ręcznego zarządzania dziesiątkami breakpointów.
Optymalizujemy ładowanie fontów: subsetting (usuwanie zbędnych zakresów Unicode), preload krytycznych odmian, strategie font-display, konwersja do WOFF2. Wdrażamy fonty zmienne (variable fonts), które zastępują wiele plików statycznych jednym, zmniejszając liczbę żądań HTTP i rozmiar zasobów.
Programujemy typografię zgodną z WCAG 2.1 AA: minimalny kontrast tekstu, skalowanie do 200% bez utraty treści, odpowiednie odstępy między wierszami i akapitami, poprawna struktura nagłówków dla czytników ekranu. Uwzględniamy preferencje użytkownika: prefers-reduced-motion, prefers-contrast, prefers-color-scheme.
Aktywujemy zaawansowane funkcje fontów: ligatury, kapitaliki, cyfry tabelaryczne i nautyczne, warianty stylistyczne, automatyczne frakcje. Używamy font-feature-settings i font-variant w CSS, konfigurujemy osie fontów zmiennych (wght, wdth, opsz) i dokumentujemy zastosowane ustawienia dla zespołu deweloperskiego.
Programowanie typografii to przełożenie decyzji projektowych na kod, który działa w przeglądarce. Obejmuje wybór jednostek (rem, em, vw, vi), zdefiniowanie skali wielkości pisma, ustalenie interlinii i odstępów, zaprogramowanie ładowania fontów, aktywację funkcji OpenType i zapewnienie, że tekst pozostaje czytelny i dobrze sformatowany niezależnie od urządzenia, rozdzielczości ekranu i ustawień użytkownika.
Większość stron internetowych traktuje typografię jako kwestię estetyczną: „ładny font, pasujący kolor". Tymczasem typografia webowa to dyscyplina techniczna. Źle zaimplementowana skala pisma powoduje, że nagłówki na telefonie są za duże lub za małe. Brak strategii ładowania fontów generuje FOUT (Flash of Unstyled Text) lub FOIT (Flash of Invisible Text). Pominięcie reguł dostępności wyklucza użytkowników korzystających z czytników ekranu lub powiększenia tekstu.
/* Skala typograficzna: fluid type */
:root {
--step-0: clamp(1rem, 0.93rem + 0.36vw, 1.25rem);
--step-1: clamp(1.2rem, 1.1rem + 0.51vw, 1.56rem);
--step-2: clamp(1.44rem, 1.3rem + 0.72vw, 1.95rem);
--step-3: clamp(1.73rem, 1.52rem + 1.03vw, 2.44rem);
--step-4: clamp(2.07rem, 1.79rem + 1.43vw, 3.05rem);
}
body { font-size: var(--step-0); }
h3 { font-size: var(--step-2); }
h2 { font-size: var(--step-3); }
h1 { font-size: var(--step-4); }/* Variable font: jedna rodzina, wiele odmian */
@font-face {
font-family: "Inter";
src: url("inter.woff2") format("woff2");
font-weight: 100 900;
font-display: swap;
font-style: normal;
}
body {
font-family: "Inter", system-ui, sans-serif;
font-weight: 400;
font-variation-settings:
"opsz" 16; /* optical size */
}
h1, h2 {
font-weight: 650;
font-variation-settings:
"opsz" 32;
}Tradycyjne podejście do responsywnej typografii polega na definiowaniu rozmiarów pisma w media queries: od tego breakpointu tekst ma 16px, od tego 18px, od tego 20px. Każdy breakpoint to skok, a między nimi tekst bywa za mały lub za duży. Fluid typography rozwiązuje ten problem: rozmiar pisma skaluje się płynnie między minimum a maksimum, proporcjonalnie do szerokości viewportu.
Programujemy to za pomocą CSS clamp(): jedna deklaracja zamiast serii media queries. Skalę budujemy modularnie (mnożnik między kolejnymi stopniami, np. 1.25 lub 1.333), tak by proporcje między nagłówkami, tekstem głównym, podpisami i notatkami były konsekwentne na każdej szerokości ekranu. Rytm pionowy opieramy na wielokrotności interlinii bazowej, co zapewnia optyczną regularność nawet przy złożonych layoutach łączących tekst, obrazy, cytaty i tabele.
Fonty webowe to często największy zasób blokujący pierwsze renderowanie strony. Cztery odmiany fontu (regular, italic, bold, bold italic) po 50–80 kB każda to 200–320 kB do pobrania, zanim użytkownik zobaczy tekst. Optymalizujemy ten proces na kilku poziomach. Subsetting: usuwamy z pliku fontowego zakresy Unicode, których strona nie używa (np. cyrylicę, grecki, symbole matematyczne), zmniejszając rozmiar pliku nawet o 60–70%. Format WOFF2: najlepsza dostępna kompresja dla fontów webowych. Preload: informujemy przeglądarkę z wyprzedzeniem, które pliki fontów będą potrzebne.
Fonty zmienne (variable fonts) to kolejny krok: zamiast czterech plików pobieramy jeden, który zawiera ciągły zakres grubości, szerokości i nachylenia. Plik fontu zmiennego bywa większy niż pojedyncza odmiana statyczna, ale mniejszy niż trzy, cztery odmiany razem. Przy projektach wymagających wielu grubości (np. system design z 300, 400, 500, 600, 700) oszczędność jest znacząca.
/* WCAG 2.1: odstępy i skalowanie */
body {
font-size: 100%; /* nie blokuj zoom */
line-height: 1.6;
letter-spacing: 0.01em;
word-spacing: 0.05em;
}
p { margin-bottom: 1.5em; }
/* Szanuj preferencje użytkownika */
@media (prefers-contrast: more) {
body {
font-weight: 450;
letter-spacing: 0.02em;
}
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; }
}/* Funkcje OpenType w CSS */
.body-text {
font-variant-ligatures: common-ligatures;
font-variant-numeric: oldstyle-nums
proportional-nums;
hanging-punctuation: first last;
}
.data-table td {
font-variant-numeric: tabular-nums
lining-nums;
}
.acronym {
font-variant-caps: all-small-caps;
letter-spacing: 0.05em;
}
.fraction {
font-variant-numeric: diagonal-fractions;
}Przeglądamy istniejący kod, arkusze stylów i sposób ładowania fontów. Identyfikujemy problemy: niespójna skala, brak strategii font-display, zbyt wiele odmian, braki w dostępności. Jeśli projekt startuje od zera, ustalamy wymagania na podstawie makiet i systemu projektowego.
Definiujemy skalę wielkości, interlinie, odstępy, hierarchię nagłówków i warianty tekstowe (lead, body, caption, code, data). Zapisujemy to jako design tokeny (custom properties CSS), gotowe do użycia w kodzie i do synchronizacji z narzędziami projektowymi (Figma).
Programujemy arkusze stylów: fluid type, ładowanie fontów, funkcje OpenType, reguły dostępności. Testujemy na rzeczywistych urządzeniach i w różnych przeglądarkach. Weryfikujemy wydajność (Lighthouse, WebPageTest) i dostępność (axe, WAVE).
Dostarczamy kod wraz z dokumentacją: opis systemu typograficznego, instrukcja używania tokenów, wytyczne dla dalszego rozwoju. Przeprowadzamy szkolenie dla zespołu deweloperskiego, jeśli jest potrzebne.
W dużych projektach typografia musi być zdefiniowana jako system: zestaw tokenów (zmiennych), które opisują każdy parametr tekstu i są wspólne dla kodu i narzędzi projektowych. Wielkości pisma, interlinie, grubości, kolory tekstu, odstępy, dopuszczalne zestawienia fontów. Projektujemy te systemy i zapisujemy je jako custom properties CSS, tokeny JSON (dla Figma Tokens, Style Dictionary) lub zmienne SCSS/Less, zależnie od stosu technologicznego klienta.
Spójny system typograficzny eliminuje uznaniowość: deweloper nie wybiera rozmiaru „na oko", lecz sięga po token --step-2 lub --text-lg, który ma zdefiniowane wartości na każdej szerokości ekranu. Projektant pracuje z tymi samymi wartościami w Figmie. Efekt: brak rozbieżności między projektem a implementacją, szybsze wdrożenia nowych widoków i łatwiejsze utrzymanie spójności w miarę rozrastania się produktu.
Projektujemy makiety publikacji, uczestnicząc w tworzeniu różnorodnych form redakcyjnych, głównie dla czasopism branżowych. Portfolio obejmuje ponad dwadzieścia rynkowych tytułów, przygotowanych z najwyższą starannością, uwzględniając specyfikę danej tematyki.
Tworzymy pięknie złożone książki, których czytanie jest przyjemnością. Specjalizujemy się m.in. w projektowaniu i składzie trudnych publikacji naukowych, prawniczych i branżowych, zawierających tabele, wykresy, schematy i skomplikowane wzory matematyczne.
W gronie naszych specjalistów mamy również redaktorów i niezastąpionych korektorów – najbardziej wnikliwych czytelników. Dzięki ich wrażliwości językowej i nieraz nadludzkiej cierpliwości, zapewniamy tekstom najlepszą opiekę twórczą i merytoryczną.
Profesjonalny skład książek, czasopism, katalogów i raportów w Adobe InDesign. Łamanie tekstu, formatowanie tabel i wykresów, redakcja techniczna, przygotowanie plików do druku. Specjalizujemy się w publikacjach o złożonej strukturze typograficznej.
Tworzymy angażujące raporty, które wpływają na decyzje biznesowe: od zwięzłych one-pagerów po kompleksowe analizy. Uwzględnimy odpowiedni format do specyfiki treści i potrzeb odbiorców. Łączymy solidną metodologię badawczą z przejrzystą formą wizualną.
Wykorzystując narzędzia do analizy treści, wyszukiwania skomplikowanych wzorców tekstowych, warunkowego przekształcania styli i formatów, tworzymy systemy optymalizujące proces składu publikacji oraz zmniejszające do minimum nakład pracy i czas potrzebny do jej stworzenia.
Potrafimy odpowiedzieć na pytania, a także wiemy, jakie pytania należy zadać, by uzyskać wyróżniające się i użyteczne rozwiązania projektowe. Nie tylko dla dużych korporacji, ale także dla małych firm poszukujących idealnych fontów do określonego zastosowania.
Składamy do publikacji monografie habilitacyjne, rozprawy doktorskie i książki naukowe. Realizujemy pełną redakcję techniczną: od ujednolicenia struktury i przypisów po skład złożonych tabel, wykresów i wzorów matematycznych, zgodnie z wymogami wydawnictw i uczelni.
Dla firm i instytucji prowadzimy szkolenia z oprogramowania Adobe Creative Cloud wraz z zasadami typografii i projektowania. Wykonujemy również audyty UX i analizy eksperckie użyteczności produktów branży online oraz publikacji drukowanych – gazet, czasopism i książek.
To przełożenie zasad typografii na kod: HTML, CSS i JavaScript. Obejmuje skale pisma, interlinie, rytm pionowy, responsywność, ładowanie fontów, dostępność i funkcje OpenType. Chodzi o to, by tekst na ekranie był tak samo starannie zaprojektowany jak w druku.
Fluid typography to technika, w której rozmiar pisma skaluje się płynnie między wartością minimalną a maksymalną, proporcjonalnie do szerokości okna przeglądarki. W CSS realizuje się ją funkcją clamp(). Eliminuje skokowe zmiany wielkości tekstu między breakpointami.
Tak, i to istotnie. Fonty webowe to często największy zasób blokujący renderowanie. Optymalizujemy ładowanie: subsetting, preload, font-display: swap/optional, fonty zmienne zamiast wielu plików statycznych. Poprawnie wdrożona typografia przyspiesza First Contentful Paint.
Tak. Programujemy typografię zgodną z WCAG 2.1 AA: minimalny kontrast tekstu, skalowanie do 200% bez utraty treści, odpowiednie odstępy, poprawna struktura nagłówków. Uwzględniamy preferencje użytkownika: prefers-reduced-motion, prefers-contrast, prefers-color-scheme.
Font zmienny to jeden plik fontowy zawierający ciągły zakres odmian: grubość (wght), szerokość (wdth), nachylenie (slnt), opcjonalnie warianty optyczne (opsz). Zamiast ładować osobne pliki regular, bold, italic, przeglądarka pobiera jeden plik i interpoluje potrzebne odmiany.
Koszt zależy od zakresu: samo wdrożenie skali typograficznej i fontów to mniejszy projekt niż kompleksowy system typograficzny z design tokenami, dokumentacją i audytem dostępności. Po rozmowie o potrzebach przygotowujemy bezpłatną wycenę.
kontakt@typograficznie.pl +48 608 271 665
Marcin Szewczyk-Wilgan → ¶
Wrocław
NIP: PL6391758393
