Jak tworzyć czytelne teksty za pomocą CSS?

Kaskadowe arkusze stylów mogą być łatwo wykorzystywane do tworzenia różnego rodzaju efektów czcionek. Dbając o estetykę nie można jednak stracić z oczu kwestii związanych z użytecznością. Chodzi o to, aby forma nie przesłoniła użytkownikowi treści.

Istnieje kilka podstawowych zasad rządzących edycją tekstu na stronach WWW. Zawsze trzeba pamiętać o tak zwanym modelu ABA. Opiera się on na zasadzie, która mówi, że dwie podobne części muszą być przedzielone czymś, co je od siebie odróżnia. W praktyce model ten jest widoczny wszędzie tam, gdzie są stosowane śródtytuły lub ramki.

Kolejnym zabiegiem jest manipulowanie rozmiarem czcionki. Tutaj sprawa jest oczywista – im większy rozmiar, tym istotniejszy dany element. Podobną rolę odgrywa waga (ang. weight) fontu. Czcionki pogrubione, podkreślone lub szeryfowe mają przewagę nad standardowym Arialem czy jakąkolwiek kursywą. Oto przykład, w którym czcionkę akapitu pomniejszono do 14 pikseli, a czcionkę dopisków do 12 pikseli:

.bodytext p {
font-size:14px;
}

.sidenote {
font-size:12px;
}

Alternatywnie można stosować wielkości względne w stosunku do standardowego fontu 16 pikseli. Oznacza się je jako em.

.bodytext p {
font-size:0.875em; /* 16 * 0,875=14 */
}

.sidenote {
font-size:0.75em; /* 16 * 0,75=12 */
}

Ważną rzeczą, na którą trzeba zwrócić uwagę jest kolor tła – jeden z pierwszych elementów ustalanych przez twórcę strony WWW przy pomocy kaskadowego arkusza stylów. Klasyczna biel nie zawsze się sprawdza – stosując jednak inne kolory trzeba pamiętać o zachowaniu odpowiedniego kontrastu i dobraniu właściwej barwy czcionki.

Tworząc stronę internetową, która zawiera dużą ilość tekstu, należy pamiętać o zachowaniu jednolitości stylów. Wszystkie tytuły, śródtytuły czy nagłówki ramek powinny wyglądać tak samo. Szczególnie przydaje się to podczas wyróżniania najważniejszych elementów w serwisie. Kod przyjmuje przykładowo taką postać:

body {
color: #000;
background-color: #fff;
margin: 5em 5em 0 5em;
font-family: 'Lucida Grande', Verdana,
Geneva, Lucida, Arial, Helvetica, sans-serif;
}

Szczególnie ciekawym zabiegiem jest wstawienie wielkiej litery na początku akapitu – zajmuje ona zazwyczaj 3-5 linii standardowego tekstu. Przykładowy kod wygląda tak:

.kapitala {
margin-right:6px;
margin-top:5px;
float:left;
color:white;
background:khaki;
border:1px solid darkkhaki;
font-size:80px;
line-height:60px;
padding-top:2px;
padding-right:5px;
font-family:times;
}

Kolejnym krokiem jest ustalenie interlinii czy też wysokości wiersza. Dzięki temu odstępy między poszczególnymi linijkami tekstu będą większe, co ułatwi czytanie. Oto przykład, w którym mający 18 pikseli odstęp obowiązuje we wszystkich materiałach tekstowych na danej stronie WWW:

body {
font-size:100%;
line-height:18px;
}

.bodytext p {
font-size:0.875em;
}

.sidenote {
font-size:0.75em;
}

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

6 skomentuj »

Komentarze

#1 eRIZ^® 2009-05-11 19:23:23 -1
Do autora artykułu

- pseudoklasa first-letter: http://www.w3schools.com/CSS/pr_pseudo_first-letter.asp

- style linowe? Niech się autor zdecyduje i będzie konsekwentny - skoro najpierw są reguły w globalnym arkuszu, to niech się tego trzyma.

- bodytext - a ci mniej zorientowali skąd będą wiedzieli, skąd to się wzięło?

- IMHO za mało treści na temat marginesów zewnętrznych/wewnętrznych, a także nt. ich zapadania.

Artykuł do dopracowania. Pokaż komentarz
IP: 87.205.32.[...] Opera/9.64 (Windows NT 5.1; U; en) Presto/2.1.1
#2 Arbor 2009-05-12 09:51:44 0
Pytanie:

Model ABA to pojęcia jakiej dziedziny? Tworzenia stron, użyteczności, tworzenia grafiki/wyglądu. Tego terminu nie można znaleźć w internecie, więc interesuje mnie gdzie on powstał/pojawił się.
IP: 212.106.17.[...] Mozilla/5.0 (X11; U; Linux i686; pl-PL; rv:1.9.0.7) Gecko/2009042315 Firefox/3.0.10
#3 MixRobi 2009-05-13 14:19:34 0
Zgadza się, first-letter wiele lepiej to zrobi a dodatkowo nie trzeba ciąć tekstu by wstawić te dziwne spany ;)
IP: 80.55.152.[...] Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.10) Gecko/2009042523 Ubuntu/9.04 (jaunty) Firefox/3.0.10
#4 ciekawy 2009-05-14 19:20:21 0
Autor... co Pan powiesz na te komentarze? LOL
IP: 84.92.87.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10
#5 eimi^® 2009-05-15 15:04:32 0
Model ABA? To najpewniej z terminologii poetyckiej, dla określenia metrum, albo strofiki wiersza. A czym jest? To opisane w tekście.
IP: 83.8.58.[...] Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.1b5pre) Gecko/20090514 Shiretoko/3.5b5pre
#6 Batgraf^® 2009-05-25 15:00:58 1
co Wy tak po człowieku jedziecie równo? Wyraźcie swoja opinię, ale doceńcie, że ktoś poświęcił troche czasu na napisanie artykułu. A tu zamiast dzięki - huzia na juzia :)
IP: 89.75.136.[...] Opera/9.64 (Windows NT 5.1; U; pl) Presto/2.1.1

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.