Tekst na stronach WWW, zastosowanie CSS w typografii

Autor: Paweł Lewczuk, dodano: 31-07-2003
Kategoria: Projektowanie WWW

Piękna grafika, świetna nawigacja. To jednak jeszcze nie wszystko. Na stronie internetowej liczy się przede wszystkim treść. Trzeba ją więc odpowiednio zaprezentować.

Arial? Tahoma? A może Verdana?

Tekst wyświetlany na monitorze różni się od tekstu na papierze. Przede wszystkim czyta się go dużo wolniej, szybciej męczy wzrok... Aby ułatwić internaucie czytanie trzeba użyć przede wszystkim odpowiednich czcionek. Najlepiej, aby były to fonty bezszeryfowe. Ponieważ jednak przeglądarki używają zazwyczaj do wyświetlania tekstu czcionek szeryfowych, konieczne jest ustalenie w CSS odpowiedniego kroju pisma dla tekstu. Trzeba również zwrócić uwagę na fakt, iż nie należy podawać nazw niestandardowych czcionek, których z pewnością nie posiada większość uzytkowników. W przypadku stron WWW należy ograniczyć się do kilku najpopularniejszych fontów (Verdana, Arial, Tahoma, Helvetica).

p {font-family:Verdana,'Arial CE',Arial,Tahoma,Helvetica,sans-serif; font-size:9pt; color:black;}



Powyższy kawałek kodu spowoduje, że do wyświetlenia tekstu przeglądarka użyje czcionki Verdana. Jeżeli internauta nie posiada takowej czcionki w swoim komputerze, przeglądarka zacznie szukać czcionki Arial CE itd. Proszę zwrócić uwagę na fragment Arial CE, Arial Dlaczego należy wpisywać czcionki w ten sposób wyjaśniłem w FAQ w sekcji CSS.

Ozdobniki - ale nie tylko

"Ozdobniki", czyli wszelkie pogrubienia, podkreślenia itp... Dzięki nim nasze oko łatwo dostrzega ważniejsze części tekstu, które możemy pogrubić, podkreślić czy pochylić. W celu wyróżnienia jakiegoś wyrazu/zdania/akapitu, możemy zmienić mu kolor. Wszystkie te rzeczy łatwo zrobić w CSS i, o ile pogrubienie, podkreślenie i pochylenie uzyskujemy korzystając z HTMLa, o tyle elementy niestandardowe musimy przygotować sami. W tym celu najlepiej skorzystać z klas.

.grubyNiebieski {font-weight:bold; color:royalblue;}
.grubySzary {font-weight:bold; color:gray;}
.ciemnoczerwony {color:darkred;}



To oczywiście tylko przykład - kilka klas, dzięki którym urozmaicimy tekst obejmując fragment poleceniem <span class="nazwaklasy"></span>. Jednak pamiętajmy o tym, aby wyróżniać tylko ważne fragmenty, a nie kolorować tekst na lewo i prawo (bo możemy uzyskać w ten sposób efekt zupełnie odwrotny).
Wypada jeszcze wspomnieć o nagłówkach. To właśnie dzieki nim zwracamy uwagę na konkretny artykuł i to nagłówek pozwala nam się zorientować o czym traktuje dany artykuł. Z tego powodu nagłówek powinien być w jakiś sposób wyróżniony - czy to kolorem czy wielkością (a najlepiej jednym i drugim). Oczywiście w niczym nie należy przesadzać:) Dobrze jest także wiedzieć, że wyszukiwarki "lubią", gdy nagłówek umieszczony jest pomiędzy <h1> i </h1>.

Układ tekstu

W Internecie, inaczej niż w publikacjach papierowych, wyróżniamy akapit. Zamiast przejścia do nowej linii i charakterystycznego wcięcia, mamy po prostu 1 linijkowy odstęp. I bardzo dobrze - strasznie ciężko jest przeczytać tekst, bez odstępów. Taki jeden wielki, zbity "klocek". Dzięki odstępom (czyli akapitom uzyskiwanym dzięki <p> i </p>) możemy podzielić tekst na logiczne fragmenty - w danym bloku znajdzie się tylko tekst dotyczący konkretnego zagadnienia.


A jak wyrównać tekst? W zasadzie nie ma jednoznacznej odpowiedzi, zależy jak będzie najlepiej wyglądać. Jednak zwykle pożądany efekt dają teksty wyjustowane (text-align:justify;), bądź wyrównane do lewej strony (text-align:left;).


Szerokość tekstu również znacząco wpływa na jego odbiór. Pamiętajmy, aby nie była ona zbyt duża. Zwykle pół strony (ok. 400 pikseli) w zupełności wystarcza. Strona, na której tekst rozciąga się na całą szerokość ekranu jest z góry skazana na porażkę. Przechodzenie do nowej linii (czyli po lewej stronie ekranu), podczas gdy jesteśmy pod koniec poprzedniej (czyli po prawej stronie ekranu) jest naprawdę bardzo męczące. <h2>Uwagi dodatkowe</h2> Internet, jako medium niezależne jest dostępny praktycznie dla każdego.

 

Stronę internetową może stworzyć nawet dziecko (sam jeszcze nim jestem;). Być może stąd biorą się witryny z całą gamą błędów ortograficznych i gramatycznych, o merytorycznych nie wspominając. Dbając o wysoki poziom tekstu na stronie nie zapominajmy także o poprawności gramatycznej i ortograficznej. Tekst z "bykami" czyta się na prawdę źle, a przez niepoprawność gramatyczną możemy często zgubić sens konkretnych zdań, a co za tym idzie, artykuł może zostać źle zrozumiany przez odwiedzającego naszą stronę.
Nigdy nie stosujmy się też do "mody" panującej na wielu blogach, czyli tekstu pisanego w ten sposób:

czEśĆ! OtO mOja pIErwSza StRoNA! FajNA, nIe?

Proszę sobie teraz wyobrazić 3 strony ekranowe takiego tekstu...

Jak widać nie ma gotowej recepty na dobrze napisany i umieszczony tekst na stronie. Jednak stosując się do powyższych zaleceń znacząco ułatwimy użytkownikowi czytanie, a o to przecież nam chodzi.

Ocena 2.69/5 (53.74%) (649 głosów)

Komentarze:


  • Dodał: Gość data: 2009-11-05
    >>Tekst z "bykami" czyta się na prawdę źle<< - Nieźle, i właśnie w tym zdaniu autor sadzi byka :)

  • Dodał: Gość data: 2009-11-07
    Drobiazgowość widzę bierze górę nad treścią...

    Dzięki za pouczający artykuł

  • Dodał: Gość data: 2010-01-19
    na koniec powinien byc jakis super zestaw styli do wyciecia i wklejenia na stronke :(
  • do gosc z 2010-01-19
    Dodał: Gość data: 2011-03-06
    Zazwyczaj nie komentuje takiego komentarza . Ale są wyjątki . By było super jak by takie pasożyty jak ty wygineły robaku. :)
    Pozdrawiam z krainy web.
  • GzwKJCzuGtLGkBcd
    Dodał: Lorenita data: 2012-10-18
    leemc pisze: Skoro Przewozy Regionalne są tak deficytowe, to jakim cudem kojlee Mazowieckie wykazały w 2009r. ponad 700 tys. zł, a w 2010r. 6,7 mln zł zysku? KM to spf3łka zajmująca się przewozami regionalnymi właśnie. Może jak sprawdzisz, jakie dofinansowanie od UM uzyskały KM, to dostaniesz odpowiedź, skąd ten zysk.


Dodaj komentarz:


Temat:
Twój nick:
Komentarz:
 

Prosimy o kulturę wypowiedzi. Komentarze zawierające niecenzuralne zwroty, bądź obrażające inne osoby będą usuwane. Kod HTML w wypowiedziach jest niedozwolony. Wydawca nie odpowiada za treść komentarzy.