kminek.pl

Idealne parametry tekstu na stronach WWW – 10 przykazań Grzegorz Wójcik

19 Aug, 2008  |  Artykuły, CSS

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 [1] 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 body za pomocą słowa kluczowego medium, 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 [2] 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; }

  1. <p>To jest <strong class="wyroznij">ważny</strong> fragment zdania.</p>

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

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.

-----

Wydrukowano z: https://www.kminek.pl/idealne-parametry-tekstu-na-stronach-www-10-przykazan/

Lista adresów URL występujących w tekście:

© 2007-2024 kminek.pl