--=REKLAMA=--
Czytelność tekstu należy do wymagających szczególnej dbałości aspektów stron internetowych. Tekst na ekranie monitora jest trudny w czytaniu.
Kolorystyka: najczytelniejszym jest czarny tekst na białym tle. Kontrast między tekstem i tłem jest największy.
Czcionki są - po kolorze - najprawdopodobniej jedną z podstawowych właściwości strony.
Czcionek jest tysiące, nie wszystkie są zainstalowane w każdym komputerze, choćby dlatego, że większość z nich jest płatna. Aby uniknąć sytuacji, że strona nie jest poprawnie wyświetlana w przeglądarce użytkownika z powodu braku wymaganych czcionek, CSS dostarcza projektantom stron rozwiązania, które pozwala przeglądarce w takim przypadku dobrać odpowiednie czcionki w zastępstwie. W regule definiującej krój czcionki (font-family) ustawia się kilka krojów czcionki. Jako pierwszy umieszcza się krój najbardziej preferowany, po nim inne, któe mogą być zastosowane w zastępstwie, a jako ostatnią umieszcza się jedną z pięciu rodzin:
W poniższej tabeli przedstawiono przykłady różnych czcionek. Możesz zobaczyć, jak je wyświetli przeglądarka, której używasz (jeśli są na Twoim komputerze):
'sans-serif': zwykłe czcionki bez szeryfów | |
---|---|
Arial, sans-serif | Zażółć gęślą jaźń |
Helvetica, sans-serif | Zażółć gęślą jaźń |
Gill Sans, sans-serif | Zażółć gęślą jaźń |
Lucida, sans-serif | Zażółć gęślą jaźń |
Helvetica Narrow, sans-serif | Zażółć gęślą jaźń |
Tahoma, sans-serif | Zażółć gęślą jaźń |
Verdana, sans-serif | Zażółć gęślą jaźń |
sans-serif | Zażółć gęślą jaźń |
'serif': zwykłe czcionki z szeryfami | |
Times, serif | Zażółć gęślą jaźń |
Times New Roman, serif | Zażółć gęślą jaźń |
Palatino, serif | Zażółć gęślą jaźń |
Bookman, serif | Zażółć gęślą jaźń |
New Century Schoolbook, serif | Zażółć gęślą jaźń |
serif | Zażółć gęślą jaźń |
'monospace': czcionki o ustalonej szerokości | |
Andale Mono, monospace | Zażółć gęślą jaźń |
Courier New, monospace | Zażółć gęślą jaźń |
Courier, monospace | Zażółć gęślą jaźń |
Lucidatypewriter, monospace | Zażółć gęślą jaźń |
Fixed, monospace | Zażółć gęślą jaźń |
monospace | Zażółć gęślą jaźń |
'cursive': czcionki naśladujące pismo odręczne | |
Comic Sans, Comic Sans MS, cursive | Zażółć gęślą jaźń |
Zapf Chancery, cursive | Zażółć gęślą jaźń |
Coronetscript, cursive | Zażółć gęślą jaźń |
Florence, cursive | Zażółć gęślą jaźń |
Parkavenue, cursive | Zażółć gęślą jaźń |
cursive | Zażółć gęślą jaźń |
'fantasy': czcionki dekoracyjne, do tytułów, etc. | |
Impact, fantasy | Zażółć gęślą jaźń |
Arnoldboecklin, fantasy | Zażółć gęślą jaźń |
Oldtown, fantasy | Zażółć gęślą jaźń |
Blippo, fantasy | Zażółć gęślą jaźń |
Brushstroke, fantasy | Zażółć gęślą jaźń |
fantasy | Zażółć gęślą jaźń |
Czcionki należące do jednej rodziny mają różne style, typowo jest to bold i italic, często również bold italic, rzadziej small-caps i w niewielu przypadkach extra-light/extra-bold lub stretched/condensed.
Poniższa tabela pokazuje liczne style czcionek. Jeśli na swoim komputerze masz zainstalowanych wiele rodzajów czcionek, kilka poniższych rzędów może wyglądać tak samo.
reguła | szeryfowe | bezszeryfowe | |||
---|---|---|---|---|---|
Styl | |||||
font-style: normal
| Zażółć gęślą jaźń… | Zażółć gęślą jaźń… | |||
font-style: italic
| Zażółć gęślą jaźń… | Zażółć gęślą jaźń… | |||
font-style: oblique
| Zażółć gęślą jaźń… | Zażółć gęślą jaźń… | |||
Grubość (ciężar) | |||||
font-weight: 100
| Zażółć gęślą jaźń… | Zażółć gęślą jaźń… | |||
font-weight: 200
| Zażółć gęślą jaźń… | Zażółć gęślą jaźń… | |||
font-weight: 300
| Zażółć gęślą jaźń… | Zażółć gęślą jaźń… | |||
font-weight: normal
| Zażółć gęślą jaźń… | Zażółć gęślą jaźń… | |||
font-weight: 500
| Zażółć gęślą jaźń… | Zażółć gęślą jaźń… | |||
font-weight: 600
| Zażółć gęślą jaźń… | Zażółć gęślą jaźń… | |||
font-weight: bold
| Zażółć gęślą jaźń… | Zażółć gęślą jaźń… | |||
font-weight: 800
| Zażółć gęślą jaźń… | Zażółć gęślą jaźń… | |||
font-weight: 900
| Zażółć gęślą jaźń… | Zażółć gęślą jaźń… | |||
Wariant | |||||
font-variant: normal
| Zażółć gęślą jaźń… | Zażółć gęślą jaźń… | |||
font-variant: small-caps
| Zażółć gęślą jaźń… | Zażółć gęślą jaźń… | |||
Rozciągnięcie (kondensacja) | |||||
font-stretch: ultra-condensed
| Zażółć gęślą jaźń… | Zażółć gęślą jaźń… | |||
font-stretch: extra-condensed
| Zażółć gęślą jaźń… | Zażółć gęślą jaźń… | |||
font-stretch: condensed
| Zażółć gęślą jaźń… | Zażółć gęślą jaźń… | |||
font-stretch: semi-condensed
| Zażółć gęślą jaźń… | Zażółć gęślą jaźń… | |||
font-stretch: normal
| Zażółć gęślą jaźń… | Zażółć gęślą jaźń… | |||
font-stretch: semi-expanded
| Zażółć gęślą jaźń… | Zażółć gęślą jaźń… | |||
font-stretch: expanded
| Zażółć gęślą jaźń… | Zażółć gęślą jaźń… | |||
font-stretch: extra-expanded
| Zażółć gęślą jaźń… | Zażółć gęślą jaźń… | |||
font-stretch: ultra-expanded
| Zażółć gęślą jaźń… | Zażółć gęślą jaźń… |
W CSS3 istnieje dodatkowy styl: 'font-effect', który nadaje czcionce wygląd engraved lub embossed.
Rozmiar czcionki powinien zapewniać jej czytelność na ekranie. Z doświadczenia potwierdzonego badaniami wynika, że odpowiednią dla większości użytkowników Internetu jest czcionka 12-punktowa.
Rozmiar tekstu na dobrze zaprojektowanej stronie nigdy nie powinien być stały. CSS dostarcza rozmiarów relatywnych, które umożliwiają użytkownikom dostosowanie rozmiarów czcionki do swoich potrzeb