Typografia
Tekst jest podstawowym składnikiem stron internetowych, dla tego ważne jest aby był przedstawiony w sposób czytelny i spójny. W tym celu zdefiniowana została paleta typograficzna – zestaw stylów tekstowych obowiązujących na stronach ORLEN.
Krój i grubości
Krojem używanym na stronach internetowych PKN ORLEN jest Proxima Nova. Jest to nowoczesny krój z rodziny geometrycznych grotesków. Kształt liter nawiązuje do liternictwa logotypu ORLEN oraz do kroju używanego w polskich znakach drogowych. Krój występuje w wielu wersjach językowych i wielu odmianach grubości.
Na stronach internetowych ORLEN są wykorzystywane 6 odmian grubości kroju:
- – Extra Bold używany tylko w dużych nagłówkach;
- – Bold używany w nagłówkach średniej wielkości;
- – Semibold używany w elementach interaktywnych, takich jak przyciski i menu oraz do pogrubienia tekstu;
- – Medium używany dla zwiększenia kontrastu tekstu odnośników, nazw kategorii i w powiększonym tekscie;
- – Regular używany do bloków tekstu;
- – Light wykorzystywany w dużych rozmiarach do celów dekoracyjnych (np. dla liczb), często w połączeniu z kolorem "Czerwony ORLEN".
Wersja pochylona (Italic) może być używana tylko w połączeniu z grubością Regular w celu wyróżnienia wyrazów wewnątrz bloku tekstu.
Skala typograficzna
Na stronach internetowych PKN ORLEN używane są style akapitowe o określonych parametrach wielkości i grubości kroju, wielkości interlinii i odstępach międzyliterowych (rozstrzeleniu). Należy stosować style akapitowe zgodnie z przeznaczeniem – większe do nagłówków i tytułów, a mniejsze do tekstu.
| Rozmiar | Interlinia | Rozstrzelenie | Grubość | ||
|---|---|---|---|---|---|
| 1 | L-Title | 84px | 88 | -0.84px | Extra Bold |
| 2 | M-Title | 64px | 72px | -0.64px | Extra Bold |
| 3 | S-Title | 49px | 60 | 0px | Extra Bold |
| 4 | Headline 1 | 37px | 44px | 0px | Bold |
| 5 | Headline 2 | 28px | 36px | 0.24px | Bold |
| 6 | Headline 3 | 24px | 32px | 0.21px | Bold |
| 7 | L Lead | 37px | 48px | 0.21px | Medium |
| 8 | Lead Text | 24px | 36px | 0.21px | Medium |
| 9 | Body Text | 18px | 28px | 0.18px | Regular |
| 10 | Small Text | 16px | 24px | 0.16px | Regular |
| 11 | Note Text | 14px | 22px | 0.14px | Regular |
| 12 | Label | 16px | 24px | 0.64px | Semibold |
| 13 | Small label | 14px | 24px | 0.56px | Medium |
Dopuszczalne jest tworzenie nowych odmian styli akapitowych poprzez użycie innych kolorów i grubości, zgodne z zasadami stosowania grubości kroju i kolorów.
Skala typograficzna na urządzeniach mobilnych
Na urządzeniach mobilnych obowiązuje zmodyfikowana skala typograficzna dostosowana do mniejszej szerokości ekranu.
Wykorzystywanie innych rozmiarów tekstu
W uzasadnionych przypadkach możliwe jest definowanie nowych rozmiarów poprzez zastosowanie mnożnika 1,148 do wybranego rozmiaru. Na przyklad, dla uzyskania rozmiaru większego niż 84px należy przemnożyć 84px przez 1,148. Uzyskany wynik zaokrąglony do pełnej liczby (85px) jest rozmiarem nowego stylu akapitowego. Operacja może być powtórzona z nową wartością w celu uzyskania kolejnej wartości z rzędu.
Dla nowych styli akapitowych należy dobrać odpowiedni odstęp międzyliterowy i interlinię.
Przyjęta jest zasada, że dla małych rozmiarów tekstu wartość odstępu międzyliterowego wynosi 1% od rozmiaru tekstu. Dla średnich – 0%, a dla dużych – wartość ujemną -1%. Dla styli pisanych wersalikami wartość ta wynosi 4% od rozmiaru tekstu.
Rytm poziomy
Wysokość interlinii dla każdego stylu akapitowego jest równa wielokrotności 4px. Różnica pomiędzy wysokością interlinii i rozmiarem tekstu zmiejsza się wraz ze wzrostem rozmiaru tekstu. Dla rozmiaru 16px wysokość interlinii wynosi 24px (proporcja 2/3). Dla rozmiaru 64px wysokość interlinii wynosi 72px (proporcja 8/9).
Zasady stosowania
Zasady układania tekstu na stronie i łączenia tekstu z innymi elementami są opisane w sekcji dotyczącej układu. Poniżej przedstawione są wybrane dobre i złe praktyki dotyczące stylowania tekstu.
Blok tekstu powinien być wyrówany do lewej strony. Wyrównanie do prawej lub centrowanie tekstu wewnątrz kolumny powinno stanowić rzadki wyjątek i mieć uzasadnienie funkcjonalne.
Niedopuszczalne jest wyrównywanie tekstu do obu stron kolumny.
Należy posługiwać się zdefiniowanymi stylami przy składaniu i projektowaniu stron.
Nie należy ingerować w style typograficzne poprzez wprowadzanie tekstu samymi wielkimi czy samymi małymi literami, zmianę światła międzyliterowego czy interlinii.
Możliwa jest modyfikacja stylu poprzez zastosowanie innej grubości bez zmiany innych parametrów stylu.
Nie należy stosować innych kolorów i grubości do typografii niż dopuszczone. Nie należy stosować kolorów nie przewidzianych do tekstu i zmieniać innych parametrów takich jak interlinia i odstęp miedzyliterowy.