Tekst przeniesiony z like-a-geek.jogger.pl.

Po długiej przerwie (spędzonej na pisaniu) wracam do pisania;) W kolejnej, nieco krótszej niż poprzednie, części cyklu poświęconemu typografii porównam najczęściej spotykane połączenia kolorów (dla wtajemniczonych: będzie mowa o tekście w kontrze). Tym razem będzie nieco krócej niż w poprzedniej części. Zaczynamy!

Czarno na białym

W publikacjach drukowanych najczęściej spotykane kolory to białe (częściej szarobeżowe) tło i czarny tekst. W dokumentach wyświetlanych na ekranie spotkać można o wiele więcej połączeń. Z jakiegoś powodu, po części z przyzwyczajenia i tradycji, zwykle spotyka się layouty oparte o jasne tło i ciemny tekst. Oczywiście tradycja nie jest głównym powodem takiego stanu rzeczy – ciemny tekst na białym tle jest w większości przypadków bardzo czytelny.

Równie często spotykane połączenie, jasnoszary-na-ciemnoszarym, jest dużo trudniejsze do dobrego i czytelnego złożenia. Dzieje się tak dlatego, że mało który krój był przeznaczony do druku w kontrze (czyli praktycznie jasny na ciemnym). Spójrzcie na poniższe obrazki przedstawiające tekst w układzie czarny na białym i biały na czarnym. Tekst w kontrze wydaje się być mniejszy, zwłaszcza przy krojach szeryfowych (widać to dobrze w ostatnim paragrafie pisanym Courierem). Warto dodać, że tekst na obrazkach nie ma po prostu odwróconych (w programie do obróbki grafiki) kolorów, ale zostały one ręcznie ustawione. Powiem więcej – Writer z nieznanego powodu zwężył tekst na czarnym tle (pierwsza linijka), można więc spodziewać się podobnych niespodzianek od innych programów.

czarny tekst na białym tle

Czarny tekst na białym tle wydaje się większy niż…

biały tekst na czarnym tle

…biały tekst na czarnym tle

Jak to obejść?

Najlepszym sposobem na obejście tego problemu byłoby użycie kroju o większej grubości linii (przykładem kroju o grubych liniach może być Arial Black) – niestety, jak pisałem ostatnio, nie mamy zbyt dużego wpływu na wybór kroju. Równie ciężko zmienić grubość tekstu (CSS obsługuje praktycznie 3 grubości). Jak widać bardzo trudno przeciwdziałać efektowi zmniejszania liter w kontrze. Trochę pomaga zwiększenie odstępów międzyznakowych (letter-spacing). Nie należy jednak przesadzać i ustawić tę właściwość dosłownie rzędu setnych części ema – i tak będzie widoczne. Warto również powiększyć nieco interlinię, aby linie nie zlewały się ze sobą.

Na obrazku poniżej widać czarny tekst na białym tle oraz tekst w kontrze w takim samym stopniu (18). Na przekór temu, co pisałem wcześniej, tekst biały na czarnym tle wydaje się większy niż klasyczny. Dzieje się tak, ponieważ tekst jest pogrubiony (108%, litera „C” 111%), a odstępy międzyznakowe zwiększone (o 0,3 pt, między niektórymi znakami 0,5pt). Niestety, wykonanie takiej operacji przy użyciu CSS jest praktycznie niemożliwe.

teksty biały na czarnym i w kontrze

biały na czarnym też może być czytelny

Czy ten tekst jest biały?

Warto wspomnieć o jeszcze jednym – przez cały czas piszę o kolorach jasnym i ciemnym. W przypadku typowego układu ciemny na jasnym tło jest zwykle białe (#fff). Ustawienie koloru tekstu ciągłego na czarny (#000) spowoduje zbyt duży kontrast, widoczny zwłaszcza na tanich matrycach LCD. Sytuacja odwrotna (jasne na ciemnym) jest jeszcze gorsza – biały jest zbyt kontrastowy a szary za bardzo zlewa się z tłem. Można ustawić jasnoszary, zgadza się. A co, jeśli czytelnik przegląda stronę z laptopa i zmniejszył jasność matrycy, żeby oszczędzać baterie? Naprawdę ciężko znaleźć dobry układ kolorów typu jasnoszary na czarnym, który będzie zawsze czytelny.

Przy okazji należy wziąć pod uwagę, jak użyte kolory wyglądają na różnych monitorach. Mój poprzedni szablon jest doskonałym przykładem czego robić nie można;) Biały tekst na czarnym tle a obok czerwona kolumna boczna… Zapomniałem tylko, że większość osób używa megajasnych monitorów LCD, które paskudnie odwzorowują barwy. Oczywiście nie można też przesadzić w drugą stronę – kontrast nie może być za mały. Wyjątkiem są krótkie teksty, które nie mają odwracać uwagi czytelnika od tekstu głównego (stopki, opisy pól formularzy itp.) – tu niski kontrast pożądany.

Podsumowując, łatwiej jest zaprojektować layout, w którym tło pod tekstem jest białe a tekst ciemnoszary (zbliżony do czarnego) niż odwrotny – ciemne (zwykle czarne) tło i jasny tekst. Jeśli tło musi być czarne, tekst powinien być szary a nie biały (ale nie za ciemny), a żeby litery wydawały się większe (kontra je optycznie pomniejsza) należy zwiększyć odległości międzyznakowe, interlinię i jeśli to możliwe – grubość tekstu. Koniecznie należy dobrać odpowiedni kontrast między elementami użytymi stronie – nie może być ani za duży (odwraca uwagę czytelnika) ani za mały.

Autor artykułu: Marcin Kosedowski.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *