Ludzie mają to do siebie, iż nieustannie poszukują rozwiązań idealnych. W każdej dziedzinie można wskazać coś na kształt idealnego wzoru/podejścia, które odpowiada preferencjom większości i względem którego dokonuje się rozmaitych ocen.
Podobna sytuacja ma miejsce w przypadku typografii internetowej. Czy istnieją idealne parametry tekstu na stronie WWW, gwarantujące maksymalny poziom przejrzystości, dostępności i percepcji? Wydaje mi się, że tak. Poniżej przedstawiam kilka fundamentalnych zasad, którymi należy się kierować przy formatowaniu tekstów na stronach internetowych i określaniu ich właściwości za pomocą stylów CSS.
1. Dobierz odpowiednie kroje czcionek
Używaj czcionek zaprojektowanych specjalnie do wyświetlania na ekranie monitora – takich jak Verdana czy Georgia. Generalnie w Internecie zaleca się stosowanie czcionek bezszeryfowych (Verdana). Jeżeli musisz skorzystać z czcionki szeryfowej (bo wymaga tego np. koncepcja graficzna serwisu) posłuż się czcionką Georgia. Dodatkowo dwie wymienione powyżej czcionki dostępne są praktycznie w każdej konfiguracji system operacyjny/przeglądarka.
font-family: Verdana, sans-serif;
Możesz także pokusić się o osadzenie na stronie WWW niestandardowej czcionki za pomocą deklaracji @font-face. Więcej informacji znajdziesz w artykule Niestandardowe czcionki na strona WWW – idą lepsze czasy.
2. Określ sensowny rozmiar tekstu
W ciągu ostatnich lat gwałtownie wzrosła rozdzielczość monitorów. Wiersz tekstu pisany czcionka o rozmiarze 10 czy 11 pikseli w rozdzielczości 1280×1024 przypomina bardziej karawanę mrówek niż zbiór liter.
Dlatego nie bój się nadać słusznego rozmiaru czcionkom wykorzystywanym w podstawowym tekście na stronie – absolutne minimum to 12 pikseli ale bardziej zaleca się stosowanie czcionek o rozmiarze 13 czy nawet 14 pikseli.
font-size: 13px;
Wszystkie nowoczesne przeglądarki dysponują zaawansowanymi mechanizmami powiększania treści strony niezależnie od tego, w jakich jednostkach określona jest wielkość tekstu w stylach CSS. Pamiętaj jednak, że użytkownicy przeglądarki Internet Explorer 6 nie będą mogli zmienić rozmiaru tekstu, którego wielkość zdefiniowana jest za pomocą pikseli. Jeżeli zależy Ci na maksymalnej dostępności tekstu również w tej przeglądarce, skorzystaj z następującego rozwiązania – ustaw wielkość tekstu dla elementu
bodyza pomocą słowa kluczowegomedium, a następnie określ rozmiar tekstu dla poszczególnych elementów za pomocą wartości procentowych:
body { font-size: medium; } /* rozmiar medium to około 16px */
p { font-size: 81%; } /* 81% z 16px = 13px */
3. Zadbaj o większą ilość światła między wierszami
Interlinia to odstęp między kolejnymi wierszami tekstu. By wiersze nie zlewały się zbytnio ze sobą warto zwiększyć domyślną wartość interlinii do 140 – 150 %.
line-height: 140%;
4. Dodaj odstępy między akapitami tekstu
Aby ułatwić percepcję tekstów na ekranie monitora, należy je jak najwyraźniej dzielić na mniejsze, spójne elementy. Zdefiniuj odstęp pomiędzy kolejnymi akapitami tekstu o wielkości 10 – 20 pikseli.
p { padding: 0; margin: 0 0 20px 0; }
5. Liczba znaków w wierszu i wyrównanie tekstu
Unikaj jak ognia tekstów wypełniających całą szerokość monitora (jest to niestety bolączka wielu elastycznych layoutów). Zbyt długie wiersze to ryzyku zgubienia czytanej linii tekstu.
Przyjmuje się, że idealny wiersz tekstu na stronie WWW powinien mieć około 40 – 50 znaków (około 8 – 10 wyrazów) i powinien być wyrównany do lewej. Dostosuj szerokość pojemnika obejmującego tekst, aby uzyskać liczbę zbliżoną do podanej.
6. Zadbaj o odpowiedni poziom kontrastu między kolorem tekstu a kolorem tła
Pod żadnym pozorem tekst nie może zlewać się z tłem, nad którym został umieszczony! Zmierz poziom kontrastu miedzy kolorem tekstu a kolorem tła strony – najlepiej wykorzystać do tego narzędzie Colour Contrast Analyser, które dokonuje porównania w oparciu o algorytmy opracowane przez W3C. Kolor tła powinien być „neutralny” dla oczu, nie powinien ich męczyć. Nie umieszczaj tekstu nad tłem będącym powtarzanym obrazkiem o agresywnej kolorystyce.
Przykłady optymalnych kombinacji kolorystycznych:
Lorem Ipsum – background: #fff; color: #333;
Lorem Ipsum – background: #d8f5d3; color: #000;
Lorem Ipsum – background: #444; color: #fff;
7. Zrezygnuj z domyślnych podkreśleń, szczególnie w linkach
Domyślne podreślenia linków (text-decoration: underline) psują spójność wizualną tekstu ponieważ poziome kreski podkreślenia przecinają litery z wydłużeniami dolnymi. Podkreślenie lepiej jest uzyskać wykorzystując właściwość border-bottom.
a { text-decoration: none; border-bottom: 1px solid blue; }
8. Unikaj przesady w używaniu kursywy i pogrubienia
Nadmierna ilość pogrubień i kursywy sprawia, że kolumny tekstu tracą swą jednolitą szarość na rzecz nierównomiernie rozłożonych ciemniejszych i jaśniejszych fragmentów. Wpływa to negatywnie na łatwość odbioru tekstu bo nasz wzrok w pierwszej kolejności podświadomie podąża w stronę wyróżnionych fragmentów „odrywając się” od optymalnej linii czytania tekstu. Jeżeli chcesz zaakcentować jakiś wyraz lub fragment zdania warto rozważyć użycie dużych liter np. w taki sposób:
.wyroznij { font-weight: normal; text-transform: uppercase; }
|
Oczywiście nie należy zupełnie rezygnować z pogrubienia i kursywy – ale lepiej tę formę akcentowania stosować w odniesieniu do pojedynczych słów a nie całych zdań.
9. Pamiętaj o podstawowych zasadach interpunkcyjnych i ortografii
- zamiast cudzysłowów prostych ("Cytat") używaj cudzysłowów drukarskich („Cytat”).
Uzyskasz je w kodzie HTML za pomocą encji„(lewy) oraz”(prawy). - aby zagnieździć cytat w cytacie należy użyć „ostrych” cudzysłowów: „To jest «cytat» w cytacie”
Uzyskasz je w kodzie HTML za pomocą encji«(lewy) oraz»(prawy). - zamiast myślnika w postaci znaku minusa używaj pauzy (encja
—) lub półpauzy (encja–) - zamiast trzech kolejno postawionych kropek używaj wielokropka (encja
…) - zamiast pisać: „Znam HTMLa , uczę się UNIX’a i używam Firefox’a”
napisz: „Znam HTML-a , uczę się UNIX-a i używam Firefoksa”
10. Pomyśl zanim coś napiszesz :)
„Z ładnej miski się nie najesz” – czyli wygląd to nie wszystko. Tylko ciekawy i merytoryczny tekst jest zbliżony do ideału.
Powinno być: używam Firefoksa ;)
Thx, poprawilem :) Chociaz podobno jezykoznawcy sami nie moga sie zdecydowac czy zamieniac ten x na ks czy nie :)
Jestem językoznawcą i się na w/w temat nie wypowiadam :D
Super tekst, aż chyba sobię wydrukuję i powieszę jako checklista nad komputerem. Odnośnie podkreśleń jest jeden wyjątek a mianowicie strony e-commerce – tam najlepiej by link wyglądał jak link, żeby ludzie mniej obeznani wiedzieli w co klikać :).
Nie jest to nic ważnego, ale interlinię zdefiniowano jako odstęp między wierszami. Następnie zaproponowano nadanie jej wartości 140%.
Może warto zaznaczyć, że line-height to wysokość wiersza (ale najczęściej nazywana już interlinią), żeby nikt nie miał wątpliwości.
1) W języku polskim tradycyjnie stosuje się podział na akapity oparty na wcięciach akapitowych. Odstępy pomiędzy akapitami stosowane zamiast wcięć to tradycja anglosaska. Należałoby jeszcze wspomnieć, że stosowanie obu typów wyróżniania akapitów naraz jest błędne.
2) “Umieć” to można obsługiwać skrawarkę albo tokarkę natomiast HTML-a (o ile w ogóle taka odmiana jest dopuszczalna) można “znać”.
No to może jeszcze napiszesz o wdowach. Ostatnio z nimi walczyłem.
Jak najbardziej zgoda. Tak sformatowane sa przeciez ksiazki. Ale mi w tym artykule chodzilo bardziej o idealna specyfike tekstu na ekranie monitora dlatego sugestia odstepow miedzy akapitami.
Good point! Poprawione :)
Tutaj podobnie – wdowy i sieroty to specyfika wydruku a ten tekst mial traktowac bardziej o medium ekranowym (
media="screen"). Byc moze niedlugo napisze podobny tekst o idealnych fontach w arkuszach CSS do wydruku (media="print"). Z tego co wyczytalem wdowy i sieroty osbluguje tylko Opera.A co sądzisz o używaniu tagów INS i DEL w celu ukazania zmian w tekście?
Cieszę się, że w polskim internecie coraz częściej zwraca się uwagę na aspekty typograficzne. Tak trzymać! Być może niedługo nie będę musiał korzystać z własnych arkuszy stylów na tylu użytkownikoodpornych witrynach…
Jednak moim zdaniem w punkcie 8. propagujesz coś błędnego. Choć sama idea wizualnego zastąpienia pogrubienia wielkimi literami w przypadku wyróżniania fragmentów tekstu jest ciekawym pomysłem, z którym spotykam się po raz pierwszy (a ma ona sens: wszak od zarania dziejów jednym z głównych celów osób składających tekst było doprowadzenie do równomiernej szarości kolumny), to jednak mam duże wątpliwości co do przykładu kodu, który zaprezentowałeś. Skoro wciąż chodzi o wyróżnienie tekstu i jedynie zastąpienie <em>wizualnej prezentacji</em> zwyczajowego pogrubienia/pochylenia, to dlaczego zmieniać sam tag? Uważam, że użycie zamiast tagu <strong> lub <em> i ostylowanie go tak, by zamiast standardowego sposobu jego prezentacji otrzymać nasz pożądany, byłoby logicznie poprawniejszym. Dzięki temu np. dla użytkowników screenreaderów, fragment ten nadal będzie zaakcentowany. Co o tym sądzisz?
Hmm, no tak – zapomniałem pozamieniać trójkątne nawiasy na encje :).
Poprawka do poprzedniego komentarza:
Uważam, że użycie zamiast <span> tagu <strong> lub <em> i ostylowanie go tak, by zamiast standardowego sposobu jego prezentacji otrzymać nasz pożądany, byłoby logicznie poprawniejszym. Dzięki temu np. dla użytkowników screenreaderów, fragment ten nadal będzie zaakcentowany. Co o tym sądzisz?
Bartek masz calkowita racje. Tak samo jak Maciek. Zaktualizuje tekst artykulu o wskazanie, aby uzywac znacznikow logicznych do oznaczania fragmentów tekstu.