Typografia

Typografia XXIII LO łączy wyrazisty krój Montserrat stosowany w nagłówkach i elementach ekspozycyjnych z czytelnym Open Sans przeznaczonym do tekstu podstawowego. Spójna skala wielkości, grubości i odstępów buduje hierarchię informacji w całym serwisie.

Typografia marki

Krój Montserrat jest elementem identyfikacji XXIII LO i występuje również w podstawowej wersji logotypu szkoły.

XXIII Liceum Ogólnokształcące

Montserrat Bold

Nazwa szkoły w podstawowej wersji logotypu

im. płk. pil. S. Skarżyńskiego
w Krakowie

Montserrat Medium

Podpis patrona w podstawowej wersji logotypu

Typografia WWW

W serwisie internetowym używamy dwóch uzupełniających się rodzin krojów pisma. Montserrat buduje hierarchię i charakter marki, a Open Sans zapewnia wysoką czytelność dłuższych treści.

Aa

Montserrat

Nagłówki H1–H6, tytuły stron, teksty ekspozycyjne i wybrane elementy interfejsu.

Używane grubości: Semi Bold, Bold

Aa

Open Sans

Tekst podstawowy, leady, opisy, dane kontaktowe, podpisy oraz pozostałe treści użytkowe.

Używane grubości: Regular, Semi Bold

Skala typograficzna

Skala nagłówków na dużych ekranach opiera się na proporcji Perfect Fourth (1.333) i podstawowym rozmiarze tekstu 18 px. Wybrane wartości zostały optycznie zaokrąglone, a na mniejszych ekranach skala jest kompresowana dla zachowania czytelności.

Display · 100 / 80 / 56 px · Montserrat Bold · 1.00

XXIII LO

H1 · 76 / 64 / 48 px · Montserrat Bold · 1.05
Nagłówek strony
Featured Heading · 56 / 48 / 40 px · Montserrat Bold · 1.10
Ważna sekcja strony
H2 · 42 / 38 / 32 px · Montserrat Bold · 1.15
Nagłówek drugiego poziomu
H3 · 32 / 29 / 26 px · Montserrat Semi Bold · 1.20
Nagłówek trzeciego poziomu
H4 · 24 / 23 / 22 px · Montserrat Semi Bold · 1.25
Nagłówek czwartego poziomu
H5 · 20 / 19 / 18 px · Montserrat Semi Bold · 1.30
Nagłówek piątego poziomu
H6 · 18 / 17 / 16 px · Montserrat Semi Bold · 1.35
Nagłówek szóstego poziomu
Body · 18 / 17 / 16 px · Open Sans Regular · 1.60
Tekst podstawowy służy do prezentowania większości treści serwisu. Open Sans zapewnia dobrą czytelność zarówno na dużych, jak i małych ekranach.

Style tekstowe

Lead · 20 / 19 / 18 px · Open Sans Regular · 1.60
Tekst wprowadzający wyróżnia najważniejszą informację na początku sekcji.
Small · 15 / 15 / 14 px · Open Sans Regular · 1.55
Tekst pomocniczy, dodatkowe informacje i mniej istotne opisy.
Caption · 14 / 14 / 13 px · Open Sans Regular · 1.50
Podpis zdjęcia lub materiału graficznego.

Zasady stosowania

  • Montserrat stosujemy w nagłówkach i elementach ekspozycyjnych.
  • Open Sans jest podstawowym krojem dla tekstu, leadów, opisów, podpisów i informacji użytkowych.
  • Na każdej podstronie powinien znajdować się tylko jeden nagłówek H1.
  • Poziom H1–H6 wynika ze struktury informacji, a nie z oczekiwanego wizualnego rozmiaru tekstu.
  • Tekst podstawowy nie powinien być mniejszy niż 16 px na urządzeniach mobilnych.
  • Długich akapitów nie należy wyrównywać do środka.