Typografia

1. Anatomia fontów – najważniejsze pojęcia

Podstawy

• Majuskuły (uppercase / capital letters) – duże litery alfabetu (A, B, C).
• Minuskuły (lowercase letters) – małe litery alfabetu (a, b, c).
• Cap height (wysokość wielkich liter) – wysokość majuskuł.
• X-height (wysokość „x”) – wysokość minuskuł (małych liter)
  bez wydłużeń (np. „x”, „a”, „e”).

Podstawowe linie i proporcje

• Baseline (linia bazowa) – linia, na której „stoją” litery.
• Ascender (wydłużenie górne) – część litery wystająca ponad X-height
  (np. „l”, „h”, „k”).
• Descender (wydłużenie dolne) – część litery wystająca poniżej baseline
  (np. „g”, „y”, „p”).

Elementy budowy liter

• Stem (trzon) – główna pionowa kreska litery.
• Stroke (kreska) – dowolna linia tworząca literę.
• Arm (ramię) – pozioma/ukośna kreska zakończona w powietrzu
  (np. „E”, „T”).
• Leg (noga) – ukośna kreska opadająca (np. „R”, „K”).
• Shoulder (łuk) – zaokrąglona część przechodząca w trzon (np. „n”, „h”).
• Spine (kręgosłup) – krzywizna litery „S”.
• Tail (ogon) – ozdobne wydłużenie litery (np. „Q”, „y”).
• Ear (ucho) – mały element dekoracyjny (np. „g”).
• Crossbar (poprzeczka) – pozioma linia łącząca części litery
  (np. „A”, „H”, „e”).
• Bowl (brzuszek) – zamknięta zaokrąglona część litery (np. „b”, „o”).
• Counter (oczko) – pusta przestrzeń wewnątrz litery (np. „o”, „e”).
• Serif (szeryf) – ozdobne zakończenie linii w fontach szeryfowych.
• Terminal (zakończenie) – zakończenie linii w literach
  bezszeryfowych lub ozdobnych.
• Apex (szczyt) – punkt zbiegu kresek na górze litery (np. „A”).
• Vertex (wierzchołek) – punkt zbiegu kresek na dole litery (np. „V”).
• Finial (finał) – zaokrąglone lub ostre wykończenie kreski (np. „e”).

2. Rodzaje fontów + przykłady i zastosowanie

• Szeryfowe (Serif)
  • Przykłady: Times New Roman, Garamond, Georgia
  • Zastosowanie: Dłuższe teksty drukowane (książki, gazety, czasopisma)
    - szeryfy ułatwiają śledzenie linii.
• Bezszeryfowe (Sans Serif)
  • Przykłady: Arial, Helvetica, Calibri, Lato
  • Zastosowanie: Ekrany, krótkie komunikaty, prezentacje,
    nowoczesny wygląd.
• Dekoracyjne (Display / Decorative)
  • Przykłady: Lobster, Pacifico, Blackletter
• Zastosowanie: Nagłówki, plakaty, zaproszenia, logotypy –
  do krótkich treści, nie do długich akapitów.
• Monospace (Stała szerokość znaków)
  • Przykłady: Courier, Consolas
  • Zastosowanie: Kodowanie, tabele, retro design.

Fontjoy - Generate font pairings in one click

Fontjoy helps designers choose the best font combinations. Mix and match different fonts for the perfect pairing.

Generate font pairings in one click

3. Odstępy i czytelność

• Interlinia – odstęp między wierszami.
• Kerning – odstęp między parami znaków.
• Tracking – ogólne rozciągnięcie lub ściśnięcie tekstu.
• Marginesy i światło – puste przestrzenie dla zwiększenia czytelności.
• Justowanie – wyrównanie tekstu do obu marginesów (lewego i prawego).
  Tworzy równą kolumnę tekstu, ale wymaga kontrolowania przenoszeń i spacji,
  by uniknąć „dziur”.
• Wyrównanie (Alignment) – ustawienie tekstu względem marginesu
  (do lewej, do prawej, wyśrodkowanie, wyjustowanie).

4. Dobry skład tekstu

• Celem jest czytelność i estetyka.
• Unikamy typograficznych błędów:
  • Sieroty – pojedyncza litera (i, a) na końcu wiersza.
  • Wdowy – samotna krótka linijka na końcu akapitu.
  • Bękarty – początek akapitu przeniesiony na nową stronę,
    gdzie jest tylko 1–2 zdania.
  • Szewcy – ostatnia linijka akapitu samotnie na początku strony.

Czytelność

• Długość wiersza – optymalnie ok. 40-70 znaków
• Kontrast tła i tekstu – odpowiedni kontrast (np. jasny tekst na
  ciemnym tle lub ciemny na jasnym tle);
• Unikanie sierot i wdów – nie zostawiamy pojedynczych słów
  na końcu wiersza ani pojedynczych krótkich wierszy na początku/końcu
  kolumny lub strony.
• Stosowanie ograniczonej liczby krojów – maksymalnie 1-2 kroje pisma
  w jednym projekcie (np. jeden do nagłówków, jeden do treści głównej,
  ewentualnie trzeci do akcentów).

https://fonts.google.com/knowledge

https://www.canva.com/learn/fonts/

 https://type.method.ac/ 

Inkskape

Relative change pozwala zmienić pozycję lub kąt linii o określoną wartość względem jej bieżącej pozycji, zamiast ustawiać wartość absolutną.

• Przykład:Jeśli linia jest na X = 50 mm i wpiszesz w Relative change → X: +10 mm,
  nowa pozycja = 60 mm.Jeśli kąt = 0°, a w Relative change → Angle wpiszesz 15°,
  nowy kąt = 15°.

Tekst na ścieżce (Text on Path)

Krok 1: Zaznacz obiekty

• Najpierw kliknij tekst,
• Trzymając Shift, kliknij ścieżkę
  (ważne, by najpierw zaznaczyć tekst, potem ścieżkę)

Krok 2: Zastosuj „Tekst na ścieżce”

• W menu: Text > Put on Path

Text into Frame or Shape (czyli wpasowanie tekstu w kształt/ramkę).

Zadanie: Żelki Super Kwaśne - Wytyczne projektowe (draft 30‑min)
1. Format opakowania Typ: płaska saszetka (flow‑pack) z euro‑dziurką.
Wymiary netto: 120 mm (szer.) × 160 mm (wys.) + 5 mm spadu z każdej strony.
Strefy: 3 mm margines bezpieczeństwa (nie umieszczaj tekstu/logo).
Transparentne "okienko" w dowolnym kształcie ≈ 40 × 70 mm (pokazuje żelki).
2. Paleta kolorów: Wasz wybór
3. Typografia Logo / nagłówek: wielkość 40–60 pt.
Tekst prawny: 6–7 pt (min. 1,2 mm wysokości x‑a). inne: 14 pt
4. Key visual: Coś kwaśnego
5. Tył – układ 3‑kolumnowy
Skład + ostrzeżenie
Tabela wartości (ramka 0,15 pt)
6. Kontrola jakości
Kontrast WCAG ≥ 4.5:1 dla tekstu < 18 pt.
Plik finalny: PDF/X‑4, 300 dpi, spady 5 mm

Zadanie domowe
Artykuł 2-stronicowy 2-kolumnowy z kilkoma zdjęciami o nowych technologiach