Wstęp

Tworzenie stron, obcowanie z ich kodem, podglądanie setki twórców i projektów w miesiącu wypacza podejście do stron. Jeśli do tego staram się tworzyć zgodnie ze standardami (“standardowo się ograniczając“, jak to czasem zdarza mi się mówić) zauważam, że coraz więcej rzeczy na stronach mnie drażni, męczy, odpycha.

Ba, niedawno zacząłem po cichu tworzyć swój własny mini-portal tylko dlatego, że oryginalny ładuje się za długo i dłuższe przeglądanie jest po prostu męczące.

Zatem czego nie lubię, bądź mnie męczy, i nie nazywa się “menu we Flashu”:

Brak paddingów

W konsekwencji przyleganie tekstu do brzegów bloku. Rozwiązanie padding:. Wystarczy 4px. Od razu lepiej to wygląda

Brak odstępów między liniami

Pół biedy jeśli jest to font w rodzaju “Verdana” bądź Trebuchet MS. W przypadku innych fontów tekst zlewa się w jedną, odpychającą, bryłę. Odpowiedź: line-height: 150%;. Może być też inna, sensowna, wartość. Nie powinna być za mała, ani też za duża.

Wiersze dłuższe niż 60-70 znaków

(więcej o tym w kolejnej notce dotyczącej typografii w sieci). Na to niestety nie ma prostego i skutecznego rozwiązania.

Dlaczego jest to ważne? Wynika to ze sposobu czytania tekstu przez człowieka – za długie linie sprawiają, że człowiek zaczyna kręcić głową i męczy się czytaniem oraz gubi wątek. Choć w przypadku typografii internetowej 60-70 znaków to i tak za dużo.

Justyfikacja

Skoro już jesteśmy przy długości linii i typografii internetowej to wypada wspomnieć o justyfikacji.

Justyfikacji w typografii internetowej również nie lubię, w nadmiarze. Faktycznie, czasem należałoby coś wyjustować, gdyż tak jest wg zasad. Ale justyfikacja polega na modyfikacji odległości międzywyrazowych co w niektórych przypadkach prowadzi do tragicznego rozstrzelenia słów.

W przypadku krótkich linii najlepiej po prostu nie justować tekstu.

Podkreślenia linków

Podkreślenia w WWW to bardzo ciekawa sprawa ponieważ z typograficznego punktu widzenia ich stosowanie całkowicie psuje odbiór tekstu. Jednak na stronach WWW przyjęło się, że linki są podkreślone – w ten sposób wyróżniają się z tekstu. Nabiera to dodatkowego znaczenia w przypadku osób niepełnosprawnych – chociażby z wadą wzroku uniemożliwiającą odróżnianie, często bardzo delikatnie, różniących się kolorów i ich odcieni. Problem narasta w przypadku stosowania bardzo małych rozmiarów fontów. Rozwiązanie:

  • a
  • {
  • text-decoration: none;
  • border-bottom: 1px solid #kolorlinka
  • }

Kursywa

W przypadku książek/gazet jest to podstawowy, elegancki i nie “agresywny”, sposób wyróżniania tekstu. W typografii internetowej jednak całkowicie zawodzi. Z uwagi na niewielką rozdzielczość – kreski pionowe w znakach, po pochyleniu stają się liniami pochyłymi, wyraźnie schodkowanymi.

Nie jest to wielki problem w przypadku wyróżnienia krótkich zdań czy pojedynczych słów. Gorzej z dłuższymi tekstami.

Jeśli chcemy wyróżnić dłuższy fragment tekstu – lepiej stosować pogrubienie.

Times New Roman

Font stworzony z myślą o gazecie Times. Wspaniały. Naprawdę. Tak powyżej 300dpi. W 96/72 jest mało czytelny.

Ciąg dalszy być może nastąpi…

Powiązane wpisy:

  1. [XHTML] – Zapomniane dziecko HTML czyli: czy nikt nie wie do czego służy LABEL?
  2. Semantyczna partyzantka w XHTML, czyli <p> czy <pre>, a może <blockquote>?
  3. No to Fru! czyli rencenzjonalna noc (Fru!, Brothers in Arms, Stronghold 2)
  4. Hell i on czyli rzut oka na Projektowanie serwisów WWW
  5. Podstawy SEO, czyli optymalizacja stron pod kątem wyszukiwarek, część 1.